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' );
}
});
} )();
Related
How to close\ open accorion on click to .shewron element?
Example: https://codepen.io/npofopr/pen/vYKKXbJ?editors=1010
let util = UIkit.util;
let lkOrderIconExpand = document.querySelectorAll(".shewron");
util.on(lkOrderIconExpand, "click", function () {
let accordionEl = util.$("[uk-accordion]");
// find closed li array
let allItems = util.$$("[uk-accordion] > li");
// for each element
util.each(allItems, function (el) {
// get index
let openIndex = util.index(el);
// Check if some element has some class
if (util.hasClass(allItems, "uk-open")) {
console.log("Class was found!");
// toggle it
UIkit.accordion(accordionEl).toggle(openIndex);
} else {
console.log("Class was NOT found!");
// toggle it
UIkit.accordion(accordionEl).toggle(openIndex);
}
});
});
You can easily do it with CSS:
.uk-accordion-title::before{
background-image: url(**icon-url-here);
}
.uk-open > .uk-accordion-title::before{
background-image: url(**icon-url-here);
}
So that your chevron icons will show instead of default accordion icons.
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
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
} );
}
} );
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',