We have a 'customwidget' plugin that has been working perfectly.
I've updated to 4.3, to deal with IE11 issues. However the custom plugin we're using to insert a fake object is no longer working. I've tried cross referencing against the flash plugin which uses a similar approach but can't see any difference.
We can insert a fake element fine. We lose the fake 'widget' element when we:
- Go back and forth between 'view source'
- Save the contents, reload content back in
Here's the /plugins/customwidget/plugin.js:
(function() { function createFakeElement( editor, realElement ) { return editor.createFakeParserElement( realElement, 'cke_widget', 'widget', true ); } widgets = []; jQuery.ajax({ type: "GET", dataType:'json', cache: false, url: "/websuite/secure/app/cms/manager/ajax/get-editor-widget-list.cfm", timeout: 3000, error: function() { return false; }, success: function(json) { widgets = json; } }); CKEDITOR.plugins.add('customwidget', { icons: 'widget', onLoad: function() { CKEDITOR.addCss( 'img.cke_widget' + '{' + 'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/placeholder.png' ) + ');' + 'background-position: center center;' + 'background-repeat: no-repeat;' + 'width: 16px;' + 'height: 16px;' + '}' ); }, init: function(editor) { var pluginName = 'customwidget'; CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/widget.js'); editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName)); editor.ui.addButton( 'Widget', { label: 'Widget', command: pluginName } ); }, afterInit : function ( editor ) { var dataProcessor = editor.dataProcessor, dataFilter = dataProcessor && dataProcessor.dataFilter; if ( dataFilter ) { dataFilter.addRules( { elements : { 'widget' : function( element ) { return createFakeElement( editor, element ); } } }, 5); } }, requires: 'fakeobjects' }); })();
And here's the /plugins/customwidget/dialogs/widget.js
( function(){ CKEDITOR.dialog.add('customwidget', function(editor) { return { title : 'Insert Widget', minWidth : 400, minHeight : 50, onOk: function() { var dialog = this, data = {}, customwidget = editor.document.createElement( 'widget' ); this.commitContent( data ); customwidget.setAttribute( 'id', data.id ); customwidget.setAttribute( 'title', data.title ); var newFakeImage = editor.createFakeElement( customwidget, 'cke_widget', 'widget', true ); $(newFakeImage).attr('title',data.title); $(newFakeImage).attr('alt',data.title); editor.insertElement( newFakeImage ); }, contents: [{ id: 'choose', label: 'Choose', elements: [{ type: 'select', id: 'id', label: 'Choose a widget', labelLayout: 'horizontal', items: widgets, commit : function( data ) { data.id = this.getValue(); // TODO: this could be more elegant data.title = $('#'+this.getDialog().getContentElement('choose','id').domId+' select').find(":selected").text(); } }] }] }; }); })();
I've tried renaming to widget2 in places, just in case the new widget fuctionality is conflicting but no joy. No errors are returned. Just seems the dataFilter is no longer being respected.
Any ideas? Thanks in advance.
Change the second parameter
Change the second parameter of dataFilter.addRules to:
Since CKEditor 4.3 beta normal rules are not applied to non-editable elements by default and this may be a reason.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
Hi Reinmar
Hi Reinmar
Tried what you suggested, no joy. I've pasted what I've amended below. I'm wondering with 4.3, can I have a <widget/> node in the source? Or will it conflict with the new widget stuff? Any other things I can try?
Thanks in advance
Dave
I wish that I had learnt
I wish that I had learnt about this change sooner, I spent some time this weekend trying to figure out why a dataFilter in one plugin wasn't working in 4.3 and somehow I managed to find that change about "applyToAll", I tried and it works fine.
Now let's see if it breaks the plugin when used with older versions of CKEditor.
That change was mentioned in
That change was mentioned in the Changelog for 4.3 beta. We're sorry every time every time we need to make such change, but there was no alternative in this case.
Regarding backward compatibility - using old addRules( ..., priority ) still works and if you haven't been using priorities at all, then adding now a new argument (the { applyToAll: true }) won't break anything.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
You can have the <source> tag
You can have the <source> tag in source, but you must update the CKEDITOR.dtd object and make the plugin compatible with the ACF.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
Hey man, you can't expect us
Hey man, you can't expect us to read the documentation :-p
The fact is that I might read the blog post with the summary, but it's been a long time since I looked at the detailed changelog, although it's a really good idea before jumping into an upgrade.
I'll spend some time today reviewing it, because I might find other interesting details there.
SOLVED
Legend, thanks Reinmar. In case it helps others, I just had to add the allowedContent param to the dialogCommand:
Thanks once again. Appreciated.