Added 'lineheight' option to text editor
This commit is contained in:
parent
ee37d4a540
commit
75272814a6
|
@ -37,4 +37,5 @@ CKEDITOR.editorConfig = function( config ) {
|
||||||
config.removeDialogTabs = 'image:advanced;link:advanced';
|
config.removeDialogTabs = 'image:advanced;link:advanced';
|
||||||
|
|
||||||
config.extraPlugins = 'justify';
|
config.extraPlugins = 'justify';
|
||||||
|
config.extraPlugins = 'lineheight';
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,22 @@
|
||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2015 Kamlesh Kushwaha
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
# lineheight
|
||||||
|
Ckeditor lineheight plugin repository
|
|
@ -0,0 +1,3 @@
|
||||||
|
CKEDITOR.plugins.setLang('lineheight','{LANGUAGE_CODE}', {
|
||||||
|
title: '{LINE-HEIGHT}'
|
||||||
|
} );
|
|
@ -0,0 +1,3 @@
|
||||||
|
CKEDITOR.plugins.setLang('lineheight','ar', {
|
||||||
|
title: 'خط الطول'
|
||||||
|
} );
|
|
@ -0,0 +1,3 @@
|
||||||
|
CKEDITOR.plugins.setLang('lineheight','de', {
|
||||||
|
title: 'Zeilenhöhe'
|
||||||
|
} );
|
|
@ -0,0 +1,3 @@
|
||||||
|
CKEDITOR.plugins.setLang('lineheight','en', {
|
||||||
|
title: 'Line Height'
|
||||||
|
} );
|
|
@ -0,0 +1,3 @@
|
||||||
|
CKEDITOR.plugins.setLang('lineheight','es', {
|
||||||
|
title: 'Altura de Línea'
|
||||||
|
} );
|
|
@ -0,0 +1,3 @@
|
||||||
|
CKEDITOR.plugins.setLang('lineheight','fr', {
|
||||||
|
title: 'Hauteur de Ligne'
|
||||||
|
} );
|
|
@ -0,0 +1,3 @@
|
||||||
|
CKEDITOR.plugins.setLang('lineheight','ko', {
|
||||||
|
title: '줄 높이'
|
||||||
|
} );
|
|
@ -0,0 +1,3 @@
|
||||||
|
CKEDITOR.plugins.setLang('lineheight','af', {
|
||||||
|
title: 'linha Altura'
|
||||||
|
} );
|
|
@ -0,0 +1,81 @@
|
||||||
|
( function() {
|
||||||
|
function addCombo( editor, comboName, styleType, lang, entries, defaultLabel, styleDefinition, order ) {
|
||||||
|
var config = editor.config,style = new CKEDITOR.style( styleDefinition );
|
||||||
|
var names = entries.split( ';' ),values = [];
|
||||||
|
var styles = {};
|
||||||
|
for ( var i = 0; i < names.length; i++ ) {
|
||||||
|
var parts = names[ i ];
|
||||||
|
if ( parts ) {
|
||||||
|
parts = parts.split( '/' );
|
||||||
|
var vars = {},name = names[ i ] = parts[ 0 ];
|
||||||
|
vars[ styleType ] = values[ i ] = parts[ 1 ] || name;
|
||||||
|
styles[ name ] = new CKEDITOR.style( styleDefinition, vars );
|
||||||
|
styles[ name ]._.definition.name = name;
|
||||||
|
} else
|
||||||
|
names.splice( i--, 1 );
|
||||||
|
}
|
||||||
|
editor.ui.addRichCombo( comboName, {
|
||||||
|
label: editor.lang.lineheight.title,
|
||||||
|
title: editor.lang.lineheight.title,
|
||||||
|
toolbar: 'styles,' + order,
|
||||||
|
allowedContent: style,
|
||||||
|
requiredContent: style,
|
||||||
|
panel: {
|
||||||
|
css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
|
||||||
|
multiSelect: false,
|
||||||
|
attributes: { 'aria-label': editor.lang.lineheight.title }
|
||||||
|
},
|
||||||
|
init: function() {
|
||||||
|
this.startGroup(editor.lang.lineheight.title);
|
||||||
|
for ( var i = 0; i < names.length; i++ ) {
|
||||||
|
var name = names[ i ];
|
||||||
|
this.add( name, styles[ name ].buildPreview(), name );
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onClick: function( value ) {
|
||||||
|
editor.focus();
|
||||||
|
editor.fire( 'saveSnapshot' );
|
||||||
|
var style = styles[ value ];
|
||||||
|
editor[ this.getValue() == value ? 'removeStyle' : 'applyStyle' ]( style );
|
||||||
|
editor.fire( 'saveSnapshot' );
|
||||||
|
},
|
||||||
|
onRender: function() {
|
||||||
|
editor.on( 'selectionChange', function( ev ) {
|
||||||
|
var currentValue = this.getValue();
|
||||||
|
var elementPath = ev.data.path,elements = elementPath.elements;
|
||||||
|
for ( var i = 0, element; i < elements.length; i++ ) {
|
||||||
|
element = elements[ i ];
|
||||||
|
for ( var value in styles ) {
|
||||||
|
if ( styles[ value ].checkElementMatch( element, true, editor ) ) {
|
||||||
|
if ( value != currentValue )
|
||||||
|
this.setValue( value );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.setValue( '', defaultLabel );
|
||||||
|
}, this );
|
||||||
|
},
|
||||||
|
refresh: function() {
|
||||||
|
if ( !editor.activeFilter.check( style ) )
|
||||||
|
this.setState( CKEDITOR.TRISTATE_DISABLED );
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
CKEDITOR.plugins.add( 'lineheight', {
|
||||||
|
requires: 'richcombo',
|
||||||
|
lang: 'ar,de,en,es,fr,ko,pt',
|
||||||
|
init: function( editor ) {
|
||||||
|
var config = editor.config;
|
||||||
|
addCombo( editor, 'lineheight', 'size', editor.lang.lineheight.title, config.line_height, editor.lang.lineheight.title, config.lineHeight_style, 40 );
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} )();
|
||||||
|
CKEDITOR.config.line_height = '0.5;1;1.5;2;2,5;3;';
|
||||||
|
CKEDITOR.config.lineHeight_style = {
|
||||||
|
element: 'span',
|
||||||
|
styles: { 'line-height': '#(size)' },
|
||||||
|
overrides: [ {
|
||||||
|
element: 'line-height', attributes: { 'size': null }
|
||||||
|
} ]
|
||||||
|
};
|
|
@ -0,0 +1,30 @@
|
||||||
|
lineheight
|
||||||
|
==========
|
||||||
|
|
||||||
|
CKEDITOR Line-height plugin documentation
|
||||||
|
----------------------------------------------
|
||||||
|
|
||||||
|
Installation Notes:
|
||||||
|
|
||||||
|
Adding plugin into the toolbar:
|
||||||
|
Using CKBuilder is a recommended solution, however, if you have plugins developed by yourself or by third parties, you can add plugins to your local installation manually by following the steps described below:
|
||||||
|
Extract the plugin .zip archive.
|
||||||
|
Copy the plugin files to the plugins folder of your CKEditor installation. Each plugin must be placed in a sub-folder that matches its "technical" name.
|
||||||
|
|
||||||
|
For example, the lineheight plugin would be installed into this folder: <CKEditor folder>/plugins/lineheight.
|
||||||
|
Check and resolve plugin dependencies. If a plugin needs others to work, you will need to add these manually as well.
|
||||||
|
Enable the plugin. Use the extraPlugins setting to add the plugin to your confiuration:
|
||||||
|
|
||||||
|
config.extraPlugins = 'lineheight';
|
||||||
|
|
||||||
|
Refer this link for configuring the toolbar: http://docs.ckeditor.com/#!/guide/dev_toolbar
|
||||||
|
|
||||||
|
|
||||||
|
Customizing the lineheight values in the dropdown
|
||||||
|
-------------------------------------------------------
|
||||||
|
In order to have custom values of line-height instead of the default, you can add following line in the config.js file:
|
||||||
|
|
||||||
|
config.line_height="1em;1.1em;1.2em;1.3em;1.4em;1.5em";
|
||||||
|
|
||||||
|
Here, "em" is the unit of line-height which you can change to "px","%" or any other allowed unit for line-height.
|
||||||
|
You can also change the numbers based on your requirements. You can have more range or low range , it all depends on your requirements.
|
Loading…
Reference in New Issue