mirror of
https://github.com/UnickSoft/graphonline.git
synced 2026-06-16 22:01:00 +00:00
first commit
This commit is contained in:
/usr/bin/nano
+113
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Configuration Helper plugin</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Configuration Helper Plugin for CKEditor</h1>
|
||||
|
||||
<h2>Introduction</h2>
|
||||
<p>This plugin tries to help setup <a href="http://www.ckeditor.com">CKEditor</a> by providing additional configuration options to perform some
|
||||
kind of common tasks.</p>
|
||||
<p>Currently if offers a "removeDialogFields" that allows to remove individual fields in the dialogs (versus removing whole tabs with
|
||||
<a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.removeDialogTabs">removeDialogTabs</a>, and "dialogFieldsDefaultValues"
|
||||
defines default values for dialog fields.</p>
|
||||
|
||||
<h3 id="contact">Author:</h3>
|
||||
<p><a href="mailto:amla70@gmail.com">Alfonso Martínez de Lizarrondo</a></p>
|
||||
|
||||
<h3>Version history: </h3>
|
||||
<ol>
|
||||
<li>1.0: 26-February-2012. First version.</li>
|
||||
<li>1.1: 16-February-2012. Added placeholder.</li>
|
||||
<li>1.2: 23-April-2012. Added hideDialogFields.</li>
|
||||
<li>1.3: 1-December-2012. Compatibility with CKEditor 4.</li>
|
||||
<li>1.4: 28-March-2013. Compatibility of the "placeholder" attribute with the inline mode of CKEditor 4.</li>
|
||||
<li>1.5: 16-April-2013. Version 1.4 was broken in CKEditor 3.</li>
|
||||
<li>1.6: 16-August-2013. Handle the setData method to update the "placeholder" status</li>
|
||||
</ol>
|
||||
|
||||
<h2>Installation</h2>
|
||||
<h3>1. Copying the files</h3>
|
||||
<p>Extract the contents of the zip in you plugins directory, so it ends up like
|
||||
this<br>
|
||||
<!--<img src="installation.png" alt="Screenshot of installation" width="311" height="346" longdesc="#install">-->
|
||||
</p>
|
||||
<pre id="--install">
|
||||
ckeditor\
|
||||
...
|
||||
images\
|
||||
lang\
|
||||
plugins\
|
||||
...
|
||||
confighelper\
|
||||
plugin.js
|
||||
docs\
|
||||
install.html
|
||||
...
|
||||
skins\
|
||||
themes\
|
||||
</pre>
|
||||
<h3>2. Adding it to CKEditor</h3>
|
||||
<p>Now add the plugin in your <em>config.js</em> or custom js configuration
|
||||
file:
|
||||
<code>config.extraPlugins='confighelper'; </code>
|
||||
</p>
|
||||
|
||||
<h3>3. Configuration</h3>
|
||||
<h4>config.removeDialogFields</h4>
|
||||
<p>This entry is a string, the fields are defined as dialogName + ":" + tab + ":" + field. Fields are joined with semicolons.
|
||||
In order to learn the name of the parameters you can use the "Developer Tools plugin", launch that sample and open the dialog that you want to customize.
|
||||
Now a little popup with appear showing the info about that field, for example:
|
||||
<pre><u>Element Information</u>
|
||||
Dialog window name : image
|
||||
Tab name : info
|
||||
Element ID : txtBorder
|
||||
Element type : text
|
||||
</pre>
|
||||
so in order to remove the class attribute for images the config is:
|
||||
<pre>config.removeDialogFields="image:info:txtBorder";</pre>
|
||||
removing another field
|
||||
<pre>config.removeDialogFields="image:info:txtBorder;image:info:txtHSpace";</pre>
|
||||
|
||||
<h4>config.dialogFieldsDefaultValues</h4>
|
||||
<p>This setting uses directly a JSON object as the configuration value, first an object that has the dialog names as properties, each property is
|
||||
a new object with the name of the tabs and finally each property name maps to the field name and it's value is the default value to use for the field.</p>
|
||||
<p>An example might be much better as I might have messed up something in the description:</p>
|
||||
<pre>config.dialogFieldsDefaultValues =
|
||||
{
|
||||
image:
|
||||
{
|
||||
advanced:
|
||||
{
|
||||
txtGenClass : 'myClass',
|
||||
txtGenTitle : 'Image title'
|
||||
}
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
|
||||
<h4>config.placeholder</h4>
|
||||
<p>This a text that will be shown when the editor is empty following the HTML5 placeholder attribute. When the user focus the editor, the content is
|
||||
cleared automatically.</p>
|
||||
<p>The value can be set in the configuration or as an attribute of the replaced element</p>
|
||||
<pre>config.placeholder = 'Type here...';</pre>
|
||||
|
||||
<h4>config.hideDialogFields</h4>
|
||||
<p>This entry uses the same sintax that the 'removeDialogFields' option. The difference is that some fields can't be removed easily as other parts of the dialog
|
||||
might not be ready and might try to always use it, generating a javascript error. In other cases the layout might be broken if the field is removed instead of hidden.<br>
|
||||
In those cases it's possible to hide the fields using this entry, and the preview in the image dialog is an example of such a field.</p>
|
||||
<pre>config.hideDialogFields="image:info:htmlPreview";</pre>
|
||||
|
||||
<!--
|
||||
<h2>Final notes</h2>
|
||||
-->
|
||||
|
||||
<h2>Disclaimers</h2>
|
||||
<p>CKEditor is © CKSource.com</p>
|
||||
</body>
|
||||
</html>
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 90%;
|
||||
}
|
||||
h1 {
|
||||
text-align:center;
|
||||
font-size:180%;
|
||||
}
|
||||
h2 {
|
||||
border-bottom:2px solid #CCC;
|
||||
margin:1em 0 0.4em 0;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom:0.4em;
|
||||
}
|
||||
p {
|
||||
margin:0 0 1em 1em;
|
||||
text-align:justify;
|
||||
}
|
||||
ol {
|
||||
margin:0 0 1.2em 1em;
|
||||
padding:0;
|
||||
list-style-type:none;
|
||||
}
|
||||
ol li {
|
||||
margin:0.2em 0;
|
||||
}
|
||||
pre, code {
|
||||
font-size:100%;
|
||||
font-family:"Courier New", Courier, mono;
|
||||
background-color: #CCCCCC;
|
||||
border:1px solid #999;
|
||||
padding:0.2em 1em;
|
||||
margin: 0.4em 0;
|
||||
display:block;
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
}
|
||||
form {
|
||||
margin:0 0 0 1em;
|
||||
}
|
||||
span.key {
|
||||
color: #006600;
|
||||
}
|
||||
#install {
|
||||
display:none
|
||||
}
|
||||
#languages ul {
|
||||
display:inline;
|
||||
list-style-type:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
#languages li {
|
||||
display:inline;
|
||||
margin:0;
|
||||
padding:0;
|
||||
vertical-align:bottom;
|
||||
}
|
||||
Executable
+365
@@ -0,0 +1,365 @@
|
||||
/*
|
||||
* @file Configuration helper plugin for CKEditor
|
||||
* Copyright (C) 2012 Alfonso Mart�nez de Lizarrondo
|
||||
*
|
||||
*/
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
// Check if the browser supports the placeholder attribute on textareas natively.
|
||||
var supportsPlaceholder = ('placeholder' in document.createElement( 'textarea' ) );
|
||||
|
||||
// If the data is "empty" (BR, P) or the placeholder then return an empty string.
|
||||
// Otherwise return the original data
|
||||
function dataIsEmpty( data )
|
||||
{
|
||||
if ( data.length > 20 )
|
||||
return false;
|
||||
|
||||
var value = data.replace( /[\n|\t]*/g, '' ).toLowerCase();
|
||||
if ( !value || value == '<br>' || value == '<p> <br></p>' || value == '<p><br></p>' || value == '<p> </p>' || value == ' ' || value == ' ' || value == ' <br>' || value == ' <br>' )
|
||||
return true;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function addPlaceholder(ev) {
|
||||
var editor = ev.editor;
|
||||
var root = (editor.editable ? editor.editable() : (editor.mode == 'wysiwyg' ? editor.document && editor.document.getBody() : editor.textarea ) );
|
||||
var placeholder = ev.listenerData;
|
||||
|
||||
if (editor.mode =='wysiwyg' )
|
||||
{
|
||||
// If the blur is due to a dialog, don't apply the placeholder
|
||||
if ( CKEDITOR.dialog._.currentTop )
|
||||
return;
|
||||
|
||||
if ( !root )
|
||||
return;
|
||||
|
||||
if ( dataIsEmpty( root.getHtml() ) )
|
||||
{
|
||||
root.setHtml( placeholder );
|
||||
root.addClass( 'placeholder' );
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if ( supportsPlaceholder )
|
||||
{
|
||||
if (ev.name=='mode')
|
||||
{
|
||||
root.setAttribute( 'placeholder', placeholder );
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if ( dataIsEmpty( root.getValue() ) )
|
||||
{
|
||||
root.setValue( placeholder );
|
||||
root.addClass( 'placeholder' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removePlaceholder(ev) {
|
||||
var editor = ev.editor;
|
||||
var root = (editor.editable ? editor.editable() : (editor.mode == 'wysiwyg' ? editor.document && editor.document.getBody() : editor.textarea ) );
|
||||
|
||||
if (editor.mode =='wysiwyg' )
|
||||
{
|
||||
if (!root.hasClass( 'placeholder' ))
|
||||
return;
|
||||
|
||||
root.removeClass( 'placeholder' );
|
||||
// fill it properly
|
||||
root.setHtml( (CKEDITOR.dtd[ root.getName() ]['p'] ? '<p> </p>' : ' ') );
|
||||
}
|
||||
else
|
||||
{
|
||||
if ( !root.hasClass( 'placeholder' ) )
|
||||
return;
|
||||
|
||||
root.removeClass( 'placeholder' );
|
||||
root.setValue( '' );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function getLang( element )
|
||||
{
|
||||
if (!element)
|
||||
return null;
|
||||
|
||||
return element.getAttribute( 'lang' ) || getLang( element.getParent() );
|
||||
}
|
||||
|
||||
|
||||
CKEDITOR.plugins.add( 'confighelper',
|
||||
{
|
||||
getPlaceholderCss : function()
|
||||
{
|
||||
return '.placeholder{ color: #999; }';
|
||||
},
|
||||
|
||||
onLoad : function()
|
||||
{
|
||||
// v4
|
||||
if (CKEDITOR.addCss)
|
||||
CKEDITOR.addCss( this.getPlaceholderCss() );
|
||||
},
|
||||
|
||||
init : function( editor )
|
||||
{
|
||||
|
||||
// correct focus status after switch mode
|
||||
editor.on( 'mode', function( ev ) {
|
||||
// Let's update to match reality
|
||||
ev.editor.focusManager.hasFocus = false;
|
||||
// Now focus it:
|
||||
});
|
||||
|
||||
// Placeholder - Start
|
||||
// Get the placeholder from the replaced element or from the configuration
|
||||
var placeholder = editor.element.getAttribute( 'placeholder' ) || editor.config.placeholder;
|
||||
|
||||
if (placeholder)
|
||||
{
|
||||
// CSS for WYSIWYG mode
|
||||
// v3
|
||||
if (editor.addCss)
|
||||
editor.addCss(this.getPlaceholderCss());
|
||||
|
||||
// CSS for textarea mode
|
||||
var node = CKEDITOR.document.getHead().append( 'style' );
|
||||
node.setAttribute( 'type', 'text/css' );
|
||||
var content = 'textarea.placeholder { color: #999; font-style: italic; }';
|
||||
|
||||
if ( CKEDITOR.env.ie )
|
||||
node.$.styleSheet.cssText = content;
|
||||
else
|
||||
node.$.innerHTML = content;
|
||||
|
||||
// Watch for the calls to getData to remove the placeholder
|
||||
editor.on( 'getData', function( ev ) {
|
||||
var element = (editor.editable ? editor.editable() : (editor.mode == 'wysiwyg' ? editor.document && editor.document.getBody() : editor.textarea ) );
|
||||
|
||||
if ( element && element.hasClass( 'placeholder' ) )
|
||||
ev.data.dataValue = '';
|
||||
});
|
||||
|
||||
// Watch for setData to remove placeholder class
|
||||
editor.on('setData', function(ev) {
|
||||
if ( CKEDITOR.dialog._.currentTop )
|
||||
return;
|
||||
|
||||
if ( editor.mode =='source' && supportsPlaceholder )
|
||||
return;
|
||||
|
||||
var root = (editor.editable ? editor.editable() : (editor.mode == 'wysiwyg' ? editor.document && editor.document.getBody() : editor.textarea ) );
|
||||
|
||||
if ( !root )
|
||||
return;
|
||||
|
||||
if ( !dataIsEmpty( ev.data.dataValue ) )
|
||||
{
|
||||
// Remove the class if new data is not empty
|
||||
if ( root.hasClass( 'placeholder' ) )
|
||||
root.removeClass( 'placeholder' );
|
||||
}
|
||||
else
|
||||
{
|
||||
// if data is empty, set it to the placeholder
|
||||
ev.data.dataValue = placeholder;
|
||||
root.addClass( 'placeholder' );
|
||||
}
|
||||
});
|
||||
|
||||
editor.on('blur', addPlaceholder, null, placeholder);
|
||||
editor.on('mode', addPlaceholder, null, placeholder);
|
||||
|
||||
editor.on('focus', removePlaceholder);
|
||||
editor.on('beforeModeUnload', removePlaceholder);
|
||||
} // Placeholder - End
|
||||
|
||||
|
||||
// SCAYT lang from element lang:
|
||||
var lang = editor.config.contentsLanguage || getLang( editor.element );
|
||||
if ( lang && ! editor.config.scayt_sLang )
|
||||
{
|
||||
// Convert from HTML5 Lang to spellchecker.net values
|
||||
var map = {
|
||||
'en' : 'en_US',
|
||||
'en-us': 'en_US',
|
||||
'en-gb': 'en_GB',
|
||||
'pt-br': 'pt_BR',
|
||||
'da' : 'da_DK',
|
||||
'da-dk': 'da_DK',
|
||||
'nl-nl': 'nl_NL',
|
||||
'en-ca': 'en_CA',
|
||||
'fi-fi': 'fi_FI',
|
||||
'fr' : 'fr_FR',
|
||||
'fr-fr': 'fr_FR',
|
||||
'fr-ca': 'fr_CA',
|
||||
'de' : 'de_DE',
|
||||
'de-de': 'de_DE',
|
||||
'el-gr': 'el_GR',
|
||||
'it' : 'it_IT',
|
||||
'it-it': 'it_IT',
|
||||
'nb-no': 'nb_NO',
|
||||
'pt' : 'pt_PT',
|
||||
'pt-pt': 'pt_PT',
|
||||
'es' : 'es_ES',
|
||||
'es-es': 'es_ES',
|
||||
'sv-se': 'sv_SE'
|
||||
};
|
||||
editor.config.scayt_sLang = map[ lang.toLowerCase() ];
|
||||
}
|
||||
|
||||
// Parse the config to turn it into a js object
|
||||
// format= dialogName:tabName:fieldName
|
||||
var parseDefinitionToObject = function ( value )
|
||||
{
|
||||
// Allow JSON definitions
|
||||
if (typeof value == 'object')
|
||||
return value;
|
||||
|
||||
var contents = value.split( ';' ),
|
||||
tabsToProcess = {},
|
||||
i;
|
||||
|
||||
for ( i = 0; i < contents.length; i++ )
|
||||
{
|
||||
var parts = contents[ i ].split( ':' );
|
||||
if ( parts.length == 3 )
|
||||
{
|
||||
var dialogName = parts[ 0 ],
|
||||
tabName = parts[ 1 ],
|
||||
fieldName = parts[ 2 ];
|
||||
|
||||
if ( !tabsToProcess[ dialogName ] )
|
||||
tabsToProcess[ dialogName ] = {};
|
||||
if ( !tabsToProcess[ dialogName ][ tabName ] )
|
||||
tabsToProcess[ dialogName ][ tabName ] = [];
|
||||
|
||||
tabsToProcess[ dialogName ][ tabName ].push( fieldName );
|
||||
}
|
||||
}
|
||||
return tabsToProcess;
|
||||
};
|
||||
|
||||
// Customize dialogs:
|
||||
CKEDITOR.on( 'dialogDefinition', function( ev )
|
||||
{
|
||||
if ( editor != ev.editor )
|
||||
return;
|
||||
|
||||
var dialogName = ev.data.name,
|
||||
dialogDefinition = ev.data.definition,
|
||||
tabsToProcess,
|
||||
i, name, fields, tab;
|
||||
|
||||
if (dialogName=='tableProperties')
|
||||
dialogName=='table';
|
||||
|
||||
// Parse the config to turn it into a js object
|
||||
if ( !( 'removeDialogFields' in editor._ ) && editor.config.removeDialogFields )
|
||||
editor._.removeDialogFields = parseDefinitionToObject( editor.config.removeDialogFields );
|
||||
|
||||
// Remove fields of this dialog.
|
||||
if ( editor._.removeDialogFields && ( tabsToProcess = editor._.removeDialogFields[ dialogName ] ) )
|
||||
{
|
||||
for ( name in tabsToProcess )
|
||||
{
|
||||
fields = tabsToProcess[ name ];
|
||||
tab = dialogDefinition.getContents( name );
|
||||
|
||||
for ( i=0; i<fields.length ; i++ )
|
||||
tab.remove( fields[ i ] );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if ( !( 'hideDialogFields' in editor._ ) && editor.config.hideDialogFields )
|
||||
editor._.hideDialogFields = parseDefinitionToObject( editor.config.hideDialogFields );
|
||||
|
||||
// Remove fields of this dialog.
|
||||
if ( editor._.hideDialogFields && ( tabsToProcess = editor._.hideDialogFields[ dialogName ] ) )
|
||||
{
|
||||
for ( name in tabsToProcess )
|
||||
{
|
||||
fields = tabsToProcess[ name ];
|
||||
tab = dialogDefinition.getContents( name );
|
||||
|
||||
for ( i=0; i<fields.length ; i++ )
|
||||
tab.get( fields[ i ] ).hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Set default values.
|
||||
if ( editor.config.dialogFieldsDefaultValues && ( tabsToProcess = editor.config.dialogFieldsDefaultValues[ dialogName ] ) )
|
||||
{
|
||||
for ( name in tabsToProcess )
|
||||
{
|
||||
fields = tabsToProcess[ name ];
|
||||
tab = dialogDefinition.getContents( name );
|
||||
|
||||
for ( var fieldName in fields )
|
||||
{
|
||||
var dialogField = tab.get( fieldName );
|
||||
if ( dialogField )
|
||||
dialogField[ 'default' ] = fields[ fieldName ];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
} );
|
||||
|
||||
})();
|
||||
|
||||
/**
|
||||
* Allows to define which dialog fiels must be removed
|
||||
* @name CKEDITOR.config.removeDialogFields
|
||||
* @type {String}
|
||||
* @example
|
||||
* editor.config.removeDialogFields = "image:info:txtBorder;image:info:txtHSpace";
|
||||
*/
|
||||
|
||||
/**
|
||||
* Allows to define which dialog fiels must be hidden
|
||||
* @name CKEDITOR.config.hideDialogFields
|
||||
* @type {String}
|
||||
* @example
|
||||
* editor.config.hideDialogFields = "image:info:htmlPreview";
|
||||
*/
|
||||
|
||||
/**
|
||||
* Allows to define default values for dialog fields
|
||||
* @name CKEDITOR.config.dialogFieldsDefaultValues
|
||||
* @type {Object}
|
||||
* @example
|
||||
config.dialogFieldsDefaultValues =
|
||||
{
|
||||
image:
|
||||
{
|
||||
advanced:
|
||||
{
|
||||
txtGenClass : 'myClass',
|
||||
txtGenTitle : 'Image title'
|
||||
}
|
||||
}
|
||||
};
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Placeholder text for empty editor
|
||||
* @name CKEDITOR.config.placeholder
|
||||
* @type {String}
|
||||
* @example
|
||||
* editor.config.placeholder = "Please, type here...";
|
||||
*/
|
||||
Reference in New Issue
Block a user