I am struggling with this integration. Any help greatly appreciated.
I want to have the file browser option only on the link tab of the image dialog. In addition, I want it to default to a specific folder.
I've downloaded both filebrowser and popup plugins (4.3 standard did not list them in the plugins folder) and modified config.js with:
// enable plugin
config.extraPlugins = 'filebrowser';
config.extraPlugins = 'popup';
I call the CK instance from an include(contentEditor.js)
var config3 = {
toolbar:
[
[ 'Paste', 'PasteFromWord', '-', 'Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Source' , 'Templates', 'Link', 'Image' ]
],
uiColor: "#dafb3f",
height: "570px",
resize_enabled: false,
extraPlugins:'templates,filebrowser,popup',
on: { change: CKonChange }
};
// Initialize the editor.
// Callback function can be passed and executed after full instance creation.
$( 'textarea#nodeContents' ).ckeditor(config3); // nodeContents for city,state,country,resources editors
});
Now, I'm lost. How do I activate the browser button and pass the image path back to the instance?
1/28 UPDATE
As I could not find any documentation on how to integrate filebrowser plugin, I am looking at integrating a custom browse script.
So, in my config.js fle, I've got:
// Custom template files referenced in this array
config.templates_files = [ 'http://dev.wtpcentral.com/js/CK_templates_city.js' ];
// Image browser
config.filebrowserImageBrowseLinkUrl : "/include/filebrowser/browse.php?type=Images&dir="+encodeURIComponent('content/images');
// config.filebrowserImageBrowseUrl : "/include/filebrowser/browse.php?type=Images&dir="+encodeURIComponent('content/images');
// Custom Image upload
config.filebrowserUploadUrl ='/include/classUpload/upload_CK.php';
// enable plugin
// config.extraPlugins = 'filebrowser,popup';
And, I put browse.php into my /include/filebrowser folder.
BUT, this throws an error:
SyntaxError: invalid label config.filebrowserImageBrowseUrl : "/include/filebrowser/browse.php
AND my custom image upload script now does not load.
As you might see in my inline notes, I tried config.filebrowserImageBrowseUrl with the same results.
Any help greatly appreciated.
In this case you must use "=" instead of ":". Change this line
config.filebrowserImageBrowseLinkUrl: "/include/filebrowser/browse.php?type=Images&dir="+encodeURIComponent('content/images');
to
config.filebrowserImageBrowseLinkUrl = "/include/filebrowser/browse.php?type=Images&dir="+encodeURIComponent('content/images');
Related
I create custom ckeditor 5 build in https://ckeditor.com/ckeditor-5/online-builder/ (based on "decoupled component" type), at the end i download zip with files. But what I am supposed to do next how to import it in main.js / package.js and finnaly to component ?
All materials I was able to find are https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html , got decoupled-document preset build working, but wanted to add image resize, so created custom build and am stuck at that point.
Tnx for any response.
This post is maybe longer but its super easy 5min done.
[2022 updated, still works, just config moved in another file, also people may return there because of higher Vue version ckeditor5 toolbar disappear and update/reinstall is needed]
This example is for full document type of ckeditor 5, decoupled-document is almost everything You need, just it lacks image-resize, to add it go to https://ckeditor.com/ckeditor-5/online-builder/ click it all way and add image-resize or all other fun stuff (You do not need premium Ckfinder, but You probably need CKFinder upload adapter for images uplad which is free), and download zip file, do not forget to pick same type in step 1 as one you will use/install.
Install (like in classic guide - https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html)
npm install --save #ckeditor/ckeditor5-vue #ckeditor/ckeditor5-build-decoupled-document
(if here because of re-install, just remove package.json #ckeditor lines and run above install command again)
In main.js
import CKEditor from '#ckeditor/ckeditor5-vue';
createApp(App)
.use(router)
.use(CKEditor)
.mount("#app");
In your component
import DocumentEditor from '#ckeditor/ckeditor5-build-decoupled-document';
Now add config to data, You can find this config generated inside files you got from online-builder generator its copy/paste so do not freak out :) . You can find it in /src/ckeditor.js in defaultConfig, if you do not set it its possible You'll see an warning about missing "toolbar" options. Do not copy what you see below, use your custom generated config, its only for illustration :
data: function () {
return{
editorConfig: {
ckfinder: {
uploadUrl: 'https://page.com/api/uploadckeditor'
},
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'imageUpload',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo',
'alignment',
'codeBlock',
'fontBackgroundColor',
'fontColor',
'fontFamily',
'fontSize',
'highlight',
'horizontalLine',
'htmlEmbed',
'imageInsert',
'pageBreak',
'removeFormat',
'strikethrough',
'underline',
'style'
]
},
language: 'cs',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'imageStyle:alignLeft',
'imageStyle:alignRight',
'imageStyle:alignCenter',
'imageStyle:alignBlockLeft',
'imageStyle:alignBlockRight',
'linkImage'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
fontFamily: {
options: [
'default',
'indieflowerregular',
'Arial, sans-serif',
'Verdana, sans-serif',
'Trebuchet MS',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
]
},
licenseKey: ''
}
};
}
Now use it in component html
<ckeditor :editor="editor" #ready="onReady" v-model="editorData" :config="editorConfig"></ckeditor>
Decoupled component ckeditor package need #ready="onReady" othervise it will not initialize (classic do not need this)
here is method :
methods: {
onReady( editor ) {
// Insert the toolbar before the editable area.
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
);
},
Ok now You have almost everything done just last magic thing to do .
In files you downloaded go to /build folder and COPY all the files into
"node_modules#ckeditor\ckeditor5-build-decoupled-document\build" and override initial decoupled-document. This is key thing to do, even thought it sounds pretty horrible.
Bonus : I wanted to have also image upload so added to config
**ckfinder: {
uploadUrl: 'http://mypage/api/uploadckeditor'
},**
Here is php side implementation its just basic one wit no error handling
$uploaddir = '../www/adminUpload/';
$uploadfile = $uploaddir . basename($_FILES['upload']['name']);
if (move_uploaded_file($_FILES['upload']['tmp_name'], $uploadfile)) {
//$this->sendJson(array("message"=>"sucess"));
} else {
//$this->sendJson(array("message"=>"failed"));
}
$returnArray = array();
$returnArray["uploaded"] = true;
$returnArray["url"] = "http://www.mypage.com/adminUpload/".$_FILES['upload']['name'];
header('Content-type: application/json');
$this->sendJson($returnArray);
$this->terminate();
For last 2 rows they are Nette php framework specific, just send out $returnArray as json response.
Here is how I integrated CKEDITOR with Vue3.js
Install required packages
npm install --save #ckeditor/ckeditor5-vue #ckeditor/ckeditor5-build-classic
main.ts
import CKEditor from '#ckeditor/ckeditor5-vue'
const app = createApp(App)
app.use( CKEditor ).mount('#app')
Then in your component where you wnat to use ckeditor
<template>
<ckeditor :editor="editor" v-model="data.description"></ckeditor>
</template>
<script>
import {onMounted, reactive, computed} from "vue"
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
export default{
name:'Add',
setup() {
//....
const data = reactive({
description: '',
})
return {
data,
editor: ClassicEditor
}
}
}
</script>
enter code here
I faced a problem image uploading inside ckeditor5-build-classic,
for image uploading I'm using Node.js server and S3, here is how returned the json response from Node.js server, uploaded flag is more important:
exports.upload_file_ckeditor = async(req, res) => {
let obj = {
"uploaded" : true,
"url" : 'http://example.com/upload/xyz.png'
}
return res.send(obj)
}
I created a new Symfony4 project and installed EasyAdmin bundle (which works fine).
I tried to integrate CKeditor following the documentation : https://symfony.com/doc/master/bundles/EasyAdminBundle/integration/ivoryckeditorbundle.html
Here is my easyadmin.yaml:
easy_admin:
entities:
TestPage:
class: App\Entity\TestPage
form:
fields:
- { property: 'content', type: 'fos_ckeditor', type_options: { 'config': { 'toolbar': [ { name: 'styles', items: ['Bold', 'Italic', 'BulletedList', 'Link'] } ] } }}
here my fos_ckeditor.yaml :
twig:
form_themes:
- '#FOSCKEditor/Form/ckeditor_widget.html.twig'
fos_ck_editor:
input_sync: true
default_config: base_config
configs:
base_config:
toolbar:
- { name: "styles", items: ['Bold', 'Italic', 'BulletedList', 'Link'] }
The problem is it's still the regular textarea that is showing, not the ckeditor rich text one.
I tried to clear the cache, to add "- '#FOSCKEditor/Form/ckeditor_widget.html.twig'" in twig.yaml but i still can't see the ckeditor toolbar.
Anyone has an idea on what i'm missing ?
Thanks!
vkhramtsov on git has just advised me to add the "#FOSCKEditor/Form/ckeditor_widget.html.twig" form theme to "easyadmin:design: form_theme:list" in "config/packages/easy_admin.yaml" like this:
easy_admin:
design:
form_theme: # Both themes are needed for ckeditor integration
- "#EasyAdmin/form/bootstrap_4.html.twig"
- "#FOSCKEditor/Form/ckeditor_widget.html.twig"
This solved the problem for me. I think the docs need to be updated. The place they suggest to put the form template presently (twig:form_themes) does not work.
today i want to add a new plugin in our CKEDITOR of our PIM System.
Therefore i load the "Link" Plugin from CKEEditor.
First step - i include the plugin to my CKE-Installation under the following path:
ckeditor\js\ckeditor\plugins\link
After that i try to change my "ckeeditor.Config.js"
It looks like the following config:
var CKEDITOR_CONFIGS = (function() {
var module = {};
var configs = {
'default': {
toolbar: [
[ 'Cut','Copy','Paste','PasteText','PasteFromWord','Undo','Redo'],
['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
['Bold','Italic','Underline','Strike','Subscript','Superscript',
'Source','Save','NewPage','DocProps','Preview', 'Print','-','Templates',
'SpellChecker', 'Find','Replace','-','SelectAll','-','Scayt'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField'],
['RemoveFormat','-','BidiLtr','BidiRtl'],
['PageBreak','Iframe','Styles','Format','Font','FontSize', 'TextColor','BGColor',
'Maximize', 'ShowBlocks','-','About']
]
}
};
module.getConfiguration = function(args) {
return configs['default'];
};
return module;
}());
By reading some posts i found out that i have to add the following code to the config data
config.extraPlugins = 'link';
Can someone tell my wherer i have to add the "config.extraPlugins ='link';
I have already tried out many places in the code, but without any success.
Have someone the same problems? Have i overlooked something?
Thanks in advance
Tim
Directly in your config.js configuration can be. Modify this code:
CKEDITOR.editorConfig = function (config)
You less a parameter, plus this parameter and then configure:
Config.extraPlugins = 'link'
I also have a custom plug-in, is this done.
am a newbie in ckeditor, unable to add an external plugin. Have been trying since 2 3 hours. I followed this link http://ckeditor.com/forums/CKEditor-3.x/Tutorial-create-external-plugin-for-CKEDITOR. Followed the steps correctly, but it didn't help. Please helps guys. Thanks!
In this case you should follow docs.ckeditor.com in a first place, read following article:
http://docs.ckeditor.com/#!/guide/plugin_sdk_intro
and you will know how to create your own plugins :)
/* Provide url/path to ckeditor assets */
var ckeditor_assets = 'https://github.com/mtvbrianking/CKEditorTutorial/demo1/assets/ckeditor/';
CKEDITOR.plugins.addExternal('pbckcode', ckeditor_assets + 'plugins/pbckcode/', 'plugin.js');
CKEDITOR.replace('textArea_name', {
skin: 'moonocolor,' + ckeditor_assets + 'skins/moonocolor/',
extraPlugins: 'pbckcode',
toolbar: [
['clipboard', 'undo', '-', 'Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'],
['TextColor', 'Bold', 'Italic'],
['Format', 'Font', 'FontSize'],
['pbckcode']
]
});
<script src="http://cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
<textarea id="textArea_id" name="textArea_name"></textarea>
Source: http://brianmatovu.com/ckeditor-setup-configuration/
I have written my own custom plugin for inserting images in CKEDITOR. I disable the image button in toolbar . I use the editor.insertHtml() function to insert the image from my custom plugin . When I remove the standard image button from the toolset it disables insertion of image tag in the CKEDITOR box . All other html tags are accepted but for the <img/> tag .
This is my config(without the 'Image' in config.toolbar) :
CKEDITOR.editorConfig = function( config )
{
CKEDITOR.plugins.addExternal('insert_blank','http://localhost:3000/assets/ckeditor/plugins/insert_blank/', 'plugin.js');
CKEDITOR.plugins.addExternal('qimage','http://localhost:3000/assets/ckeditor/plugins/qimage/', 'plugin.js');
config.extraPlugins = 'insert_blank,qimage' ;
config.toolbar =
[
{ name: 'basicstyles', items : [ 'Bold','-','Italic' ] },
{ name: 'insert', items : [ 'insert_blank.btn','-','qimage.btn'
] },
];
config.keystrokes = [
[ CKEDITOR.CTRL + 75, 'InsertBlank' ],
[ CKEDITOR.CTRL + 85, 'qimage' ],
];
config.height = 300 ;
config.width = 350 ;
config.removePlugins = 'elementspath,resize' ;
};
Is there a way to enable image tag insert ?
UPDATE : Worked by adding the following command to the config file :
config.allowedContent = 'b i img[!src,alt,width,height]' ;
Have you read how to integrate plugin with Allowed Filter Content? You need to define that your plugin adds button/command which allow img tag and its attributes. You can also define which tag and its attributes are definitely required for this button/command to be enabled, what will activate/deactivate it when someone will set config.allowedContent.
What you need is just to enable the img[src] attribute.
So you should use config.extraAllowedContent = 'img[src,alt,width,height]';
the config.allowedContent will override all the others DOMs.