I have a few buttons outside of the Ckeditor on my page, and I want to click on them and add content to the Ckeditor5.
By clicking on the buttons, I make an ajax call to retrieve the content from the server, but I'm having trouble inserting it. This is my code right now:
success: function (data) {
ClassicEditor
.create( document.querySelector( '.ckeditor' ), {
language: 'he',
} )
.then( editor => {
editor.model.change( writer => {
const insertPosition = editor.model.document.selection.getFirstPosition();
writer.insertText(data, insertPosition );
} );
} )
.catch( error => {
console.error( error );
} );
}
But this code duplicates my editor, and I don't know how to get the "editor" object without using ".create". can anyone help me with this?
In CKeditor4, I have tried to show a notification when the dialog is opened at first time but the notification is displayed behind the dialog box. Is-there a way to show the notification at foreground ?
This is my code in the dialog part :
CKEDITOR.dialog.add( 'MypluginDialog', function( editor ) {
return {
title: 'my plugin title,
minWidth: 400,
minHeight: 200,
contents:
[
{
id: 'tab-basic',
label: 'Dialog settings',
elements:
[
{
type: 'text',
id: 'title',
label: 'My title',
default: ''
}
]
}
],
onOk: function() {
},
onShow: function() {
var notification1 = new CKEDITOR.plugins.notification( editor, {
message: 'Error occurred',
type: 'warning'
} );
notification1.show();
}
};
});
So how to display the notification not behind the dialog box ?
Thanks by advance
Notifications can be displayed in front of any dialog after adjusting their z-index CSS property, for example (!important needed since it has inline z-index style already):
.cke_notifications_area {
z-index: 10050 !important;
}
Keep in mind that dialogs and notifications z-index value depends on CKEditor 4 baseFloatZIndex configuration option (which is 10000 by default) so if this configuration option was changed you need to adjust CSS accordingly.
Please also keep in mind that Notification plugin is not really intended to be displayed over dialogs since it works in a way that it's positioned related to editor editable area (and dialog is not) and may display on the bottom part of a dialog or some more unexpected places (depending on editor position).
See this codepen demo.
I need to add a custom button to CKEditor 4.6.2 instance without plugin.
I've tried solution suggested at similar question How to add a custom button to the toolbar that calls a JavaScript function?
The difference is that I don't want to replace existing instance, but instead modify it after it's initialised. Like here: http://jsfiddle.net/paragonid/8r4gk45n/1/
CKEDITOR.replace('container', {
on: {
instanceReady: function( evt ) {
console.log('instanceReady', evt)
evt.editor.addCommand("mySimpleCommand", {
exec: function(edt) {
alert(edt.getData());
}
});
evt.editor.ui.addButton('SuperButton', {
label: "Click me",
command: 'mySimpleCommand',
toolbar: 'insert',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
}
}
});
But button doesn't appear in this case.
I also faced the same issue, this is how I resolved mine-
var editor = CKEDITOR.replace(ck, {
toolbar: [['Source','-','Preview','Print'],['UIColor','Maximize','ShowBlocks'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','RemoveFormat','-','Link','Unlink','Anchor'],
['Bold','Italic','Underline','Strike','Subscript','Superscript','RemoveFormat'],['Link','Unlink','Anchor'], '/',
['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl'],
['Styles','Format','Font','FontSize'],['TextColor','BGColor'],'/',
{name: 'insert', items:['InsertCustomImage','Flash','Table','Iframe','HorizontalRule','Smiley','SpecialChar','PageBreak']}]
});
editor.addCommand("insertImgCmd", {
exec: function(edt) {
helper.showdlg(component);
}
});
editor.ui.addButton('InsertCustomImage', {
label: "Insert Image",
command: 'insertImgCmd',
toolbar: 'insert',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
While setting the toolbar, I inserted a custom command name "InsertCustomImage".
Now while creating new button below, set the same name as "InsertCustomImage" in addButton function.
On reload of the CKEditor with an inline Widget, when clicking into the editor on the same line as the widget, the cursor is positioned at the end of the line.
The issue occurs when an inline widget is placed on a line without any other content. I've tried changing the structure of the html, adding styles, and adding an extra space in the parent span. Nothing has worked so far.
You can see this issue here: https://ckeditorexample.herokuapp.com
Widget SDK http://docs.ckeditor.com/#!/guide/widget_sdk_intro
Source code for the widget:
CKEDITOR.plugins.add('mywidget', {
requires: 'widget',
icons: 'mywidget',
init: function (editor) {
editor.widgets.add('mywidget', {
button: 'Create a simple box',
// draggable:true,
inline: true,
template: '<span class="mywidget">' +
'<span class="mywidget-content" >....</span>' +
'</span>',
allowedContent: {
'span': {
// propertiesOnly: true,
classes: '*'
}
},
requiredContent: 'span(mywidget)',
init: function () {
},
upcast: function (element) {
return element.name == 'span' && element.hasClass('mywidget');
},
data: function () {
if (this.data.name) {
$(this.element.$).find('.mywidget-content').html(this.data.name);
}
}
})
}
})
It appears as if the cursor is being sent to the end of the containing <p>...</p>.
In my particular case (via a different effort), I ended up needing to change the default enterMode. To allow for single-spaced text in my forms I changed the default ENTER_P value to ENTER_BR:
enterMode: CKEDITOR.ENTER_BR
After I did this, the issue went away, as there was no longer a paragraph to move the cursor to the end of. I'll take it... ;-)
first of all, thank you for your support.
I've tried to create my first plugin for CKEditor.
I used the official Tutorial: http://docs.ckeditor.com/#!/guide/plugin_sdk_sample
The Button appears in the Toolbar. But if I click on this, nothing happens.
Here is my Code of plugin.js
CKEDITOR.plugins.add( 'drmail', {
icons: 'drmail',
init: function( editor ) {
editor.addCommand( 'drmailCommand', {
exec: function( editor ) {
var now = new Date();
editor.insertHtml( 'The current date and time is: <em>' + now.toString() + '</em>' );
}
});
editor.ui.addButton( 'DRmail', {
label: "E-Mail Adresse hinzufügen",
command: 'drmailCommand',
toolbar: 'insert'
});
}
});
thanks for your Help.
I found it. (The Hint to the JS-Debugger was very good)
I had an old not functional version of the Script in Cache.
Dean