As described in the documentation of Summernote, I integrated them using class.
On my page I control them via Javascript:
$(document).ready(function () {
$('.summernote').summernote({
height: 230,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['para', ['ul', 'ol', 'paragraph']]
],
placeholder: 'Leseprobe eingeben. Maximal 50.000 Zeichen.',
callbacks: {
onKeydown: function (e) {
var t = e.currentTarget.innerText;
...
How can I control it separate for the second summernote? It has to have a different toolbar and callback-functions.
Via id summernote does not work.
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);
});
I'm using React Quill on my function-based component, but I'm having problems when I load content to it, I mean the onChange is called for several times in a row (100 times +) for no reason, this only happens when I pass value to it and load the value from data I parse and add to the editor.
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import './Editor.local.css';
const Editor = ({ method, ...props }: any): any => {
return (
<pre style={{ width: '100%' }}>
<label className="llabel">{props.label}</label>
<ReactQuill
value={props.value}
onChange={(value: any) => method(value, props.index)}
modules={Editor.modules}
formats={Editor.formats}
bounds={'#root'}
placeholder={props.placeholder}
/>
</pre>
);
};
Editor.modules = {
toolbar: [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline'],
[{ list: 'ordered' }, { list: 'bullet' }],
['link'],
['clean']
],
clipboard: {
matchVisual: false,
},
};
Editor.formats = [
'bold',
'italic',
'underline',
'blockquote',
'list',
'bullet',
'link',
'image',
'header',
'strike',
'size',
'color',
'font',
'align',
'clean',
'direction',
'rtl'
];
export default Editor;
As per the load, just simply I add it to the item and show multi by items with description.
I have a KendoEditor as below:
editor.component.html includes:
<textarea>
kendoTextArea
name="editText"
(document:click)="onUserClick()"
(keydown)="onKeyDown()"
(keyup)="onKeyUp()"
#textAreaEditor
value ="{{value}}">
</textarea>
editor.component.ts includes:
kendo
.jQuery(textAreaEditor.nativeElement)
.kendoEditor({
resizable: {
content: true,
toolbar: false,
},
paste: (e: any) => {
console.log("paste");
},
select: (e: Event) => {
console.log('select event fired!');
},
tools: [
'bold',
'italic',
'underline',
'justifyLeft',
'justifyCenter',
'justifyRight',
'justifyFull',
],
change: (args) => {
console.log('value Changed');
},
})
.data('kendoEditor');
const editor = kendo
.jQuery(textAreaEditor.nativeElement)
.data('kendoEditor');
kendo
.jQuery(editor.window).bind('keydown', onKeyDown());
kendo
.jQuery(editor.window).bind('keyup', onKeyUp());
I need to be able to trap the backspace key, but the above code is not working and does not catch the BackSpace key as part of the KeyDown event. Can you please help?
CKEDITOR.plugins.add('Copyall', {
init: function(editor) {
editor.addCommand('copy_all', {
exec : function(editor){
alert('Yay!');
}
});
editor.ui.addButton('Copyall', {
label: 'Copy All',
command: 'copy_all',
toolbar: 'basicstyles',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
}
});
CKEDITOR.config.toolbar = [
{name: 'basicstyles', items : ['Copyall', 'Font', 'FontSize', 'Bold', 'Italic', 'Strike']},
];
I have a simple menu for inline CKEDITOR elements. I merely need a button to do some js work.
https://jsfiddle.net/elb_/as1km50L/
Gine an id to your editable area:
<div id="editor1" contenteditable="true">some text</div>
Then, use your id to add the command and the button without a plugin:
CKEDITOR.instances.editor1.addCommand('copy_all', {
exec : function(editor) {
alert('Yay!');
}
});
CKEDITOR.instances.editor1.ui.addButton('Copyall', {
label: 'Copy All',
command: 'copy_all',
toolbar: 'basicstyles',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
CKEDITOR.config.toolbar = [
{name: 'basicstyles', items : ['Copyall', 'Font', 'FontSize', 'Bold', 'Italic', 'Strike']},
];
See this: https://jsfiddle.net/as1km50L/1/
CKEDITOR.inlineAll();
for (var instanceName in CKEDITOR.instances) {
CKEDITOR.instances[instanceName].addCommand('copy_all', {
exec: function(edt) {
alert('Yay!');
}
});
CKEDITOR.instances[instanceName].ui.addButton('Copyall', {
label: 'Copy All',
command: 'copy_all',
toolbar: 'basicstyles',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
}
CKEDITOR.config.toolbar = [
{name: 'basicstyles', items : ['Copyall', 'Font', 'FontSize', 'Bold', 'Italic', 'Strike']},
];
See that CKEDITOR.inlineAll() method above? Turns out that CKEDITOR instances are not available to customize unless that beauty is there. It's also interesting to note that without the inlineAll(), the CKEDITOR.instances will show as populated, but for some reason cannot be iterated.
Anyway, problem solved.
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' );
}
});