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/
Related
I'm using FOS CKEditor in a Symfony 4 project.
In my fos_ck_editor.yml config file, i configured an editor like this :
fos_ck_editor:
input_sync: true
default_config: newsletter_content
configs:
newsletter_content:
title: false
language: fr
toolbar:
- [ 'Bold', 'Italic', 'Underline', 'Link', 'Unlink', 'TextColor' ]
colorButton:
colors: '#DE1F35'
I want to use the configuration variable config.colorButton_colors as described in ck editor documentation but i don't know how to do that in the yaml config file.
Add the following line under "config:"
colorButton_colors: "F49800,B9B9B9,75A75A"
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.
I am experimenting with CKEditor 5 InlineEditor. I would like to modify the toolbar to add additional options. For example the following script:
<script type="text/javascript">
InlineEditor
.create( document.querySelector( '#personal-life', {
toolbar: [ 'headings', 'bold', 'italic', 'underline', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
} ) )
.catch( error => {
console.error( error );
} );
</script>
It still shows the default toolbar and not the one specified. The examples in the documentation show the ClassicEditor. Is it possible using the InlineEditor? If so, what am I doing wrong?
Edit: As written, there is a typo. The toolbar object should be the second argument to .create not the second argument to .querySelector. As written the editor works fine. except for the toolbar problem. When the typo is fixed it doesnt work at all.
I've created a js fiddle and it looks like everything is fine: https://jsfiddle.net/9vthmvLc/.
<div id="editor">
Lorem ipsum
</div>
InlineEditor.create(
document.getElementById( 'editor' ),
{
toolbar: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
}
);
The fiddle uses CKEditor 5 downloaded from CDN. I've also tested it locally with a zip download.
Keep in mind that underline is not included in default builds, so I removed it from your toolbar configuration. Maybe that's why you were confused. Here and here is some explanation on not including underline in default builds. If you really need it for some reason, consider creating your own build.
You can see all the options which are available for customizing the toolbar of your specific build by hitting F12 to open developer tools in your browser (while navigating in a webpage which has the toolbar you want to customize), then clicking console and running the following code:
Array.from( editor.ui.componentFactory.names() );
You will get a result similar to this one:
Array.from( editor.ui.componentFactory.names() );
(21) […]
0: "undo"
1: "redo"
2: "bold"
3: "italic"
4: "blockQuote"
5: "ckfinder"
6: "imageTextAlternative"
7: "imageUpload"
8: "heading"
9: "imageStyle:full"
10: "imageStyle:side"
11: "indent"
12: "outdent"
13: "link"
14: "numberedList"
15: "bulletedList"
16: "mediaEmbed"
17: "insertTable"
18: "tableColumn"
19: "tableRow"
20: "mergeTableCells"
length: 21
You can then use each of these options in the toolbar array:
toolbar: [ 'undo', 'redo', ...],
It works for any kind of toolbar, either inline, classic or else.
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');