Closed accorinti closed 3 years ago
Thank you very much, this is exactly what I was looking for. But how do I insert it in my Editor? I have a custom build with only one file, ckeditor.js - there is no app.js and src folder.
This is my code:
DecoupledDocumentEditor.create( document.querySelector( '#editor' ), {
toolbar:['undo', 'redo', '|', 'fontFamily', 'fontSize','fontColor', 'fontBackgroundColor', '|',
'bold', 'italic', 'underline', 'strikethrough', 'removeFormat', '|', 'alignment', 'selectAll', '|',
'link', '|', 'insertTable', '|', 'numberedList', 'bulletedList' ]
})
.then( editor => {
const toolbarContainer = document.querySelector( '#toolbar-container' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
})
.catch( error => {
console.error( error );
});
Thanks for helping.
But how do I insert it in my Editor? I have a custom build with only one file, ckeditor.js - there is no app.js and src folder.
If you use a build, you should add the plugin to it and rebuild the editor. See our guide about adding plugins to the build to learn more.
I have been reading those pages for hours but they are waaay too complicated. I don't even know what npn means or how to download this plugin. I am not a programmer, I just would like to add the editor to my website. So I built a custom editor with the plugins I need, downloaded it, added the few lines of code to create it, and it works.
Would someone just be so nice and just tell me please step by step where I have to paste the code and what I have to change in my editor.create statement to make this plugin work?
Thank you <3
I believe you use CKEditor 5 online builder, so simple steps for adding a custom plugin to the downloaded build will be:
src/ckeditor.js
).import Plugin
(ignore the editor-related imports above and ClassicEditor.create()
part below).ckeditor.js
file, below all imports.Placeholder
class to the Editor.builtinPlugins
array.npm install
.npm run build
in the main project directory from your terminal.Editor#create()
method:ClassicEditor
.create( document.querySelector( '#editor' ), {
// ...
toolbar: [ 'placeholder' ],
placeholderConfig: {
types: [ 'date', 'color', 'first name', 'surname' ]
}
} )
.then( editor => {
console.log( 'Editor was initialized', editor );
// Expose for playing in the console.
window.editor = editor;
} )
.catch( error => {
console.error( error.stack );
} );
THANK YOU!!!! I had to first install node.js and npm, then run "npm install" before "npm run build", but now it works!
I hope this can help others. It would be great to have this plugin added to the list to choose from while building a custom build.
Thanks again and stay healthy! :-)
Hello, I just read this article and find it's really useful for me to follow up!!
Since our project may have a lot of placeholders, so I am just curious that if I could have groups of 'types', so that I can set sub-menu-placeholders. If so, please let me know how do I set.
Thanks.
In CKeditor4 there is this beautiful Plugin that lets me choose fields via a combo box (select box) dropdown located in the toolbar and insert it into the editor.
See it in action here: https://isg-uni-mainz.de/ckeditor/index.php
It is of great help. I wanted to ask the same solution for CKeditor 5. Thank you.