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.
Related
How to get ajax call to save data of ckeditor on save button plugin.
Here I attached image.
The task was to use inline ckeditor in order to edit div contents and save by sending ajax request to the server.
I have stuck to a problem that ckeditor save button did not appear on the toolbar. So here is a solution for that. The most important part is highlighted with bold.
Just replace the "save" plugin contents. You can find it in ckeditor/plugins/save/plugin.js
(function() {
var saveCmd = { modes:{wysiwyg:1,source:1 },
readOnly: 1,
exec: function( editor ) {
var data = editor.getData();
jQuery.post(editor.config.saveSubmitURL,
{text: data},
function(response){
alert('Data sent to server!!!');
});
}
};
var pluginName = 'save';
// Register a plugin named "save".
CKEDITOR.plugins.add( pluginName, {
lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,el,en-au,en-ca,en-gb,en,eo,es,et,eu,fa,fi,fo,fr-ca,fr,gl,gu,he,hi,hr,hu,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt-br,pt,ro,ru,sk,sl,sr-latn,sr,sv,th,tr,ug,uk,vi,zh-cn,zh', // %REMOVE_LINE_CORE%
icons: 'save', // %REMOVE_LINE_CORE%
init: function( editor ) {
var command = editor.addCommand( pluginName, saveCmd );
//command.modes = { wysiwyg: !!( editor.element.$.form ) };
editor.ui.addButton( 'Save', {
label: editor.lang.save.toolbar,
command: pluginName,
toolbar: 'clipboard,50'
});
}
});
})();
Additionally you will need to update the config.js file for the ckeditor and add the following lines
config.saveSubmitURL = 'URL_TO_YOUR_SERVER_SCRIPT.php';
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' );
}
},
]
},
]
});
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'
} );
}
}
} );
I created a plugin named timestamp.
Code for plugin.js is this:
CKEDITOR.plugins.add( 'timestamp',
{
init: function( editor )
{
editor.addCommand( 'insertTimestamp',
{
exec : function( editor )
{
var timestamp = new Date();
editor.insertHtml( timestamp.toString() );
}
});
editor.ui.addButton( 'Timestamp',
{
label: 'Insert Timestamp',
command: 'insertTimestamp',
icon: this.path + '/icons/timestamp.png'
} );
}
} );
Icon is in /_source/plugins/timestamp/icons
But when I tried to add plugin in ./samples/fullpage.html, even toolbar not appearing
code:
<script>
CKEDITOR.replace( 'editor1', {
fullPage: true,
extraPlugins: 'wysiwygarea,timestamp',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList' ],
[ 'Timestamp' ]
]
});
</script>
If i tried to add this plugin in config.js, toolbar appear but without timestamp(my custom plugin)
code:
config.extraPlugins ='timestamp';
please let me know whats going wrong.Thanks
Just remove extraPlugin: 'wysiwygarea' or extraPlugins : 'docprops' is not required in full.html. Hopfully it will work:)
Your toolbar stopped appearing after you've added your plugin much probably because you've got some JS error in that plugin which breaks everything. Check your console and paste info here (or try to fix the issue by yourself :)).
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;
}