mirror of
https://github.com/UnickSoft/graphonline.git
synced 2026-04-19 22:50:22 +00:00
first commit
This commit is contained in:
/usr/bin/nano
93
lib/ckeditor4/plugins/htmlbuttons/docs/install.html
Executable file
93
lib/ckeditor4/plugins/htmlbuttons/docs/install.html
Executable file
@@ -0,0 +1,93 @@
|
||||
<!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>HTML Buttons plugin</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>HTML Buttons Plugin for CKEditor</h1>
|
||||
|
||||
<h2>Introduction</h2>
|
||||
<p>This is plugin helps creating custom buttons to insert a block of desired HTML in <a href="http://www.ckeditor.com">CKEditor</a>.</p>
|
||||
<p>Sample icons from <a href='http://tango.freedesktop.org'>Tango!</a></p>
|
||||
|
||||
<h3 id="contact">Author:</h3>
|
||||
<p><a href="mailto:amla70@gmail.com">Alfonso Martínez de Lizarrondo</a></p>
|
||||
<h3>Sponsored by:</h3>
|
||||
<h3>Version history: </h3>
|
||||
<ol>
|
||||
<li>1.0: 23-May-2012. First version.</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\
|
||||
...
|
||||
htmlbuttons\
|
||||
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='htmlbuttons'; </code>
|
||||
</p>
|
||||
|
||||
<h3>3. Define your buttons</h3>
|
||||
<p>You must add to your config a new entry defining the buttons that you want to use. For example:</p>
|
||||
<pre>
|
||||
config.htmlbuttons = [
|
||||
{
|
||||
name:'button1',
|
||||
icon:'icon1.png',
|
||||
html:'<a href="http://www.google.com">Search something</a>',
|
||||
title:'A link to Google'
|
||||
},
|
||||
{
|
||||
name:'button2',
|
||||
icon:'icon2.png',
|
||||
html:'<table><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></table>',
|
||||
title:'A simple table'
|
||||
},
|
||||
{
|
||||
name:'button3',
|
||||
icon:'icon3.png',
|
||||
html:'<ol><li>Item 1 <ol><li>Sub item 1</li><li>Sub item 2</li></ol></li></ol>',
|
||||
title:'A nested list'
|
||||
}
|
||||
];
|
||||
</pre>
|
||||
|
||||
<h3>4. Add them to your toolbar</h3>
|
||||
<p>In your toolbar configuration, add a new button for each item in the place where you want the list to show up.</p>
|
||||
<p>Example</p>
|
||||
<pre>config.toolbar_Basic = [["Bold","Italic","-","NumberedList","BulletedList","-","Link","Unlink","-","Maximize", "About", '-', 'button1', 'button2', 'button3']];
|
||||
</pre>
|
||||
|
||||
<h3>5. Use them</h3>
|
||||
<p>Now empty the cache of your browser and reload the editor, the new buttons should show up and you can insert the HTML that you have configured with each button</p>
|
||||
<!--
|
||||
<h2>Final notes</h2>
|
||||
-->
|
||||
|
||||
<h2>Disclaimers</h2>
|
||||
<p>CKEditor is © CKSource.com</p>
|
||||
<p>Sample icons from <a href='http://tango.freedesktop.org'>Tango!</a></p>
|
||||
</body>
|
||||
</html>
|
||||
59
lib/ckeditor4/plugins/htmlbuttons/docs/styles.css
Executable file
59
lib/ckeditor4/plugins/htmlbuttons/docs/styles.css
Executable file
@@ -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;
|
||||
}
|
||||
BIN
lib/ckeditor4/plugins/htmlbuttons/icon1.png
Executable file
BIN
lib/ckeditor4/plugins/htmlbuttons/icon1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 827 B |
BIN
lib/ckeditor4/plugins/htmlbuttons/icon2.png
Executable file
BIN
lib/ckeditor4/plugins/htmlbuttons/icon2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 767 B |
BIN
lib/ckeditor4/plugins/htmlbuttons/icon3.png
Executable file
BIN
lib/ckeditor4/plugins/htmlbuttons/icon3.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 819 B |
71
lib/ckeditor4/plugins/htmlbuttons/plugin.js
Executable file
71
lib/ckeditor4/plugins/htmlbuttons/plugin.js
Executable file
@@ -0,0 +1,71 @@
|
||||
/*
|
||||
* @file HTML Buttons plugin for CKEditor
|
||||
* Copyright (C) 2012 Alfonso Mart<72>nez de Lizarrondo
|
||||
* A simple plugin to help create custom buttons to insert HTML blocks
|
||||
*/
|
||||
|
||||
CKEDITOR.plugins.add( 'htmlbuttons',
|
||||
{
|
||||
init : function( editor )
|
||||
{
|
||||
var buttonsConfig = editor.config.htmlbuttons;
|
||||
if (!buttonsConfig)
|
||||
return;
|
||||
|
||||
function createCommand( definition )
|
||||
{
|
||||
return {
|
||||
exec: function( editor ) {
|
||||
editor.insertHtml( definition.html );
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Create the command for each button
|
||||
for(var i=0; i<buttonsConfig.length; i++)
|
||||
{
|
||||
var button = buttonsConfig[ i ];
|
||||
var commandName = button.name;
|
||||
editor.addCommand( commandName, createCommand(button, editor) );
|
||||
|
||||
editor.ui.addButton( commandName,
|
||||
{
|
||||
label : button.title,
|
||||
command : commandName,
|
||||
icon : this.path + button.icon
|
||||
});
|
||||
}
|
||||
} //Init
|
||||
|
||||
} );
|
||||
|
||||
/**
|
||||
* An array of buttons to add to the toolbar.
|
||||
* Each button is an object with these properties:
|
||||
* name: The name of the command and the button (the one to use in the toolbar configuration)
|
||||
* icon: The icon to use. Place them in the plugin folder
|
||||
* html: The HTML to insert when the user clicks the button
|
||||
* title: Title that appears while hovering the button
|
||||
*
|
||||
* Default configuration with some sample buttons:
|
||||
*/
|
||||
CKEDITOR.config.htmlbuttons = [
|
||||
{
|
||||
name:'button1',
|
||||
icon:'icon1.png',
|
||||
html:'<a href="http://www.google.com">Search something</a>',
|
||||
title:'A link to Google'
|
||||
},
|
||||
{
|
||||
name:'button2',
|
||||
icon:'icon2.png',
|
||||
html:'<table style="min-width:200px"><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></table>',
|
||||
title:'A simple table'
|
||||
},
|
||||
{
|
||||
name:'button3',
|
||||
icon:'icon3.png',
|
||||
html:'<ol><li>Item 1 <ol><li>Sub item 1</li><li>Sub item 2</li></ol></li></ol>',
|
||||
title:'A nested list'
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user