CKEditor lets you add custom styles to the styles combo box by editing the file styles.js (see What is a good javascript HTML editor for adding custom HTML elements? for details)
I would like to add unique buttons to the toolbar to apply my custom styles, rather than the user having to select them from the styles combo.
How do you add custom buttons to the CKEditor toolbar?
Go ahead with the following code:
// Your custom style.
var myStyle = new CKEDITOR.style( {
element: 'span',
attributes: {
'data-foo': 'bar',
'class': 'myClass'
},
styles: {
color: 'red'
}
} );
CKEDITOR.replace( 'editor1', {
on: {
// Register command and button along with other plugins.
pluginsLoaded: function() {
var editor = this;
// Registers a command that applies the style.
// Note: it automatically adds Advanced Content Filter rules.
this.addCommand( 'myStyle', new CKEDITOR.styleCommand( myStyle ) );
// Add toolbar button for this command.
this.ui.addButton && this.ui.addButton( 'myStyleButton', {
label: 'My style',
command: 'myStyle',
toolbar: 'insert,10'
// You may want to set some icon here.
// icon: 'someIcon'
} );
}
}
} );
Related
I'm implementing Quill-Mention in Quill JS, using React Quill but I can't manage to update editor content when clicking an item from the list.
I can properly render the list when clicking the right symbol and it shows data accordingly. But, when I click it, it disappears and the item value is not added to editor content.
Here is how I'm testing it:
const suggestPeople = searchTerm => {
const allPeople = [
{
id: 1,
value: "Fredrik Sundqvist"
},
{
id: 2,
value: "Patrik Sjölin"
}
];
return allPeople.filter(person => person.value.includes(searchTerm));
};
/* Mention module config
====================== */
const mentionModule = {
allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
mentionDenotationChars: ["·"],
source: async function(searchTerm, renderList) {
const matchedPeople = await suggestPeople(searchTerm);
renderList(matchedPeople);
}
};
Quill.register("modules/mentions", QuillMention);
const modules = {
syntax: true,
clipboard: {
matchVisual: false
},
toolbar: {
container: "#toolbar",
},
mention: mentionModule
};
Screenshot showing Quill Mention dropdown list working
Thank you!
I solved it.
I needed to add the onSelect method in the config object plus add "mention" as an element of the formats array.
Thank you either way :)
In a CKEditor plugin, you can specify a toolbar for a button with this :
init:function(editor){
editor.ui.addButton('myplug',{
label:'my plug',
command:'myplug',
toolbar:'mytoolbar'
With widget, I don't find this possibility. Is there a way to do that without move the node in JS, that is a bit complicated ?
You can do the same with widgets. Here's a widget's plugin.js file with a button and toolbar declaration under the init function:
CKEDITOR.plugins.add( 'mywidget', {
requires: 'widget',
icons: 'mywidget',
init: function( editor ) {
CKEDITOR.dialog.add('mywidget', this.path + 'dialogs/mywidget.js')
editor.widgets.add( 'mywidget' , {
//
// Your widget logic is here ...
//
});
editor.ui.addButton('mywidget', {
label: 'My Widget'
command: 'mywidget'
toolbar: 'mytoolbar, 1'
});
}
} );
You'll need to add the "mytoolbar" toolbar in your config.js file, but I suppose you already have because you mentioned being able to add a button for a plug-in.
I'm using TinyMce Style Formats to add custom formats to the ""Formats" dropdown.
The problem is that I have too many styles to add, and I would like to use another "Formats" dropdown, separated from the first one. I know I can nest formats but it's not enough, I want to add two different Dropdown, how can I do it?
Have a look at the style plugin in tinymce3 (in tinymce4 it is part of the tinymce core). You may copy that plugin rename it and configure it to your needs. Then you need to add the plugin to your plugin list and the tinymce button to your button list.
This is best done adding formats to the formatter programmatically and then adding a menu item and trigger the formatter
editor.on( 'Init', function( e ) {
editor.formatter.register(
'page-title',
{ 'selector': 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li',wrapper: false, classes : ['giga', 'primary-font'] }
);
} );
editor.addButton( 'typography', {
text: 'Typography',
icon: false,
type: 'menubutton',
menu: [
{
text: 'Page Title',
menu: [
{
text: '(Giga) 88 Clan pro thin #000000',
onclick: function() {
editor.formatter.toggle( 'page-title' );
}
},
]
},
]
});
I have a panel in user-interface called Code, I dont want to display that panel to specific users when they log in based on their roles. I am new to ExtJS. I have the algorithm/condition to block user's , but I am unsure where to apply it in this code. The .js file is:
analysisCodePanel = new Ext.Panel( {
id : 'analysisCodePanel',
title : 'Code',
region : 'center',
split : true,
height : 90,
layout : 'fit',
listeners :
{
activate : function( p ) {
GLOBAL.IDs[1] = null;
GLOBAL.IDs[2] = null;
p.body.mask("Loading...", 'mask-loading');
runAll(Data, p);}
return;
},
deactivate: function(){
},
collapsible : true
});
My condition is check whether user is Admin so I can do GLOBAL.IsCodeAdmin() then show the above panel else hide it from the user logged in.
if this panel is a child of viewport then you have to use your controller to show and hide the panel.
In your controller put listener for viewport rendering like below. Make sure your read docs and getting started carefully. Then I'll understand how to control elements using different events. This link is a good start http://docs.sencha.com/extjs/4.2.1/#!/guide/getting_started
// ExtJs controller
Ext.define('app.controller.ViewPortController', {
extend: 'Ext.app.Controller',
refs: [
{
ref: 'myPanel', // this elemenet can be referred as getMyPanel()
selector: 'panel[id=analysisCodePanel]' // selector to get panel reference
}
],
init: function () {
this.control({
'viewport': {
'render': this.viewPortRender // on viewport render this function will be called
}
})
},
viewPortRender: function () {
if (GLOBAL.IsCodeAdmin()) {
this.getMyPanel().show(); // show panel
} else {
this.getMyPanel().hide(); // hide panel
}
}
}
);
I solved the problem by using an attribute for panel called disabled and setting it to true.
What I am ultimately trying to do is to implement some simple code highlighter (/Syntax Highlighter) since there was nothing available in ckEditor. For this reason I am thinking to add a new button ( or modify one of the existing buttons) by clicking which the selected text changes in the following manner:
1- gets mono-space font to preserve indentations in source code (e.g. "Courier New")
2- the font color changes to blue
Since I don't know how to add a new button I was thinking to use one of the existing buttons, say block quote button, to do the job.
added note:
by the way I just noticed that the ckEditor 4 is out too: ckeditor 4
where the plugins are customizable too:ckeditor 4 builder
You can consider the following plugin I created from scratch in hurry (this is not a full solution but it shows the right direction):
(function() {
'use strict';
CKEDITOR.plugins.add( 'prettify', {
icons: 'prettify',
init: function( editor ) {
editor.on( 'mode', function( event ) {
if( editor.mode == 'wysiwyg' )
insertResources( editor );
});
editor.addCommand( 'prettify', {
exec: function( editor ) {
var selection = editor.getSelection(),
startElement = selection.getStartElement();
if ( startElement.hasClass( 'prettyprint' ) )
return;
var contents = startElement.getText();
// Naive pre-processing.
contents = contents.replace( /\n/g ,'<br>' );
contents = contents.replace( /\t/g ,' ' );
contents = contents.replace( / /g ,' ' );
startElement.setHtml( prettyPrintOne( contents, 'js', 0 ) );
startElement.addClass( 'prettyprint' );
}
});
editor.ui.addButton( 'Prettify', {
label: 'Prettify',
command: 'prettify',
toolbar: 'insert'
});
}
});
function insertResources( editor ) {
var outerHead = CKEDITOR.document.getHead(),
innerHead = editor.document.getHead(),
path = CKEDITOR.plugins.getPath( 'prettify' );
outerHead.append( CKEDITOR.document.createElement( 'script', {
attributes: {
type: 'text/javascript',
async: 'true',
src: path + 'lib/prettify.js'
}
}));
innerHead.append( CKEDITOR.document.createElement( 'link', {
attributes: {
rel: 'stylesheet',
href: path + 'lib/prettify.css'
}
}));
}
})();
To run it, extract Google Prettify library into lib directory of prettify plugin. Then try the following HTML and use the button in the toolbar to prettify pre:
<textarea cols="80" id="editor1" name="editor1" rows="10">
<pre>function insertResources( editor ) {
var outerHead = CKEDITOR.document.getHead(),
innerHead = editor.document.getHead(),
path = CKEDITOR.plugins.getPath( 'prettify' );
</pre>
<p>Foo:</p>
<pre>outerHead.append( CKEDITOR.document.createElement( 'script', {
attributes: {
type: 'text/javascript',
async: 'true',
src: path + 'lib/prettify.js'
}
}));</pre>
<p>Bar:</p>
<pre>innerHead.append( CKEDITOR.document.createElement( 'link', {
attributes: {
rel: 'stylesheet',
href: path + 'lib/prettify.css'
}
}));
}</pre>
</textarea>
<script>
CKEDITOR.replace( 'editor1', {
extraPlugins: 'prettify',
toolbar: [
[ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
[ 'Bold', 'Italic' ],
'/',
[ 'Prettify']
]
} );
</script>
A WYSIWYG editor generates an HTML markup or encoded HTML at the back to store your formatting, let’s say for the quote it might be generating this code at the back:
<blockquote> … </blockquote>
(However this varies from one editor to another)
The easiest way to do it is to find out the tag it is generating in the background and apply CSS style to it as you want.
//.CSS
blockquote{
//Styles here…
}
Hope it helps.
Not sure what is your full use case, but here's mine, which ended up with a custom plugin
I wanted to be able to insert code snippets into CKEditor using a dialog window (not sure why you prefer the blockquote element)
I wanted to have these code snippets somehow visually marked in CKEditor, I did not care about having real syntax highlighter in CKEditor
At the end, after saving the content, I wanted to apply real syntax formatting to the inserted element without spending too much work on it. I used prettify for that.
Feel free to check the plugin and modify it to your needs.
I just found this super easy solution:
open the contents.css in the root of ckeditor
add the following:
blockquote {
color: blue;
font-family: "Courier New",
Courier,
monospace;
}