From: Benoît Pin <pin@cri.ensmp.fr>
Date: Thu, 18 Aug 2011 12:20:04 +0000 (+0200)
Subject: Début d'intégration de la boît de dialogue d'image de Plinn. Pour l'instant, on affic...
X-Git-Tag: 3.6.1~11
X-Git-Url: https://scm.cri.minesparis.psl.eu/git/ckeditor.git/commitdiff_plain/07784b9fcc5174d9d31afdd13d6921c82eaaabaf?ds=sidebyside
Début d'intégration de la boît de dialogue d'image de Plinn. Pour l'instant, on affiche 3 × rien.
---
diff --git a/skins/ckeditor/plugins/plinn_image/connectors/plinn/connector.py b/skins/ckeditor/plugins/plinn_image/connectors/plinn/connector.py
new file mode 100644
index 0000000..9c0deb8
--- /dev/null
+++ b/skins/ckeditor/plugins/plinn_image/connectors/plinn/connector.py
@@ -0,0 +1,54 @@
+##parameters=command, path, file='', Type='', redirUrl=''
+
+from Products.CMFCore.utils import getToolByName
+
+def replaceXMLEntities(text) :
+ for c, ent in (('<', '<'), ('>', '>'), ('&', '&')) :
+ text = text.replace(c, ent)
+ return text
+
+utool = getToolByName(context, 'portal_url')
+atool = getToolByName(context, 'portal_attachment')
+
+portal = utool.getPortalObject()
+
+ob = portal
+path = path.strip('/')
+
+ob = portal
+path = path.strip('/')
+
+for name in path.split('/') :
+ ob = getattr(ob, name)
+
+if command == 'ls':
+ attachments = atool.getAttachmentsFor(ob)
+ attachments = attachments.objectValues()
+
+ print '<ls>'
+ for o in attachments :
+ size = o.getThumbnailSize()
+ row = '<row previewUrl="%(previewUrl)s" url="%(url)s" meta_type="%(meta_type)s" width="%(width)d" height="%(height)d">%(title)s</row>' % {
+ 'previewUrl' : '%s/getThumbnail' % o.absolute_url(),
+ 'url' : 'attachments/%s' % o.getId(),
+ 'meta_type' : o.meta_type,
+ 'title' : replaceXMLEntities(o.title_or_id()),
+ 'width' : size['width'],
+ 'height' : size['height']
+ }
+ print row
+ print '</ls>'
+
+if command == 'upload' :
+ atool.uploadAttachmentFor(ob, file, typeName=Type)
+ return context.REQUEST.RESPONSE.redirect(redirUrl);
+
+if command == 'rm' :
+ ob = context.restrictedTraverse(path)
+ parent = ob.getParentNode()
+ parent.manage_delObjects(ob.getId())
+ print '<done/>'
+
+
+context.REQUEST.RESPONSE.setHeader('content-type', 'text/xml; charset=utf-8')
+return printed
\ No newline at end of file
diff --git a/skins/ckeditor/plugins/plinn_image/dialog/embedded_images.html.pt b/skins/ckeditor/plugins/plinn_image/dialog/embedded_images.html.pt
new file mode 100644
index 0000000..0efdcdd
--- /dev/null
+++ b/skins/ckeditor/plugins/plinn_image/dialog/embedded_images.html.pt
@@ -0,0 +1,175 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+ <meta http-equiv="content-type" content="text/html;charset=utf-8" />
+ <title>Embedded images</title>
+ <style type="text/css" media="screen">
+ a, a:hover, a:active, a:visited {
+ text-decoration:none;
+ color:#369;
+ }
+
+ #slides {
+ margin-top: 1em;
+ }
+
+ .lightbox span {
+ width: 222px;
+ height: 222px;
+ display:block;
+ float:left;
+ margin-left:1px;
+ margin-top:1px;
+ }
+
+ .lightbox a.slide {
+ position:absolute;
+ display:block;
+ width: 222px;
+ height: 222px;
+ border: 1px solid #ddd;
+ }
+
+ .lightbox .slide img {
+ position:absolute;
+ border: 1px solid black;
+ }
+
+ .lightbox span.button {
+ background:none;
+ position: relative;
+ }
+
+ .lightbox span[class].button {
+ visibility:hidden;
+ }
+
+ .lightbox span:hover span.button {
+ visibility:visible;
+ }
+
+ </style>
+ <script type="text/javascript" language="javascript" charset="utf-8" src="epoz_script_detect.js"></script>
+ <script type="text/javascript" language="javascript" charset="utf-8" src="javascript_events_api.js"></script>
+ <script type="text/javascript" language="javascript" charset="utf-8" src="sarissa.js"></script>
+ <script type="text/javascript" language="javascript" charset="utf-8" src="DHTMLapi.js"></script>
+ <script type="text/javascript">
+ // <!--
+ var FCK = window.parent.FCK;
+ var contentPath = FCK.Config.contentPath;
+
+ var FCKConfig = window.parent.FCKConfig;
+ var connUrl = FCKConfig.AttachmentBrowserConnectorUrl;
+ var imagesPath = 'images/';
+
+ var slide_size = 222;
+
+ function _initBrowser(){
+ var form = document.getElementById('uploadAttachmentForm');
+ form.elements['path'].value = contentPath;
+ var loc = window.location;
+ form.elements['redirUrl'].value = loc.protocol + '//' + loc.host + loc.pathname;
+ form.action = connUrl;
+ addListener(document.getElementById('slides'), 'click', handleClick)
+ importAttachments();
+ }
+
+ function importAttachments() {
+ var req = new XMLHttpRequest();
+ req.open("POST", connUrl, false); // synchrone
+ req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
+ req.send("command=ls&path="+escape(contentPath));
+ var respDom = req.responseXML.documentElement;
+
+ var rows = respDom.getElementsByTagName('row');
+ var row, img, slide, a;
+ var slides = document.getElementById('slides');
+
+ for (var i = 0 ; i<rows.length ; i++)
+ addControlThumbnail(rows[i], slides);
+ }
+
+ function addControlThumbnail(row, dest) {
+ var slide = document.createElement('span');
+
+ var a = document.createElement('a');
+ a.href = row.getAttribute('url');
+ a.className = 'slide';
+
+ var img = document.createElement('img');
+ img.src = row.getAttribute('previewUrl');
+ img.width = row.getAttribute('width');
+ img.height = row.getAttribute('height');
+ img.style.marginTop = (slide_size - parseInt(img.height)) / 2 + 'px';
+ img.style.marginLeft = (slide_size - parseInt(img.width)) / 2 + 'px';
+ img.border = 0;
+
+ a.appendChild(img);
+ slide.appendChild(a);
+ dest.appendChild(slide);
+
+ var spanButton = document.createElement('span');
+ spanButton.className = 'button';
+ var a = document.createElement('a');
+ a.href = '#';
+ a.text = "Supprimer";
+ a.name = 'suppr';
+ spanButton.appendChild(a);
+ slide.appendChild(spanButton);
+
+ var spanButtonWidth = getObjectWidth(a);
+ var spanButtonHeight = getObjectHeight(a);
+ spanButton.style.width = spanButtonWidth + 'px';
+ spanButton.style.height = spanButtonHeight + 'px';
+ spanButton.style.top = slide_size - spanButtonHeight - 3 + 'px';
+ spanButton.style.left = slide_size - spanButtonWidth - 3 + 'px';
+ }
+
+ function handleClick(evt) {
+ var target = getTargetedObject(evt);
+ disableDefault(evt);
+ disablePropagation(evt);
+ switch (target.tagName) {
+ case 'IMG' :
+ var a = target.parentNode;
+ window.parent.updateOrInsertImage(a.getAttribute('href', 2));
+ break;
+ case 'A' :
+ if (target.name == 'suppr')
+ var a = target.parentNode.parentNode.getElementsByTagName('a')[0];
+ var href = a.getAttribute('href', 2);
+ var imgPath = window.parent.editor.FCKConfig.EditorPath + href;
+
+ var req = new XMLHttpRequest();
+ req.open("POST", connUrl, false); // synchrone
+ req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
+ req.send("command=rm&path="+escape(imgPath));
+ var doc = req.responseXML.documentElement;
+ if (doc.tagName == 'done') {
+ var slide = target.parentNode.parentNode;
+ slide.parentNode.removeChild(slide);
+ }
+ }
+
+ }
+
+ addListener(window, 'load', _initBrowser);
+ // -->
+ </script>
+ </head>
+
+ <body i18n:domain="plinn">
+ <form id="uploadAttachmentForm" action="." method="post" enctype="multipart/form-data">
+ <input type="file" name="file"/>
+ <input type="hidden" name="path" value="" />
+ <input type="hidden" name="command" value="upload" />
+ <input type="hidden" name="Type" value="Photo" />
+ <input type="hidden" name="redirUrl" value="">
+ <input type="submit" name="upload" value="Upload" i18n:attributes="value"/>
+ </form>
+ <div id="slides" class="lightbox"></div>
+ </body>
+</html>
+
diff --git a/skins/ckeditor/plugins/plinn_image/dialog/plinn_image.html.pt b/skins/ckeditor/plugins/plinn_image/dialog/plinn_image.html.pt
new file mode 100644
index 0000000..cc5dcf1
--- /dev/null
+++ b/skins/ckeditor/plugins/plinn_image/dialog/plinn_image.html.pt
@@ -0,0 +1 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Image selector</title>
<script type="text/javascript" language="javascript" charset="utf-8" src="epoz_script_detect.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="javascript_events_api.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="sarissa.js"></script>
<!--<script type="text/javascript" src="plinn_image.js"></script>-->
</head>
<frameset rows="27,*" border="0" frameborder="no" framespacing="0">
<frame name="tabs" src="about:blank" noresize="noresize" scrolling="no" />
<frame name="main" src="about:blank" />
<noframes><body></body></noframes>
</frameset>
</html>
\ No newline at end of file
diff --git a/skins/ckeditor/plugins/plinn_image/dialog/plinn_image.js b/skins/ckeditor/plugins/plinn_image/dialog/plinn_image.js
new file mode 100644
index 0000000..424024a
--- /dev/null
+++ b/skins/ckeditor/plugins/plinn_image/dialog/plinn_image.js
@@ -0,0 +1,42 @@
+// (c) Benoît PIN 2006-2007
+// http://plinn.org
+// Licence GPL
+
+var editor = window.dialogArguments.editor;
+var FCK = editor.FCK ;
+var FCKLang = editor.FCKLang ;
+var FCKConfig = editor.FCKConfig ;
+var FCKPlugins = editor.FCKPlugins;
+var FCKDebug = editor.FCKDebug ;
+
+window.onload = function() {
+ var mainFrame = window.frames['main'];
+ mainFrame.src = FCKPlugins.Items['image'].Path + 'embedded_images.html';
+ mainFrame.location.href = mainFrame.src;
+
+ var tabsFrame = window.frames['tabs'];
+ tabsFrame.src = FCKPlugins.Items['image'].Path + 'plinn_image_tabs.html'
+ tabsFrame.location.href = FCKPlugins.Items['image'].Path + 'plinn_image_tabs.html'
+}
+
+function updateOrInsertImage(url) {
+ var getSizeUrl = url + '/getResizedImageSize';
+ var req = new XMLHttpRequest();
+ req.open("POST", getSizeUrl, false); // synchrone
+ req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
+ var boxSize = FCKConfig.ImageMaxDefaultDimension + '_' + FCKConfig.ImageMaxDefaultDimension;
+ req.send("asXml:boolean=True&size=" + boxSize);
+ var doc = req.responseXML.documentElement;
+
+ var width = doc.getElementsByTagName('width')[0].firstChild.nodeValue;
+ var height = doc.getElementsByTagName('height')[0].firstChild.nodeValue;
+
+
+ var img = FCK.CreateElement('img');
+ img.src = url + '/getResizedImage?size=' + boxSize;
+ img.width = width;
+ img.height = height;
+
+ //FCK.InsertElement(img);
+ window.close();
+}
\ No newline at end of file
diff --git a/skins/ckeditor/plugins/plinn_image/dialog/plinn_image_tabs.html.pt b/skins/ckeditor/plugins/plinn_image/dialog/plinn_image_tabs.html.pt
new file mode 100644
index 0000000..4beb51a
--- /dev/null
+++ b/skins/ckeditor/plugins/plinn_image/dialog/plinn_image_tabs.html.pt
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+ <meta http-equiv="content-type" content="text/html;charset=utf-8" />
+ <title>Image tabs options</title>
+ <style>
+ <!--
+ body {
+ margin:0;
+ padding:0;
+ }
+ ul {
+ border-bottom:2px solid #DDDDDD;
+ border-collapse:collapse;
+ margin:0pt;
+ padding-left:1em;
+ white-space:nowrap;
+ position:absolute;
+ bottom:0;
+ width:100%;
+ }
+ li {
+ display:inline;
+ font-family: Arial,Helvetica,Geneva,Swiss,SunSans-Regular,sans-serif;
+ font-size:90%;
+ }
+ a {
+ text-decoration:none;
+ }
+ a, a:visited {
+ background-color:#fff;
+ border-left:1px dashed #ddd;
+ border-right:1px dashed #ddd;
+ border-top:1px dashed #ddd;
+ color:#369;
+ margin-right:0.5em;
+ padding:0pt 1em;
+ }
+ a:hover, a:active {
+ background-color:#ddd;
+ color:#369;
+ }
+ .selected a, .selected a:visited, .selected a:hover {
+ background-color:#FFFFFF;
+ border-color:#ddd rgb(221, 221, 221) rgb(255, 255, 255);
+ border-style:solid;
+ border-width:2px 2px 3px;
+ color:#336699;
+ }
+ -->
+ </style>
+
+ <script type="text/javascript" language="javascript" charset="utf-8" src="epoz_script_detect.js"></script>
+ <script type="text/javascript" language="javascript" charset="utf-8" src="javascript_events_api.js"></script>
+ <script type="text/javascript">
+ // <!--
+ var tabs = [];
+ function initTabs() {
+ var FCKPlugins = window.parent.FCKPlugins;
+
+ tabs = document.getElementsByTagName('a');
+ tabs[0].href = FCKPlugins.Items['image'].Path + 'embedded_images.html';
+ tabs[1].href = window.parent.FCKConfig.ImageBrowserURL;
+ addListener(document, 'click', updateTabs)
+ };
+ addListener(window, 'load', initTabs);
+
+ function updateTabs(evt) {
+ var t = getTargetedObject(evt);
+ if (t.tagName == 'A') {
+ for (var i=0 ; i<tabs.length ; i++) {
+ if (t == tabs[i])
+ tabs[i].parentNode.className = 'selected';
+ else
+ tabs[i].parentNode.className = '';
+ }
+ t.blur();
+ }
+ }
+ // -->
+ </script>
+ </head>
+
+ <body>
+ <ul>
+ <li class="selected"><a href="." target="main">Images du document</a></li>
+ <li><a href="." target="main">Images du site</a></li>
+ </ul>
+ </body>
+</html>
+
diff --git a/skins/ckeditor/plugins/plinn_image/plugin.js b/skins/ckeditor/plugins/plinn_image/plugin.js
index 442a2be..17658a9 100644
--- a/skins/ckeditor/plugins/plinn_image/plugin.js
+++ b/skins/ckeditor/plugins/plinn_image/plugin.js
@@ -23,6 +23,19 @@ function updateImageSizeUrlParameters(img) {
}
}
+function openPlinnImageDialog(path, editor) {
+ var winOptions = "location=no,menubar=no,toolbar=no,dependent=yes,dialog=yes,minimizable=no,modal=yes,alwaysRaised=yes" +
+ ",resizable=yes" +
+ ",width=801" +
+ ",height=600";
+ //",top=" + iTop +
+ //",left=" + iLeft ;
+
+ var win = open(path + 'dialog/plinn_image.html', 'PlinnImageDialog', winOptions);
+ win.dialogArguments = new Object();
+ win.dialogArguments.editor = editor;
+}
+
CKEDITOR.plugins.add( 'plinn_image',
{
@@ -42,21 +55,18 @@ CKEDITOR.plugins.add( 'plinn_image',
}
);
});
-
+ var pluginPath = this.path;
var command = editor.addCommand('plinn_image',
{
- exec : function(editor) {
- alert('Bonjour la France !');
- }
+ exec : function(editor){openPlinnImageDialog(pluginPath, editor);}
});
editor.ui.addButton('PlinnImage',
{
label : editor.lang.common.image,
- icon : this.path + 'dialog/plinn_image.gif',
+ icon : pluginPath + 'dialog/plinn_image.gif',
command : 'plinn_image'
});
- console.log(this.path);
}
});