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.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