ClassicEditor.create( document.querySelector( '.editor' ), {
// extraPlugins: [ AnnotationsUIs ],
// plugins: [ Mention,],
removePlugins:['Title'],
toolbar: {
items: [
"alignment:left", "alignment:right", "alignment:center", "alignment:justify", "alignment", "undo", "redo", "blockQuote", "bold", "link", "ckfinder", "selectAll", "heading", "horizontalLine", "htmlEmbed", "indent", "outdent", "italic", "numberedList", "bulletedList", "mediaEmbed", "pageBreak", "specialCharacters", "restrictedEditingException", "strikethrough", "subscript", "superscript", "insertTable", "tableColumn", "tableRow", "mergeTableCells", "tableCellProperties", "tableProperties", "textPartLanguage", "todoList", "underline"
],
shouldNotGroupWhenFull: true,
},
mention: {
feeds: [
{
marker: '#',
feed: [ '#test' ],
// itemRenderer: customItemRenderer
},
],
},
language: 'en',
} )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( error );
} );
});
Which toolbar or plugin is missing?
I have added almost plugging and toolbar items.
CKEditor 5 doesn't have any documentation about the text/visual button. I want to add a toggle button which show me HTML view and text in editor.
It looks like this feature was added in May 2021, a couple of weeks after your question!
There is a SourceEditing feature which adds a 'Source' toggle button - https://ckeditor.com/docs/ckeditor5/latest/features/source-editing.html (scroll down for a demo and how to install it).
But it is considered experimental currently, has some limitations of which editors it works with, and note that some HTML will be ignored (e.g. for HTML features you don't have a plugin loaded for).
Related
I'd like to know how do I make my <img> which I append using editor.data.set() to be in a specific size and alignment? Can I define a global size for such appended images? I want it also to work with a normal image adding feature.
I cannot set the default style options for images - side / alignRight / alignBlockRight in my case (I don't know what's the difference between them, but nevermind).
Even if a specific alignment option is active / highlighted, the image is not aligned to the right.
image: {
styles: {
options: [
'alignLeft', 'alignRight',
'alignCenter', 'alignBlockLeft', 'alignBlockRight',
'block',
{
name: 'inline',
isDefault: false,
},
{
name: 'side',
isDefault: true,
},
],
},
I tried many ways but nothing works.
My full config:
ClassicEditor
.create(editorElement, {
plugins: [
Autoformat,
Base64UploadAdapter,
BlockQuote,
Bold,
Essentials,
Heading,
Image,
ImageBlockEditing,
ImageCaption,
ImageInlineEditing,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
SourceEditing,
Table,
TableToolbar,
TextTransformation,
Underline,
WordCount,
GeneralHtmlSupport,
],
toolbar: [
'heading',
'|',
'bold',
'italic',
'underline',
'link',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'imageUpload',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo',
'sourceEditing',
],
// #ts-expect-error
htmlSupport: {
allow: [
{
name: 'img',
classes: true,
attributes: true,
}
],
},
language: 'en',
image: {
styles: {
styles: {
options: [
{
name: 'alignRight',
isDefault: true,
},
],
},
toolbar: [
'imageTextAlternative',
'imageStyle:alignRight',
],
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
}
})
.then(ckeditor => {
editor = ckeditor;
// editor.execute('imageStyle', { value: 'alignRight' });
})
.catch(error => {
console.error(error);
});
How to use CKeditor mentions feed element in Ckeditor comments.
Check out the below sample to check how to add the Mention plugin to the comment editor:
const extraCommentsPlugins = ClassicEditor.builtinPlugins.filter(
plugin => [ 'Bold', 'Italic', 'Mention' ].includes( plugin.pluginName );
);
ClassicEditor
.create( document.querySelector( '#editor' ), {
toolbar: {
items: [ 'bold', 'italic', '|', 'comment' ]
},
sidebar: {
container: document.querySelector( '#sidebar' )
},
comments: {
editorConfig: {
extraPlugins: extraCommentsPlugins,
mention: {
feeds: [
{
marker: '#',
feed: [
'#NICK', '#NOHEA',
'#REATHEON', '#FIRE FOX', '#NORMSA'
],
}
]
}
}
}
} )
.catch( error => console.error( error ) );
I'm trying to set up some custom fonts in tailwinds config file. It seems to work however it adds the custom fonts and the original tailwind font styles in my css and the order of them makes it default to tailwinds css (see the screenshot of the inspector of the css)
bellow is my config file code. some things to note I'm using Apostrophe CMS and scss.
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
fontFamily: {
sans: [ 'Graphik', 'sans-serif' ],
serif: [ 'Merriweather', 'serif' ]
}
},
variants: {
extend: {}
},
plugins: []
};
Try putting your fontFamily inside extend, like this:
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
sans: [ 'Graphik', 'sans-serif' ],
serif: [ 'Merriweather', 'serif' ],
},
},
},
variants: {
extend: {}
},
plugins: []
};
I added the files provided in the zip download for the Simple Plugin (Part 1) example to a web site with a working CKEDITOR setup. I made no changes to any of the files. A plugin called abbr is supposed to be defined by this code. After reloading the page containing CKEDITOR, I did not see the icon for the plugin appear after I added the plugin to extraPlugins. I then added a reference to the plugin in the insert toolbar but that also did not work.
I can get the plugin dialog to appear by binding to a keystroke, so at least that much works:
config.keystrokes = [
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 32 /*space*/, 'abbr' ]
];
Here is my ckeditor.js, after removing the Play Framework view markup (hopefully I did not miss any):
<script>
function createEditor() {
var editor = CKEDITOR.instances.BLAH;
if (editor) {
try { editor.destroy(true) ; } catch ( e ) { }
}
editor = CKEDITOR.replace("BLAH", {
height: $(window).height() / 2 - 30,
"extraPlugins": "imagebrowser,abbr,codemirror",
on: {
instanceReady: function(evt) {
var maximized = $.cookie("maximized");
var me = maximized=="true";
if (me)
editor.execCommand('maximize');
},
save: function(evt) {
var scaytEnabled = CKEDITOR.plugins.scayt.state[evt.editor.name];
$.cookie("scayt_enabled", scaytEnabled.toString(), { path: '/' });
var maximized = evt.editor.commands.maximize.state==1;
$.cookie("maximized", maximized.toString(), { path: '/' });
}
}
});
}
</script>
Here is the JavaScript that launches CKEDITOR. abbr is the last plugin mentioned in insert toolbar:
CKEDITOR.editorConfig = function(config) {
config.allowedContent = true;
config.tabSpaces = 2;
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
config.toolbarCanCollapse = true;
config.toolbar = [
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] },
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps',/*'Preview',*/'Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
//{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ name: 'insert', items : [ 'Image',/*'Flash',*/'Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe', 'abbr' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
'/',
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'/*,'-','BidiLtr','BidiRtl'*/ ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker','Scayt' ] }
];
};
I noticed that the instructions had a difference from the code; this code was shown in the instructions:
editor.ui.addButton( 'Abbr', {
label: 'Insert Abbreviation',
command: 'abbrDialog',
toolbar: 'insert'
});
But the code in the download has a different value for command: abbr. Neither value worked. I tried adding abbrDialog to the insert section of config.toolbar but that did not work either. Perhaps there is still another problem.
There's a small bug in this tutorial - in the code you can download the command is named abbr when in the code samples it is abbrDialog.
But name of the button is all the time the same - Abbr (it's case sensitive!). So basically, your config.toolbar setting is incorrect, because you used lower cased name.
Feel like I should have been able to track this one down already. I need to create a custom plugin for CKEditor (I'm using 4.3.1). To get started I used the guide found here (http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1). I downloaded the code and put it in my ckeditor\plugins folder. So, now I have ckeditor\plugins\abbr. I'm not sure what I'm doing, but the button is not showing in the toolbar. The code is below. My questions are, where should I define the "abbr" extra plugin? Do I do it in my _Edit.cshtml page where I'm defining stylesheetparser? Or put it in config.js? Given the setup below shouldn't the button show up next to the source button? Do I need to include it in config.js or does the plugin code take care of that?
Been doing a little playing around and it does show up if I use the full toolbar, but not when I customize it.
config.js
CKEDITOR.editorConfig = function (config) {
config.toolbar = 'MyToolbar';
config.forcePasteAsPlainText = true;
//config.extraPlugins = 'abbr';
config.ignoreEmptyParagraph = 'true'
config.toolbar_MyToolbar =
[
{ name: 'document', items: ['Preview', 'Print'] },
{ name: 'clipboard', items: ['Cut', 'Copy', 'PasteText', '-', 'Undo', 'Redo'] },
{ name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Subscript','Superscript','-','RemoveFormat' ] },
'/',
{ name: 'insert', items: ['Table', 'SpecialChar'] },
{ name: 'styles', items : [ 'Styles'] }
, { name: 'source', items: ['Source', '-', 'abbr'] }
];
};
_Edit.cshtml
#Html.TextAreaFor(e => e.Narrative, 10, 10, null)
<script type="text/javascript">
CKEDITOR.replace('Narrative', {
extraPlugins: 'stylesheetparser,abbr',
// Stylesheet for the contents.
contentsCss: '#Href("~/content/"+#Model.CssFile)',
stylesheetParser_skipSelectors: '',
disableNativeSpellChecker: false,
// Do not load the default Styles configuration.
stylesSet: [],
height: '600px',
width: '100%'
});
</script>
plugin.js
CKEDITOR.plugins.add( 'abbr', {
// Register the icons.
icons: 'abbr',
// The plugin initialization logic goes inside this method.
init: function( editor ) {
// Define an editor command that opens our dialog.
editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
// Create a toolbar button that executes the above command.
editor.ui.addButton( 'Abbr', {
// The text part of the button (if available) and tooptip.
label: 'Insert Abbreviation',
// The command to execute on click.
command: 'abbr',
// The button placement in the toolbar (toolbar group name).
toolbar: 'source'
});
// Register our dialog file. this.path is the plugin folder path.
CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' );
}
});