How to add a custom shortcut in ckeditor 4.x? - ckeditor

In Ckeditor i want to create custom shortcut key to change the font-type (font should change by pressing shortcut cut key )
Need your help

for this it need a custom plugin ,i have create custom plugin like this
add this code by creating a plugin name(keystorke)and add it into plugin folder
CKEDITOR.plugins.add( 'keystrokes', {
init: function( editor ) {
editor.addCommand( 'h1', {
exec: function( editor ) {
var format = { element: 'h1' };
var style = new CKEDITOR.style(format);
style.apply(editor.document);
var selectedText = editor.getSelection().getNative();
}
} );
editor.addCommand( 'h2', {
exec: function( editor ) {
var format = { element: 'h2' };
var style = new CKEDITOR.style(format);
style.apply(editor.document);
}
} );
editor.addCommand( 'h3', {
exec: function( editor ) {
var format = { element: 'h3' };
var style = new CKEDITOR.style(format);
style.apply(editor.document);
}
} );
editor.addCommand( 'h4', {
exec: function( editor ) {
var format = { element: 'h4' };
var style = new CKEDITOR.style(format);
style.apply(editor.document);
}
} );
editor.addCommand( 'h5', {
exec: function( editor ) {
var format = { element: 'h5' };
var style = new CKEDITOR.style(format);
style.apply(editor.document);
}
} );
editor.addCommand( 'h6', {
exec: function( editor ) {
var format = { element: 'h6' };
var style = new CKEDITOR.style(format);
style.apply(editor.document);
}
} );
editor.addCommand( 'p', {
exec: function( editor ) {
var format = { element: 'p' };
var style = new CKEDITOR.style(format);
style.apply(editor.document);
}
} );
editor.setKeystroke( CKEDITOR.ALT + 49 , 'h1' ); // ALT + 1
editor.setKeystroke( CKEDITOR.ALT + 50 , 'h2' ); // ALT + 2
editor.setKeystroke( CKEDITOR.ALT + 51 , 'h3' ); // ALT + 3
editor.setKeystroke( CKEDITOR.ALT + 52 , 'h4' ); // ALT + 4
editor.setKeystroke( CKEDITOR.ALT + 53 , 'h5' ); // ALT + 5
editor.setKeystroke( CKEDITOR.ALT + 54 , 'h6' ); // ALT + 6
editor.setKeystroke( CKEDITOR.ALT + 55 , 'p' ); // ALT + 7
}
});
2 now you need to add one line in config.js file like this
config.extraPlugins = 'keystrokes';
3 now it will work forsure

Related

Is there a possibility for a keystroke in ckeditor4.20 to activate a list style

I want to have a keystroke to (de)activate the list styles (ul and ol).
In general I know how to customize keystrokes via plugin to activate i.e. H1 or P or PRE,...
Unfortunately that does nothing when using with UL or OL OR LI
( function() {
CKEDITOR.plugins.add( 'keystrokes2', {
init: function( editor ) {
editor.addCommand( 'ulist', {
exec: function( editor ) {
var format = { element: 'h1' };
var style = new CKEDITOR.style(format);
style.apply(editor.document);
}
} );
editor.setKeystroke( CKEDITOR.CTRL + CKEDITOR.ALT + 76 , 'ulist' );
}
});
} )();

Conversion for multiple style attributes in different plugins are not working?

I have developed a few plugins for ckeditor which work by adding span tag with style attribute.
Letter Spacing
Line Height
Text Transform
They are working fine when I make changes in editor but, when I initialise the editor with <p><span style="line-height:3;letter-spacing:18px;text-transform:uppercase;font-family:Ubuntu, Arial, sans-serif;font-size:12px;">safasfasfas</span></p> only text-transform, font-family and font-size is working but rest of 2 plugins/style attributes are not working.
Is there any idea, what I am doing wrong?
Edit:
I have conversion like below
editor.conversion.for( 'downcast' )
.add( downcastAttributeToElement( {
model: {
key: 'letterSpacing',
name: '$text'
},
view: ( modelAttributeValue, viewWriter ) => {
return viewWriter.createAttributeElement( 'span', { style: 'letter-spacing:' + modelAttributeValue + 'px' } );
}
} ) );
editor.conversion.for( 'upcast' )
.add( upcastElementToAttribute( {
view: {
name: 'span'
},
model: {
key: 'letterSpacing',
value: viewElement => {
const letterSpacing = viewElement.getStyle( 'letter-spacing' );
if (letterSpacing === undefined) {
return null;
}
return letterSpacing.substr( 0, letterSpacing.length - 2 );
}
}
} ) );
I was able to fix this issue by adding below code in conversion.
styles: {
'letter-spacing': /[\S]+/
}
Now conversion becomes like
editor.conversion.for( 'downcast' )
.add( downcastAttributeToElement( {
model: {
key: 'letterSpacing',
name: '$text'
},
view: ( modelAttributeValue, viewWriter ) => {
return viewWriter.createAttributeElement( 'span', { style: 'letter-spacing:' + modelAttributeValue + 'px' } );
}
} ) );
editor.conversion.for( 'upcast' )
.add( upcastElementToAttribute( {
view: {
name: 'span',
styles: {
'letter-spacing': /[\S]+/
}
},
model: {
key: 'letterSpacing',
value: viewElement => {
const letterSpacing = viewElement.getStyle( 'letter-spacing' );
if (letterSpacing === undefined) {
return null;
}
return letterSpacing.substr( 0, letterSpacing.length - 2 );
}
}
} ) );

Ckeditor auto add class to p

I would like to add class "text-justify" automatically to every p, anyone know how to do this?
Now I am using this code:
CKEDITOR.on('dialogDefinition', function (ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'table' || dialogName == 'tableProperties') {
var info = dialogDefinition.getContents('info');
// Remove fields
var cellSpacing = info.remove('txtCellSpace');
var cellPadding = info.remove('txtCellPad');
var border = info.remove('txtBorder');
var width = info.remove('txtWidth');
var height = info.remove('txtHeight');
var align = info.remove('cmbAlign');
}
});
$('#content, #longContent').ckeditor({
contentsCss: '/CMS/style_ckeditor.css',
allowedContent: true,
extraPlugins: 'button,menubutton,htmlbuttons,menu,floatpanel,panel',
htmlbuttons: [
{
name:'button1',
icon:'icon1.png',
html:'<p class="act-left">Sekretarz Zgromaczenia<br /><strong>Alfred Błaszczyk</strong></p><p class="act-right">Przewodniczący Zgromadzenia<br /><strong>Tomasz Radomski</strong></p><div class="clearfix"></div>',
title:'Dodaj podpisy'
},
{
name:'button2',
icon:'icon3.png',
html:'<ol class="law"><li> <ol><li>tekst</li></ol></li></ol>',
title:'Dodaj paragraf'
}
]
}).ckeditorGet().on('insertElement', function (event) {
var el = event.data;
if (el.is('table')) {
$(event.data.$)
.addClass('table table-bordered table-striped')
.removeAttr('cellpadding cellspacing')
.wrap('<div class="table-responsive"></div>');
}
}, null, null, 20);
It works for adding classes for table, but when I would like to do similar to P, it didn't work.
just use :
$('#content').ckeditor({
on: {
instanceReady: function () {
this.dataProcessor.htmlFilter.addRules({
elements: {
ul: function (el) {
el.addClass('ul');
},
table: function (el) {
el.addClass('entry');
}
}
});
}
}
});
For Ckeditor4

ckeditor with placeholder plguin enhancement double click issue

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() );
}
}
]
}
]
};
} );

CKEditor: Controlling Entermode with a toolbar button

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.

Resources