CKEDITOR with custom toolbar and custom styles - javascript

I'm having troubles configuring CKEDITOR to have a custom toolbar with custom styles.
This is the config for the custom styles that i added to config.js
CKEDITOR.stylesSet.add('custom_styles', [
{ name: 'Text Bolder', element: 'p', attributes: { 'class': 'validate' }}
]);
This is the code i use configure the toolbar and the styles and initialize the toolbar
var cfg = {
toolbar: [
[ 'Source', '-', 'Bold', 'Italic',{ name: 'Styles'}]
],
stylesSet: 'custom_styles'
};
/* Inline */
CKEDITOR.inline('derecha',cfg);
The problem it's with the styles and i don't know why they show empty

The problem was with the <p> element. The previous code works if the element it's a <span> . I think it's because the inline editor is a <p> tag
CKEDITOR.stylesSet.add('custom_styles', [
{ name: 'Text Bolder', element: 'span', attributes: { 'class': 'validate' }}
]);
var cfg = {
toolbar: [
[ 'Source', '-', 'Bold', 'Italic',{ name: 'Styles'}]
],
stylesSet: 'custom_styles'
};
/* Inline */
CKEDITOR.inline('derecha',cfg);

Related

Add a non-breaking space button to the toolbar in CKeditor

I'm facing a problem with CKeditor (V4.17.0). I'm using it in a Symfony (V5) project. I installed the WYSIWYG with this doc. Then I downloaded the Non-breaking space plugin, I placed it in the path public/bundles/fosckeditor/plugins and I configured my yaml file:
twig:
form_themes:
- '#FOSCKEditor/Form/ckeditor_widget.html.twig'
fos_ck_editor:
default_config: config
configs:
config:
allowedContent: true
extraPlugins: 'nbsp'
removePlugins: 'elementspath,exportpdf,image,media, about'
toolbar:
- { name: "styles", items: [ 'Bold', 'Italic', 'Strike' ] }
- { name: "plugins", items: ['insertNbsp'] }
- { name: "paragraph", items: ['NumberedList'] }
plugins:
nbsp:
path: 'ckeditor/plugins/nbsp/'
filename: 'plugin.js'
My webpack.config.js :
.copyFiles([
{
from: './assets/images',
to: 'images/[path][name].[ext]',
},
{
from: './node_modules/ckeditor4/',
to: 'ckeditor/[path][name].[ext]',
pattern: /\.(js|css)$/,
includeSubdirectories: false,
},
{
from: './node_modules/ckeditor4/adapters',
to: 'ckeditor/adapters/[path][name].[ext]'
},
{
from: './node_modules/ckeditor4/lang',
to: 'ckeditor/lang/[path][name].[ext]'
},
{
from: './node_modules/ckeditor4/skins',
to: 'ckeditor/skins/[path][name].[ext]'
},
{
from: './node_modules/ckeditor4/vendor',
to: 'ckeditor/vendor/[path][name].[ext]'
},
{
from: './public/bundles/fosckeditor/plugins',
to: 'ckeditor/plugins/[path][name].[ext]'
},
])
The editor appear on the page, in my toolbar I've got everything I asked except the Non-breaking space plugin.
How can I insert into it ?
I don't think this plugin is used that way. You can't, if I'm not mistaken, load that into the toolbar.
Would it be possible for you to use this source code instead of the original plugin.js
CKEDITOR.plugins.add( 'nbsp',
{
init : function( editor )
{
editor.ui.addButton('Insert &nbsp', {
label: 'Insert ',
command: 'insertNbsp',
toolbar: 'insert',
icon: this.path + 'icons/icon.png'
});
// Insert if Ctrl+Space is pressed:
editor.addCommand( 'insertNbsp', {
exec: function( editor ) {
editor.insertHtml( ' ', 'text' );
}
});
editor.setKeystroke( CKEDITOR.CTRL + 32 /* space */, 'insertNbsp' );
}
} );
think about creating an icons folder as well as an icon of your choice to see a button in your toolbar.

How to add browser server to upload images in CKEditor

I'm using CKEditor in my web, I have intergated CKeditor and want to upload my image from pc to server
I refer this link:
http://devture.com/projects/ckeditor-imagebrowser/demo/
this is my code:
<div class="container">
<!-- <h2><label for="editor1">Developer Site Editor</label></h2> -->
<textarea name="ir1" id="ir1" rows="1" cols="10" style="width:580px; height:600px; min-width:400px; min-height:50px; display:none;"> </textarea>
</div>
<script>
CKEDITOR.replace( 'ir1', {
// Define the toolbar: http://docs.ckeditor.com/#!/guide/dev_toolbar
// The standard preset from CDN which we used as a base provides more features than we need.
// Also by default it comes with a 2-line toolbar. Here we put all buttons in a single row.
toolbar: [
{ name: 'document', items: [ 'Source' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'insert', items: [ 'CodeSnippet', 'Image', 'Mathjax', 'EmbedSemantic', 'Table' ] },
{ name: 'tools', items: [ 'Maximize' ] },
{ name: 'styles', items: [ 'Format', 'Styles' ] }
],
...
</script>
When I run and icon image display but it is not include 'browsers server' button
How to add 'Browsers Server' button in CKEditor ? Thank so much !!
Please see this link as well as other links from that section.
Basically you should set at minimum these two settings: filebrowserBrowseUrl and filebrowserUploadUrl advanced file manager like e.g. CKFinder or to some custom code which will handle uploads and file browsing for you.
Please also note that File Browser plugin is required (it is available by default in standard and full packages).

QuillJs - jumps to top

I'm using QuillJs as a text editor on my website. In a long post the screen view jumps to top when pasting text or changing heading type or alignment or color or inserting a link or video. Can't find out why.
QuillJs version: 1.2.6
Browser: Chrome 58.0.3029.110
OS: Windows 10
Initialization:
var toolbarOptions = [
[{ 'header': [1, 2, 3, 4, 5, 6, false] },
'bold', 'italic', 'underline', 'strike', { 'align': [] },
{ 'list': 'ordered' }, { 'list': 'bullet' },
{ 'color': [] }, { 'background': [] }],
['image', 'blockquote', 'code-block', 'link', 'video'],
['clean']
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
This happens when any option is clicked from the quill toolbar. I had similar issue and I was using react-quill 0.4.1.
Try using event.preventDefault and event.stopPropagation on quill toolbar to fix this.
The following fixed the issue for me.
componentDidMount()
{
$('.quill-toolbar').on("mousedown", function(event){
event.preventDefault();
event.stopPropagation();
});
}
If you want an editor to be scrolled and maintained by a web page's main scrollbar, you need to set scrollingContainer property to 'body' during configuration of Quill object.
var quill = new Quill('#editor', {
modules: { toolbar: toolbarOptions },
theme: 'snow',
scrollingContainer: 'body'
});
Setting scrollingContainer to html was the only solution that worked for me:
var quill = new Quill('#editor', {
modules: { toolbar: toolbarOptions },
theme: 'snow',
scrollingContainer: 'html'
});
this is happening because of these two lines:
https://github.com/quilljs/quill/blob/5715499c57091db262c176985f6c5370d73db5dd/modules/toolbar.js#L86
and
https://github.com/quilljs/quill/blob/5b28603337f3a7a2b651f94cffc9754b61eaeec7/core/quill.js#L171
this.scrollingContainer => could be not an actual scrolling element.
The fix could be is to assign the nearest scrolling element directly.
If you are not sure what it is you can use this snippet to find it:
const regex = /(scroll)/;
const style = (node, prop) => window.getComputedStyle(node, null).getPropertyValue(prop);
const scroll = (node) => regex.test( style(node, "overflow") + style(node, "overflow-y") + style(node, "overflow-x"));
export const scrollparent = (node) => {
return !node || node===document.body ? document.body : scroll(node) ? node : scrollparent(node.parentNode);
};
editor.scrollingContainer = scrollparent(editor.container);

ckeditor do not work when i add extraPlugins

i have uploaded codesnippet plugin inside /ckeditor/plugins/ directory.
My config.js file codes are:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'basic', items: [ 'Bold', 'Italic', 'Underline' ] },
{ name: 'font', items: [ 'Font' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'Blockquote' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule' ] },
{ name: 'last', items: [ 'Maximize' ] }
];
config.extraPlugins = 'codesnippet';
config.format_tags = 'p;h1;h2;h3;pre';
config.entities = false;
config.removeDialogTabs = 'image:advanced;link:advanced;table:advanced';
config.disableNativeSpellChecker = false;
};
But when i add config.extraPlugins = 'codesnippet'; line then editor do not work even i can't see textarea field.
And when i remove config.extraPlugins = 'codesnippet'; line then editor works perfectly.
Use the online builder to add the codesnippet plugin to your editor. Most probably your editor is missing dependencies.
Most plugins in CKEditor require some additional plugins to operate. If you download manually plugin A, there is a chance that you need to download dependencies for plugin A... and plugin B, which is required by plugin A. And sometimes you will need to download dependencies for plugin C, which was required by plugin B. Sounds like a nightmare, this is why we created online builder and why package managers exist.

How do I pass in config info to CKEditor using the jQuery adapter?

I'm using the latest CKeditor with jQuery adapter.
I have successfully got it to work, and display.
However, as I am completely new to CKeditor, how do I pass in config variables using the jQuery method?
This is what I've got
$( '#input-content' ).ckeditor('', {
toolbar: 'basic'
});
I think from what I've read, the first argument is meant to be a callback, and the 2nd the config. But doing this has not changed the editor at all.
How do I use these config properties etc using the jQuery adapter?
I have accomplished this using this code. Hopefully this helps.
Here is the html:
<textarea id="txtMessage" class="editor"></textarea>
and here is the javascript:
try {
var config =
{
height: 180,
width: 515,
linkShowAdvancedTab: false,
scayt_autoStartup: true,
enterMode: Number(2),
toolbar_Full: [['Styles', 'Bold', 'Italic', 'Underline', 'SpellChecker', 'Scayt', '-', 'NumberedList', 'BulletedList'],
['Link', 'Unlink'], ['Undo', 'Redo', '-', 'SelectAll']]
};
$('textarea.editor').ckeditor(config); }
I passed an empty function...
$('textarea#my').ckeditor($.noop, {
property: 'value'
});
jQuery(function(){
var config = {
toolbar:
[
['Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Undo', 'Redo', '-', 'SelectAll'],
['UIColor']
]
};
jQuery('#textAreaElement').ckeditor(config);
});
var config = {
toolbar:
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Maximize', 'ShowBlocks','-','About']
],
coreStyles_bold: { element : 'b', overrides : 'strong' }
};
Simply add the respective config object, above I added coreStyles_bold, All I did is change the "=" from the CK API documentation to a ":"
$(document).ready(function(){
$('.reply').click(
function(event){
// Event click Off Default
event.preventDefault();
// CKEditor
$(function(){
var config = {toolbar:[['Bold', 'Italic', '-', 'Link', 'Unlink']]};
//<?php /*echo"var config = {toolbar:[['Bold', 'Italic', '-', 'Link', 'Unlink']]};" ;*/ ?>
// DOM class = "cke"
$('textarea.cke').ckeditor(function(){}, config);
});
return false;
});
});
There is an official documentation for it, see jQuery Adapter
The ckeditor() method accepts two optional parameters:
A callback function to be executed when the editor is ready.
Configuration options specific to the created editor instance:
$( 'textarea' ).ckeditor({
uiColor: '#9AB8F3'
});
Not sure if this is a new feature of CKEDITOR, but just want to share my solution (in case it helps anyone looking for this now):
$("textarea.youreditor").ckeditor
(
{
customConfig: "/path/to/custom/config.js"
}
);
... and my config looks like this (simply copied the default config.js):
CKEDITOR.editorConfig = function(config)
{
config.toolbar_Full =
[
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }
];
};

Categories