I have created plugins before but i must be missing something simple.
I have gone back to the tutorial and trying to add a very simple plugin. code below:
I do not get an error on the console and i do not see the icon in the editor
Any help would be greatly appreciated
In my PHP i have
CKEDITOR.replace( 'editor1',
{
toolbar : 'MyToolbar',
customConfig : '/admin/ckeditor/my_config.js?v=5.1',
height : '400px',
});
my_config.js looks like ::
CKEDITOR.editorConfig = function( config ){
config.enterMode = CKEDITOR.ENTER_BR;
fullPage : true;
extraPlugins : 'pdf';
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
{ name: 'document', items : [ 'Source' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About','Pdf' ] }
];
};
and the dir structure in the plugins dir is:
ckeditor
-->plugins
------>pdf
--------->images
------------>pdf.png
--------->plugin.js
and plugin.js looks like:
CKEDITOR.plugins.add( 'pdf',
{
init: function( editor )
{
editor.addCommand( 'insertPdf',
{
exec : function( editor )
{
var timestamp = new Date();
editor.insertHtml( 'The current date and time is: <em>' + timestamp.toString() + '</em>' );
}
});
editor.ui.addButton( 'Pdf',
{
label: 'Insert PDF',
command: 'insertPdf',
icon: this.path + 'images/pdf.png'
} );
}
} );
found the problem.
in the my_config.js i had
extraPlugins : 'pdf';
instead of
config.extraPlugins = 'pdfs';
Related
I am working on a project which has a requirement is: if user press a shortcut then a symbol will insert in text editor. Like:
if press Shift+1 then insert ✓
if press Shift+2 then insert ✗
I have done this in textarea but I am using CKEDITOR in this project and I have tried by 'keystrokes' like this but didn't work:
CKEDITOR.config.keystrokes = [
[ CKEDITOR.SHIFT + 76, function(){
console.log('sdsd');
} ]
];
Can somebody help me out please?
You can use command to execute a function like follow.
CKEDITOR.plugins.add('foo',
{
init: function( editor ) {
editor.addCommand( 'sample', {
exec: function( editor ) {
alert( 'Executing a command for the editor name "' + editor.name + '"!' );
}
} );
editor.setKeystroke( CKEDITOR.CTRL + 81, 'sample' ); // CTRL+Q
}
});
or in your way but after defining the command.
CKEDITOR.config.keystrokes = [
[ CKEDITOR.SHIFT + 76, 'sample' ]
];
The second value for the CKEDITOR.config.keystrokes expects a command name not a function.
NB: As the implementation is using plugin. You also have to configure the editor to use the plugin using extraPlugins configuration
CKEDITOR.replace('editor', {
extraPlugins : 'foo'
});
As your need is simply to map a keystroke to a symbol. You can use this plugin.
disclaimer: I'm the author of that plugin
You need to use setkystroke method like this :
For 4.x, use editor.setKeystroke:
CKEDITOR.plugins.add( 'test', {
init: function( editor ) {
editor.setKeystroke( CKEDITOR.CTRL + 81, 'bold' ); // CTRL+Q
}
} );
For 3.x:
CKEDITOR.plugins.add( 'test', {
init: function( editor ) {
editor.on( 'instanceReady', function( evt ) {
evt.removeListener();
this.keystrokeHandler.keystrokes[ CKEDITOR.CTRL + 81 ] = 'bold'; // CTRL+Q
} );
}
} );
I need a placeholder/variable that takes name, defaultValue, tooltip/description. I created a plugin and it is working fine in the editor/create mode. When placeholder is created, it is adding the following tags to source
<var class="cke_placeholder" name="varName" title="varToolTip">[[varDefaultValue]]</var>
Image that depicts create & edit mode differences
When I save the html content with placehoder in db and trying to load it back to ckeditor, I am not able to get the + symbol and hence not able to launch the editor.
Here is my ckeditor/plugins/var/plguin.js
'use strict';
( function() {
CKEDITOR.plugins.add( 'var', {
requires: 'widget,dialog',
icons: 'var', // %REMOVE_LINE_CORE%
hidpi: true, // %REMOVE_LINE_CORE%
onLoad: function() {
CKEDITOR.dialog.add( 'var', this.path + 'dialogs/var.js' );
},
init: function( editor ) {
this.registerWidget( editor );
editor.ui.addButton && editor.ui.addButton( 'Var', {
label: 'Create Variable',
command: 'var',
toolbar: 'insert',
icon: 'var'
} );
},
registerWidget: function(editor){
var that = this;
// Put ur init code here.
editor.widgets.add( 'var', {
// Widget code.
dialog: 'var',
pathName: 'var',
// We need to have wrapping element, otherwise there are issues in
// add dialog.
template: '<var class="cke_placeholder">[[]]</var>',
downcast: function() {
return new CKEDITOR.htmlParser.text( '<var class="cke_placeholder" name="'+this.data.name+'" title="'+this.data.description+'">[[' + this.data.defaultValue + ']]</var>' );
},
init: function() {
this.setData( 'defaultValue', this.element.getText().slice( 2, -2 ) );
this.setData( 'name', this.element.getAttribute("name") );
this.setData( 'description', this.element.getAttribute("title") );
},
data: function() {
this.element.setText( '[[' + this.data.defaultValue + ']]' );
this.element.setAttribute('name', this.data.name );
this.element.setAttribute('title', this.data.description );
}
} );
},
afterInit: function( editor ) {
this.registerWidget( editor );
/*var placeholderReplaceRegex = /\[\[([^\[\]])+\]\]/g;
editor.dataProcessor.dataFilter.addRules( {
text: function( text, node ) {
var dtd = node.parent && CKEDITOR.dtd[ node.parent.name ];
// Skip the case when placeholder is in elements like <title> or <textarea>
// but upcast placeholder in custom elements (no DTD).
if ( dtd && !dtd.span )
return;
return text.replace( placeholderReplaceRegex, function( match ) {
// Creating widget code.
var widgetWrapper = null,
innerElement = new CKEDITOR.htmlParser.element( 'span', {
'class': 'cke_placeholder'
} );
// Adds placeholder identifier as innertext.
innerElement.add( new CKEDITOR.htmlParser.text( match ) );
widgetWrapper = editor.widgets.wrapElement( innerElement, 'placeholder' );
// Return outerhtml of widget wrapper so it will be placed
// as replacement.
return widgetWrapper.getOuterHtml();
} );
}
} );*/
}
} );
} )();
Here is my ckeditor/plugins/var/dialogs/var.js
'use strict';
CKEDITOR.dialog.add( 'var', function( editor ) {
//var lang = editor.lang.var,
//generalLabel = editor.lang.common.generalTab,
var generalLabel = 'General',
validRegex = /^[^\[\]<>]+$/,
emptyOrInvalid = ' can not be empty. It can not contain any of following characters: [, ], <, >',
invalid = ' can not contain any of following characters: [, ], <, >';
return {
title: 'Variable properties',
minWidth: 300,
minHeight: 80,
contents: [
{
id: 'info',
label: generalLabel,
title: generalLabel,
elements: [
// Dialog window UI elements.
{
id: 'name',
type: 'text',
style: 'width: 100%;',
label: 'Name',
'default': '',
required: true,
validate: CKEDITOR.dialog.validate.regex( validRegex, 'name'+emptyOrInvalid ),
setup: function( widget ) {
this.setValue( widget.data.name );
},
commit: function( widget ) {
widget.setData( 'name', this.getValue() );
}
},
{
id: 'defaultValue',
type: 'text',
style: 'width: 100%;',
label: 'Default Value',
'default': '',
required: true,
validate: CKEDITOR.dialog.validate.regex( validRegex, 'Default Value'+emptyOrInvalid ),
setup: function( widget ) {
this.setValue( widget.data.defaultValue );
},
commit: function( widget ) {
widget.setData( 'defaultValue', this.getValue() );
}
},
{
id: 'description',
type: 'text',
style: 'width: 100%;',
label: 'Description',
'default': '',
required: true,
validate: CKEDITOR.dialog.validate.regex( validRegex, 'Description'+invalid ),
setup: function( widget ) {
this.setValue( widget.data.description );
},
commit: function( widget ) {
widget.setData( 'description', this.getValue() );
}
}
]
}
]
};
} );
By default, CKEditor's enter key behavior is adding a <p> tag and starting a new paragraph. But that behavior can be modified in the configuration with a .EnterMode parameter.
I'm wondering if there is a way to change Enter key behavior in the runtime, by putting a button into its tool bar, to switch between <p> and <br> (single line vs double line), just like as in Word.
Any ideas on how to do this?
Save the following to editor_dir/plugins/entermode/plugin.js:
'use strict';
(function() {
CKEDITOR.plugins.add( 'entermode', {
icons: 'entermode',
init: function( editor ) {
var enterP = new enterModeCommand( editor, CKEDITOR.ENTER_P );
var enterBR = new enterModeCommand( editor, CKEDITOR.ENTER_BR );
editor.addCommand( 'entermodep', enterP );
editor.addCommand( 'entermodebr', enterBR );
if ( editor.ui.addButton ) {
editor.ui.addButton( 'EnterP', {
label: 'Enter mode P',
command: 'entermodep',
toolbar: 'paragraph,10'
});
editor.ui.addButton( 'EnterBR', {
label: 'Enter mode BR',
command: 'entermodebr',
toolbar: 'paragraph,20'
});
}
editor.on( 'dataReady', function() {
refreshButtons( editor );
});
}
});
function refreshButtons( editor ) {
editor.getCommand( 'entermodep' ).setState(
editor.config.enterMode == CKEDITOR.ENTER_P ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF );
editor.getCommand( 'entermodebr' ).setState(
editor.config.enterMode == CKEDITOR.ENTER_BR ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF );
}
function enterModeCommand( editor, mode ) {
this.mode = mode;
}
enterModeCommand.prototype = {
exec: function( editor ) {
editor.config.enterMode = this.mode;
refreshButtons( editor );
},
refresh: function( editor, path ) {
refreshButtons( editor );
}
};
})();
Now add the following to toolbar.css in your skin file:
.cke_button__enterp_icon, .cke_button__enterbr_icon { display: none !important; }
.cke_button__enterp_label, .cke_button__enterbr_label { display: inline !important; }
...or paint some icons, if you want.
Enable the plugin when running the editor:
CKEDITOR.replace( 'id', { extraPlugins: 'entermode' } );
Now you can control config.enterMode from the toolbar.
I want to add a button in toolbar of CKEditor but button is not appearing.This is code for creation of plugin saved in _source/plugins/footnote/
CKEDITOR.plugins.add('footnote',
{
init: function(editor)
{
var pluginName = 'footnote';
CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/footnote.js');
editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
editor.ui.addButton('Footnote',
{
label: 'Footnote or Citation',
command: pluginName
});
}
});
And this is code of config.js
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';
config.extraPlugins = 'footnote';
config.toolbar_MyToolbar =
[
['Bold','Footnote','Italic']
];
};
Just bold and italic are appearing in toolbar.But footnote button is not appearing.
Thanks for your help.
You are not providing an icon:
CKEDITOR.plugins.add('footnote',
{
icons: 'myfootnote',
init: function (editor) {
var pluginName = 'footnote';
CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/footnote.js');
editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
editor.ui.addButton('Footnote',
{
label: 'Footnote or Citation',
icon: 'myfootnote',
command: pluginName
});
}
});
Be sure to create an icon at /plugins/footnote/icons/myfootnote.png.
Only PNGs are accepted.
The button must have the same name (case sensitive).
Thus replace editor.ui.addButton('Footnote', by editor.ui.addButton('footnote',
This is my code,
myText.enableKeyEvents = true; // **
myText.on('keyup', function(t){ console.log(t.getValue()); });
It not work, I think it may has some invoke method.
Any one has an idea ?
Full code
// function
var txfJump = function(txf){
var next = txf.nextSibling();
if(next.xtype == 'textfield'){
txf.enableKeyEvents = true;
txf.on('keyup', function(t, e){
if(t.getValue().length == t.maxLength){
next.focus();
}
});
txfJump(next);
}
};
// form
var p = new Ext.Panel({
title : 'test panel',
width : 400,
defaults: {
xtype : 'textfield',
},
items : [
{ ref : 'one', maxLength : 5 },
{ ref : 'two', maxLength : 5 },
{ ref : 'three',maxLength : 5 },
{
xtype : 'button',
text : 'SAMPLE'
},
{ ref : 'four', maxLength : 5 },
],
renderTo: Ext.getBody()
});
Ext.onReady(function(){
txfJump(p.one);
});
It's not possible without hackish tricks. Having read the TextField's source, i found out, that there is a private method initEvents, that sets up the callbacks for the html-elements if and only if enableKeyEvents is set. So, changing enableKeyEvents after initEvents was called has no effect, until it is called again.
To inject it, one could try to trigger a re-rendering of the component, or one could copy the behaviour of the relevant parts of TextField's initEvent. But there doesn't seem to be an official way.
you have to call txf.initEvents(), this needs to be called after txf.enableKeyEvents = true;
var txfJump = function(txf){
var next = txf.nextSibling();
if(next.xtype == 'textfield'){
txf.enableKeyEvents = true;
txf.initEvents(); //<----- this is what you have missing
txf.on('keyup', function(t, e){
if(t.getValue().length == t.maxLength){
next.focus();
}
});
txfJump(next);
}
You should pass "enableKeyEvents": true when getting new Ext.form.TextField instance. Here is the example usage
var textField = new Ext.form.TextField({
. // your configs
.
enableKeyEvents: true,
.
.
})