PloneLink plugin

integration with plonefinder

also added SourceEditing

Author: gotcha

src/collective/ckeditor/browser/ckeditor5/main.js

@@ -33,6 +33,7 @@ import {
 	Mention,
 	Paragraph,
 	SimpleUploadAdapter,
+        SourceEditing,
 	Table,
 	TableCaption,
 	TableCellProperties,
@@ -44,6 +45,8 @@ import {
 	Underline
 } from 'ckeditor5';
 
+import PloneLink from 'plonelink';
+
 /**
  * Create a free account with a trial: https://portal.ckeditor.com/checkout?plan=free
  */
@@ -70,7 +73,9 @@ const editorConfig = {
 			'numberedList',
 			'todoList',
 			'outdent',
-			'indent'
+			'indent',
+			'|',
+		        'sourceEditing'
 		],
 		shouldNotGroupWhenFull: false
 	},
@@ -97,12 +102,14 @@ const editorConfig = {
 		IndentBlock,
 		Italic,
 		Link,
+		PloneLink,
 		LinkImage,
 		List,
 		ListProperties,
 		Mention,
 		Paragraph,
 		SimpleUploadAdapter,
+	        SourceEditing,
 		Table,
 		TableCaption,
 		TableCellProperties,
@@ -173,7 +180,7 @@ const editorConfig = {
 	initialData:'',
 	licenseKey: LICENSE_KEY,
 	link: {
-		addTargetToExternalLinks: true,
+	//	addTargetToExternalLinks: true,
 		defaultProtocol: 'https://',
 		decorators: {
 			toggleDownloadable: {
@@ -208,12 +215,21 @@ const editorConfig = {
 	}
 };
 
-var launchCK5Instances = function () {
+
+function launchCK5Instances() {
+    window.plone_ckeditors = {};
     var editors = document.querySelectorAll('.ckeditor_plone');
     editors.forEach(function(currentValue) {
 	content = currentValue.value;
         editorConfig['initialData'] = content;
-	ClassicEditor.create(currentValue, editorConfig);
+        var CK4Config = {};
+	get_CKEditorConfig(CK4Config);
+	var plone_dom_id = currentValue.getAttribute('id');
+	editorConfig['plone_dom_id'] = plone_dom_id;
+	editorConfig['filebrowserBrowserUrl'] = CK4Config.filebrowserBrowseUrl 
+	ClassicEditor.create(currentValue, editorConfig).then( editor => {;
+	    window.plone_ckeditors[plone_dom_id] = editor;
+	});
     });
 }
 

src/collective/ckeditor/browser/ckeditor5/plonelink/plonelink.js

@@ -0,0 +1,10 @@
+// plonelink/plonelink.js
+import PloneLinkUI from './plonelinkui.js';
+import { Plugin } from 'ckeditor5';
+
+export default class PloneLink extends Plugin {
+    static get requires() {
+        return [ PloneLinkUI ];
+    }
+}
+

src/collective/ckeditor/browser/ckeditor5/plonelink/plonelinkediting.js

@@ -0,0 +1,23 @@
+// plonelink/plonelinkediting.js
+
+import { Plugin } from 'ckeditor5';
+
+
+
+var createPloneLinkElement = function(uid, writer) {
+    var linkElement = writer.createAttributeElement( 'a', { uid }, { priority: 5 } );
+    writer.setCustomProperty( 'plonelink', true, linkElement );
+    return linkElement;
+}
+
+export default class PloneLinkEditing extends Plugin {
+    init() {
+        // console.log( 'PloneLinkEditing#init() got called' );
+	// var editor = this.editor;
+	// editor.model.schema.extend('$text', { allowAttributes: 'linkPloneUid'});
+	// editor.conversion.for( 'dataDowncast' )
+	    // .attributeToElement( { model: 'linkPloneUid', view: createPloneLinkElement } );
+        // console.log( 'PloneLinkEditing#init() done' );
+    }
+}
+

src/collective/ckeditor/browser/ckeditor5/plonelink/plonelinkui.js

@@ -0,0 +1,58 @@
+// plonelink/plonelinkui.js
+
+import { ButtonView, Plugin, LinkUI, LinkFormView } from 'ckeditor5';
+
+export default class PloneLinkUI extends LinkUI {
+    static get pluginName() {
+	    return 'PloneLinkUI';
+    }
+
+    init() {
+        console.log( 'plonelinkui#init() got called' );
+	super.init();
+        const editor = this.editor;
+	editor.config.define( 'filebrowserBrowserUrl', 'none');
+    }
+
+    _createFormView() {
+	var view = super._createFormView();
+	view.urlInputView.label = 'Plone Link';
+	view.children.first.label = 'Plone Link';
+	view.children.last.children.add(this._createBrowseButton(view), 1);
+	view.on('plone_set_url', (evt, data) => {
+	    console.log('view plone_set_url URL: ' + data.url); 
+	    view.urlInputView.fieldView.value = data.url;
+	    view.fire('submit');
+	    this._showUI();
+	});
+	this.editor.on('plone_set_url', (evt, data) => {
+	    view.fire('plone_set_url', data);
+	});
+	return view;
+    }
+
+    _createBrowseButton(locale) {
+	    const t = locale.t;
+	    const saveButton = new ButtonView( locale );
+
+	    saveButton.set( {
+		    label: t( 'Browse server' ),
+		    tooltip: false,
+		    withText: true,
+		    type: 'submit',
+		    class: 'ck-button-action ck-button-bold'
+	    } );
+	    var plone_dom_id = this.editor.config.get('plone_dom_id');
+	    var filebrowserBrowserUrl = this.editor.config.get('filebrowserBrowserUrl') + '&CKEditorFuncNum=' + plone_dom_id;
+	    saveButton.on('execute', () => {
+	        window.open(
+		    filebrowserBrowserUrl,
+		    null,
+		    'location=no,menubar=no,toolbar=no,dependent=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=yes,scrollbars=yes'
+		);
+	    });
+	    return saveButton;
+    }
+
+}
+

src/collective/ckeditor/browser/ckeditorfinder.py

@@ -1,6 +1,7 @@
 from Acquisition import aq_inner
 from collective.plonefinder.browser.finder import Finder
 from collective.ckeditor.browser.ckeditorview import get_registry_value
+from zope.component import getMultiAdapter
 
 
 class CKFinder(Finder):
@@ -14,6 +15,9 @@ def __init__(self, context, request):
         self.multiselect = False
         self.allowupload = True
         self.allowaddfolder = True
+        pstate = getMultiAdapter((self.context, self.request),
+                                           name="plone_portal_state")
+        self.portal_url = pstate.portal_url()
 
     def __call__(self):
 
@@ -124,10 +128,10 @@ def get_jsaddons(self):
 selectCKEditorItem = function (selector, title, image_preview) {
  image_preview = (typeof image_preview != "undefined") ? image_preview : false;
  if (image_preview) selector = selector + '/@@images/image/preview' ;
- window.opener.CKEDITOR.tools.callFunction( %s, 'resolveuid/' + selector );
+ window.opener.plone_ckeditors['%s'].fire('plone_set_url', {url: '%s/resolveuid/' + selector} );
  window.close();
 };
 Browser.selectItem = selectCKEditorItem;
-             """ % CKEditorFuncNum
+             """ % (CKEditorFuncNum, self.portal_url)
 
         return jsstring

src/collective/ckeditor/browser/ckeditorview.py

@@ -371,25 +371,25 @@ def getCK_plone_config(self):
         """
         request = self.request
         response = request.RESPONSE
-        params_js_string = """CKEDITOR.editorConfig = function( config ) {"""
+        params_js_string = """var get_CKEditorConfig = function( config ) {"""
         params = self.cke_params
         for k, v in params.items():
             params_js_string += """
     config.%s = %s;
             """ % (k, v)
 
         ids = ['plone']
-        for line in get_registry_value('plugins', []):
-            # ignore the rest so we get no error
-            if len(line.split(';')) == 2:
-                id, url = line.split(';')
-                abs_url = self.portal_url + url
-                base_url, plugin = abs_url.rsplit('/', 1)
-                ids.append(id)
-                params_js_string += (
-                    """CKEDITOR.plugins.addExternal('%s', '%s/', '%s');"""
-                    % (id, base_url.rstrip('/'), plugin))
-        params_js_string += '''config.extraPlugins = "%s";''' % ','.join(ids)
+        # for line in get_registry_value('plugins', []):
+        #     # ignore the rest so we get no error
+        #     if len(line.split(';')) == 2:
+        #         id, url = line.split(';')
+        #         abs_url = self.portal_url + url
+        #         base_url, plugin = abs_url.rsplit('/', 1)
+        #         ids.append(id)
+        #         params_js_string += (
+        #             """CKEDITOR.plugins.addExternal('%s', '%s/', '%s');"""
+        #             % (id, base_url.rstrip('/'), plugin))
+        # params_js_string += '''config.extraPlugins = "%s";''' % ','.join(ids)
 
         removePlugins = get_registry_value('removePlugins', [])
         if removePlugins:

src/collective/ckeditor/browser/templates/ckeditor_wysiwyg_support.pt

@@ -44,16 +44,18 @@
                                id python:inputname.replace('.', '_');
                                onfocus onfocus|nothing;
                                onblur onblur|nothing;"></textarea>
-		<script type="importmap">
-		{
-			"imports": {
-				"ckeditor5": "./++resource++ckeditor5/ckeditor5/ckeditor5.js",
-				"ckeditor5/": "./++resource++ckeditor5/ckeditor5/"
-			}
-		}
-		</script>
-     <script type="module" src="++resource++ckeditor5/main.js"></script>
-
+    <script type="importmap">
+    {
+	    "imports": {
+		    "ckeditor5": "./++resource++ckeditor5/ckeditor5/ckeditor5.js",
+		    "ckeditor5/": "./++resource++ckeditor5/ckeditor5/",
+		    "plonelink": "./++resource++ckeditor5/plonelink/plonelink.js",
+		    "plonelink/": "./++resource++ckeditor5/plonelink/"
+	    }
+    }
+    </script>
+    <script type="module" src="++resource++ckeditor5/main.js"></script>
+    <script tal:attributes="src python:ckview.cke_config_url(finder_context)"></script>
     </tal:block>
     <tal:block condition="not: usesCKeditor">
      <textarea cols="80"

src/collective/ckeditor/profiles/default/registry.xml

@@ -162,7 +162,7 @@
                   key="default_editor"
                   purge="True">CKeditor</value>
     </records>
-    <records prefix="plone.bundles/collective.ckeditor.ckeditor5-css" interface="Products.CMFPlone.interfaces.IBundleRegistry">
+    <records prefix="plone.bundles/collective.ckeditor.ckeditor5" interface="Products.CMFPlone.interfaces.IBundleRegistry">
         <value key="depends">plone</value>
         <value key="enabled">True</value>
         <value key="compile">False</value>