I have multiple instances of a CKEDITOR inline on a page.
I want to be able to customise the toolbar for each of these to display different fonts in each of them.
So I have something like the following:
CKEDITOR.disableAutoInline = true;
var editor1 = CKEDITOR.inline(document.getElementById('editable_476'));
CKEDITOR.config.toolbar = [ .....
];
CKEDITOR.config.font_names = 'Helvetica Nueue/Helvetica Nueue';
This works well if I have one, but If I use the same code for another CKEDITOR instance, the font is overwritten.
How do I use different toolbars for different CKEDITOR instances?
Thanks
UPDATE:
CKEDITOR.inline( editable_498, {
toolbar: [
['Bold','Italic','Underline'],
['NumberedList','BulletedList'],
['JustifyLeft','JustifyCenter','JustifyRight'],
['Undo','Redo'],
'/',
['TextColor','Font','FontSize']
],
font_names: 'Helvetica Nueue/Helvetica Nueue';
});
This throws a syntax error:
Uncaught SyntaxError: Unexpected token ;
The line is font_names: 'Helvetica Nueue/Helvetica Nueue';
Use per-instance config:
CKEDITOR.inline( element, {
toolbar: [
...
],
font_names: '...'
});
CKEDITOR.config is something that all instances inherit from. Use config for a specific instance, it'll overwrite global rules from CKEDITOR.config.
See the official configuration guide.
Related
I have been using mentions in CKEditor 5 to tag certain system variables. A typical tag looks like as:
<span contenteditable="false" class="mention document_variable" style="color:var(--ck-color-mention-text);" data-mention="#ApprovedCosts" data-documentid="185" data-version="-1" data-container="#Variable-tab-textarea" href="javascript:void(0)">
#ApprovedCosts
</span>
When I try to render the following (the idea is to show the variable value when the user clicks preview, while he continues editing):
<span contenteditable="false" class="mention document_variable" style="color:var(--ck-color-mention-text);" data-mention="#ApprovedCosts" data-documentid="185" data-version="-1" data-container="#Variable-tab-textarea" href="javascript:void(0)">
<p>Nice rendered <b>html</b></p>
</span>
CKEditor goes bonkers.
My requirement is to show a nicely formatted variable name inside the tag. I know I can control via CSS, but there could be a situation where I might end-up rendering a small table (if variable points to a data set), etc.
Help will be appreciated.
Cheers.
Generally speaking, CKEditor 5 documentations refrain from going with your basic plain HTML approach, as seen in the comments:
This plugin customizes the way mentions are handled in the editor model and data.
Instead of a classic <span class="mention"></span>,
Within their mentions documentation (by the way, highly suggested to take a look at - it's very well documented with lots of useful examples in case you're stuck!), they're defining a ClassicEditor (to be precise, they want to mimic a chat platform in which you can tag a user and will receive a list of users in return).
ClassicEditor
.create( document.querySelector( '.chat__editor' ), {
extraPlugins: [ Essentials, Paragraph, Mention, MentionLinks, Bold, Italic, Underline, Strikethrough, Link ],
toolbar: {
items: [
'bold', 'italic', 'underline', 'strikethrough', '|', 'link', '|', 'undo', 'redo'
]
},
mention: {
feeds: [
{
marker: '#',
feed: [
{ id: '#cflores', avatar: 'm_1', name: 'Charles Flores' },
[...]
],
itemRenderer: customItemRenderer
[...]
After the mention object is created, they're calling the customItemRenderer function. This infrastructure could nearly identical be copied. For your part the function MentionLinks is important, as you can customize how mentions are handled, i.e. let's take a look at their example:
function MentionLinks( editor ) {
editor.conversion.for( 'upcast' ).elementToAttribute( {
view: {
name: 'a',
key: 'data-mention',
classes: 'mention',
attributes: {
href: true
}
},
model: {
key: 'mention',
value: viewItem => editor.plugins.get( 'Mention' ).toMentionAttribute( viewItem )
},
converterPriority: 'high'
} );
Basically, you can customize all the properties within the MentionLinks function. CKEditor 5 did a good job documenting the mention plugin very hierarchically:
The documentation can be found here.
On a slight off-topic note I noticed your code passage <p>Nice rendered <b>html</b><p> contains little formality issues, i.e. you need to close the <p> tag by assigning a close tag </p>:
<p>Nice rendered <b>html</b></p>
Though I'm pretty sure that's not the error as you're talking about HTML in general and not only this code passage.
I think your main issue is your tags. Your paragraph tags (<p>) don't have a closing tag, only two opening tags. It should be <p>***your text here***</p>. If this doesn't fix the issue, please leave a comment.
How can prevent block elements in ckeditor?
I want to don't let to ckeditor to accept block elements.
With prevent enter key i can do this but if i paste some text that's include enter key or several paragraph in ckeditor everything down.
In other word i want a textbox with ckeditor.
Quoting an official weekly blog post:
CKEditor core developer, Olek Nowodziński, was hacking the editor a bit in his spare time and here is the result...
Editable header that does not break with Enter key or pasted multi–line content: https://jsfiddle.net/540ckczt/
var editor = CKEDITOR.inline( 'editor', {
plugins: 'clipboard,floatingspace,toolbar,undo,basicstyles,link',
toolbar: [ [ 'Undo', 'Redo' ], [ 'Bold', 'Italic' ], [ 'Link', 'Unlink' ] ],
// Enter mode ill be set to BR automatically if editor was enabled on some element
// which cannot contain blocks (like <h1 for instance).
// If you want to enable editor on different elements, set BR mode here.
// Read the note below to learn why.
enterMode: CKEDITOR.ENTER_BR,
on: {
instanceReady: function() {
// Remove all "br"s from the data being inputted into the editor.
editor.dataProcessor.dataFilter.addRules( {
elements: {
br: function() {
return false;
}
}
} );
this.editable().on( 'keydown', function( evt ) {
var keystroke = evt.data.getKeystroke();
if ( keystroke == CKEDITOR.SHIFT + 13 || keystroke == 13 ) {
evt.data.preventDefault();
}
} );
}
}
} );
Note that the crucial part of this code is that the ACF filters out the rest of block tags (other than <br>). In the case above the ACF works in an automatic mode where it's configured by the enabled features. And since there's no Format dropdown or any other feature creating blocks, none of them is allowed. Read more in the Advanced Content Filter guide.
I expect that one could ask now: "Why can't we configure ACF to filter out <br>s too?"
The answer is that ACF must be able to normalise blocks which are not allowed to some content, and as CKEditor does not support "no enter" mode officially, it choses between normalising to <p>, <div> or <br>. The decision is made based on the enter mode, so that's why it's important to configure such editor to enter mode BR.
I want to have separate config for ckditor.
For example in page temp1.html i want to have 'links' and in page temp2.html i don't want to have links.
Whats the good config for this?
I think configuration in below code is proper place for do this.
//var editor_data = CKEDITOR.instances.editor1.getData();
$('textarea#editor').ckeditor(
function () {
/* callback code */
},
//configuration
{
toolbar: 'Basic',
language: 'en',
});
You can use config.removePlugins to control the presence of certain plugins, like link (also config.removeButtons). But please note that since CKEditor 4.1, by doing this you restrict the content of the editor associated with the plugin or button (no link plugin or button = no links in the content).
So if you want to share the same content between different templates which use a different sets of plugins you need to explicitly expand config.extraAllowedContent of some editors:
$('#editor-linkless').ckeditor( function() {}, {
removePlugins: 'link',
extraAllowedContent: 'a[href,name,id,target]'
} );
$('#editor-regular').ckeditor();
JSFiddle.
See the official guide about ACF. Also this answer to know more.
I Want to use Underline in custom toolbar inline but it doesn't work while bold , link and Italic work as well.
var cfg1 = {
toolbar: [
['Source', '-', 'Bold','Italic', 'Underline']
]
};
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('inputGozine1',cfg1);
How can i use Underline in inline toolbar?
Did you check what you have in the config.js file? In standard and basic presets there is:
config.removeButtons = 'Underline,Subscript,Superscript';
And this setting has higher priority than config.toolbar, so make sure to remove this line.
I have a standard installation (like samples):
<meta charset="utf-8"></meta>
<script src="../ckeditor.js"></script>
With HTML content with many <div contenteditable="true"> blocks. I need to configure each editor by local or an external configTypeX.js file,
<script>
CKEDITOR.on( 'instanceCreated', function( event ) {
var editor = event.editor, element = editor.element;
if ( element.is( 'h1', 'h2', 'h3' ) ) {
editor.on( 'configLoaded', function() {
editor.config.toolbar = [
[ 'Source', '-', 'Bold', 'Italic' ]
]; // BUG: about "Source"?? NOT AT INTERFACE!
});
} else {
// WHERE PUT THIS ITEM?
customConfig: 'configType2.js';
}
});
</script>
So, my problem is
How to do a customConfig in this context?
Where the "best complete documentation", about config menus (editor.config.toolbar) without online configuration-tool, where I can understand how to put and remove menu itens with correct names? Here nothing about how to fix the bug of 'Source' in a full installation.
I do,
git clone git://github.com/ckeditor/ckeditor-releases.git
cd ckeditor-releases
cp samples/inlineall.html samples/myinline.html
and edit samples/myinline.html with the code above.
For inline editors the standard Source button is hidden, because it is not possible to have different modes other than wysiwyg. Therefore for those editors new plugin was created - sourcedialog, but it is not included in any of builds by default. You can build editor with this plugin using online CKBuilder or by using one of presets with all parameter. For example: ./build.sh full all. Remember also to load sourcedialog plugin (using config.extraPlugins = 'sourcedialog').
If you want to freely configure inline editors, then you should take a look at inlinebycode sample. First you need to disable automatic editors initialization on editable elements and then call CKEDITOR.inline() on elements you want to become editors:
// We need to turn off the automatic editor creation first.
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editable1', {
customConfig: 'editableConfig.js'
} );
CKEDITOR.inline( 'editable1', {
toolbar: [ ... ]
} );