I am creating some plugins that are essentially iframes that browse a library of images, videos and audio (inserts a flash object).
For the audio and video embed code I need to add a placeholder which I understand needs to be done via a fake element. After a few days of ramming my head against a wall due to lack of documentation I have fake elements being inserted with a placeholder image assigned via CSS.
I'll use my video plugin as an exmaple:
plugin.js
(function() { var pluginName = 'customvideo'; CKEDITOR.plugins.add( pluginName, { requires: ['iframedialog'], init : function( editor ) { editor.addCommand( pluginName, {exec:customvideo_onclick}); editor.ui.addButton( 'customvideo', { label : 'Select video from the library.', command : pluginName, icon : this.path + 'images/icon.png' }); CKEDITOR.dialog.addIframe('customvideo_dialog', 'Videos', BASE_URI + 'wysiwyg/video',650,500); editor.addCss( 'img.cke_video' + '{' + 'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/placeholder.png' ) + ');' + 'background-position: center center;' + 'background-repeat: no-repeat;' + 'border: 0px;' + 'width: 13px;' + 'height: 13px;' + '}' ); }, afterInit : function( editor ) { var dataProcessor = editor.dataProcessor, dataFilter = dataProcessor && dataProcessor.dataFilter; if ( dataFilter ) { dataFilter.addRules( { elements : { 'video' : function( element ) { return editor.createFakeParserElement( element, 'cke_video', 'video', true ); } } }); } } }); })(); function customvideo_onclick(e) { update_instance(); // run when custom button is clicked] CKEDITOR.currentInstance.openDialog('customvideo_dialog') }
Re: Inserting (and maintaining fake element placeholders)
Hi all,
I have the same problem here. The API of CKeditor 3 is really bad documented .
But I've taken a look at the source of the flashplugin again. It has something to with the data parser. When you switch the editor back to WYSIWYG-Mode it reparses the content. I think the solution is just to write a data filter like the one in the /ckeditor/_source/plugins/flash/plugin.js file in the "afterInit"-Method (line 91ff.)
Please note that I am not an expert Javascript nor in CKeditor, so I might be wrong. That's only my idea.
Would be nice if some of the core developers could help us out.
lbrinkma
Re: Inserting (and maintaining fake element placeholders)
Anything new about that? I'm still trying to get this, cause I have to finish that System with the editor next week or my client will be very angry...
Re: Inserting (and maintaining fake element placeholders)
I'm doing something similar and your suggestion about adding a rule to dataFilter was enough for me. What is it that you need?
Re: Inserting (and maintaining fake element placeholders)
I don't know how to write a data filter. That was the problem i had. Can you please share the data filter code you have used with us?
lbrinkma
Re: Inserting (and maintaining fake element placeholders)
I created a plugin that inserts an iframe in source, and shows a fake object in the html view. But when I go to the source view, and than back to the html view, the fake object is gone and I see my iframe.
Is there an event listener that can be attached on this action, so I can re-parse my source and render the fake object again, instead the iframe.
Re: Inserting (and maintaining fake element placeholders)
specifically, if you defined your plugin...
Now in the same file, inside the main function() {} crap on the same level (But outside of CKEDITOR.plugins.add), I've defined those functions I used in the above code.
Hope that helps with figuring out how to add filters. The actual parsing of data onto and off of the fake element is usually on the dialog file. I again recommend looking at flash.js for more on that.
Re: Inserting (and maintaining fake element placeholders)
Seeing how this thread is getting more of a response than the one I opened and I have the exact same problem, and none of the steps listed so far have helped, I figure I would post my code here to see if anyone has a solution yet. I am convinced that it is something simple but not found it yet.
OK, basically I am needing to be able to embed WMV files. I have taken the Flash plugin code as it comes closest to meeting my needs and tweaked it as needed. It even has a custom placeholder file showing MOVIE instead of FLASH.
Everything works great, with one exception. Whenever I click on Source and then back again I get the FLASH placeholder and object handles. I have looked over every line of code many times but still do not see what I am missing.
If I look at the controls of the editor ( the ones that decide how to display the editor content, I see that the placeholder img file is still getting assigned the class of "cke_flash". I believe that this is the root of my problem as it should be getting the class of "cke_wmv" which is per my code changes. I believe that if I can find out where I messed a step then it will all work as expected.
Anyway, here is the code blocks hoping that someone might have an answer to what is being missed.
plugin.js
Re: Inserting (and maintaining fake element placeholders)
Hi btate,
I think their is something wrong with the dataprocessor: The flash plugin one overwrites your wmv one. Just try to remove the flash plugin. Or their is something else wrong with it. The Java-script console in your browser of choice could help you debug javascript problems.
This is just a guess I unfortunately have not much time to spend on cksource and had no time to verify this. Sorry for that.
lbrinkma
Re: Inserting (and maintaining fake element placeholders)
Thanks for the speedy response. Unfortunately, there does not appear to be a way to remove the Flash plugin. At least, not in the way it would appear to work. I use the following in the creation but the Flash placeholder still appears and double-clicking still brings up the Flash plugin.
Re: Inserting (and maintaining fake element placeholders)
Open to ideas.
Re: Inserting (and maintaining fake element placeholders)
Still plugging away at it
Re: Inserting (and maintaining fake element placeholders)
As always I've no time to spend on this and that is the reason for the late reply.
And again this is an yet another guess. It's clear that you loose the placeholder image. You could try adding the flash plugin again and edit that dataProcessor.
The real problem is that Fake Element is not document enough, as far as I remember. This should have changed now, but I don't think so.
lbrinkma
Re: Inserting (and maintaining fake element placeholders)
I've got the same problem....
Re: Inserting (and maintaining fake element placeholders)
I'm trying to find a solution second day with few results..
I also found out that flash plugin seems to overwrite the rule for 'cke:embed' element.
Even though the function addRules does take priority as a second argument it seems to be ignored. Probably it's a bug.
The only way I found out how to overwrite a rule for 'cke:embed' element was to remove a part of code from ckeditor.js which is very bad way to do this I guess.