Replaced the FCKeditor with the new CKeditor v4. Implemented a plugin that allows dragging and dropping one or more files into the CKeditor - plugin name is dndfiles. Modified the save toolbar button on the CKeditor so that it behaves like a submit button. Implemented a timestamp plugin that behaves the same way as the old timestamp button on FCKeditor. Added a plugin to the CKeditor that allows typing LaTeX syntax.
This commit is contained in:
Dario Milicic
+66
@@ -0,0 +1,66 @@
|
||||
<!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>Image paste plugin</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Image paste Plugin for CKEditor</h1>
|
||||
|
||||
<h2>Introduction</h2>
|
||||
<p>This is a plugin that automatically uploads to the server the images pasted from the clipboard with Firefox in <a href="http://www.ckeditor.com">CKEditor</a>.</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: 28-September-2011. First public version.</li>
|
||||
<li>1.1: 7-October-2013. Compatibility with CKEditor 4. Sorry to everyone that has tried to use it before, but I didn't realize that it was broken all along as it's a simple fix that I did long ago in the commercial version.<br>
|
||||
At the same time, I'm removing the useless "webkit-fake-url" crap that Safari generates but that it can't be used for anything.</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\
|
||||
...
|
||||
imagepaste\
|
||||
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='imagepaste'; </code>
|
||||
</p>
|
||||
|
||||
<h3>3. Configuration</h3>
|
||||
<p>You have to configure the filebrowserImageUploadUrl entry as you might have already done to allow the user to upload images. You can get a simple script to use as a guide for your code <a href="http://alfonsoml.blogspot.com.es/2013/08/a-basic-upload-script-for-ckeditor.html">in this post in my blog</a>.</p>
|
||||
|
||||
<h3>4. Use it</h3>
|
||||
<p>Using Firefox, paste an image into the body of CKEditor. That image will be uploaded to the server and it will use the correct URL instead of "data:".</p>
|
||||
|
||||
<!--
|
||||
<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;
|
||||
}
|
||||
+95
@@ -0,0 +1,95 @@
|
||||
/*
|
||||
* @file image paste plugin for CKEditor
|
||||
Feature introduced in: https://bugzilla.mozilla.org/show_bug.cgi?id=490879
|
||||
doesn't include images inside HTML (paste from word): https://bugzilla.mozilla.org/show_bug.cgi?id=665341
|
||||
* Copyright (C) 2011-13 Alfonso Martínez de Lizarrondo
|
||||
*
|
||||
* == BEGIN LICENSE ==
|
||||
*
|
||||
* Licensed under the terms of any of the following licenses at your
|
||||
* choice:
|
||||
*
|
||||
* - GNU General Public License Version 2 or later (the "GPL")
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*
|
||||
* - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
|
||||
* http://www.gnu.org/licenses/lgpl.html
|
||||
*
|
||||
* - Mozilla Public License Version 1.1 or later (the "MPL")
|
||||
* http://www.mozilla.org/MPL/MPL-1.1.html
|
||||
*
|
||||
* == END LICENSE ==
|
||||
*
|
||||
*/
|
||||
|
||||
// Handles image pasting in Firefox
|
||||
CKEDITOR.plugins.add( 'imagepaste',
|
||||
{
|
||||
init : function( editor )
|
||||
{
|
||||
|
||||
// Paste from clipboard:
|
||||
editor.on( 'paste', function(e) {
|
||||
var data = e.data,
|
||||
html = (data.html || ( data.type && data.type=='html' && data.dataValue));
|
||||
if (!html)
|
||||
return;
|
||||
|
||||
// strip out webkit-fake-url as they are useless:
|
||||
if (CKEDITOR.env.webkit && (html.indexOf("webkit-fake-url")>0) )
|
||||
{
|
||||
alert("Sorry, the images pasted with Safari aren't usable");
|
||||
window.open("https://bugs.webkit.org/show_bug.cgi?id=49141");
|
||||
html = html.replace( /<img src="webkit-fake-url:.*?">/g, "");
|
||||
}
|
||||
|
||||
// Replace data: images in Firefox and upload them
|
||||
html = html.replace( /<img src="data:image\/png;base64,.*?" alt="">/g, function( img )
|
||||
{
|
||||
var data = img.match(/"data:image\/png;base64,(.*?)"/)[1];
|
||||
var id = CKEDITOR.tools.getNextId();
|
||||
|
||||
var url= editor.config.filebrowserImageUploadUrl + '&CKEditor=' + editor.name + '&CKEditorFuncNum=2&langCode=' + editor.langCode;
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.open("POST", url);
|
||||
xhr.onload = function() {
|
||||
// Upon finish, get the url and update the file
|
||||
var imageUrl = xhr.responseText.match(/2,\s*'(.*?)',/)[1];
|
||||
var theImage = editor.document.getById( id );
|
||||
theImage.data( 'cke-saved-src', imageUrl);
|
||||
theImage.setAttribute( 'src', imageUrl);
|
||||
theImage.removeAttribute( 'id' );
|
||||
}
|
||||
|
||||
// Create the multipart data upload. Is it possible somehow to use FormData instead?
|
||||
var BOUNDARY = "---------------------------1966284435497298061834782736";
|
||||
var rn = "\r\n";
|
||||
var req = "--" + BOUNDARY;
|
||||
|
||||
req += rn + "Content-Disposition: form-data; name=\"upload\"";
|
||||
|
||||
var bin = window.atob( data );
|
||||
// add timestamp?
|
||||
req += "; filename=\"" + id + ".png\"" + rn + "Content-type: image/png";
|
||||
|
||||
req += rn + rn + bin + rn + "--" + BOUNDARY;
|
||||
|
||||
req += "--";
|
||||
|
||||
xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + BOUNDARY);
|
||||
xhr.sendAsBinary(req);
|
||||
|
||||
return img.replace(/>/, ' id="' + id + '">')
|
||||
|
||||
});
|
||||
|
||||
if (e.data.html)
|
||||
e.data.html = html;
|
||||
else
|
||||
e.data.dataValue = html;
|
||||
});
|
||||
|
||||
} //Init
|
||||
} );
|
||||
Reference in New Issue
Block a user