Hi all,
i have built a plugin which wraps my images with <figure> and <figcaption>. but everytime i wrap it, ckeditor always wraps my code with a closing </p> before my code and a new <p> after my code.
is it possible to stop this auto-wrap for the figure-element?
thanks in advance
alea

Which CKEditor version do you
Which CKEditor version do you use? And could you show what exactly CKEditor does, because I'm not 100% sure that I understand?
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
sure i can...
sure i can...
ckeditor_4.3.1_full
and this is my plugin.js:
/** * Basic sample plugin inserting current date and time into CKEditor editing area. * * Created out of the CKEditor Plugin SDK: * http://docs.ckeditor.com/#!/guide/plugin_sdk_intro */ // Register the plugin within the editor. CKEDITOR.plugins.add( 'my_plugin', { // Register the icons. They must match command names. icons: 'my_plugin', // The plugin initialization logic goes inside this method. init: function( editor ) { // Define an editor command that inserts a timestamp. editor.addCommand( 'my_plugin', { // Define the function that will be fired when the command is executed. exec: function( editor ) { var selected_text = editor.getSelection().getStartElement().getOuterHtml(); // Get Text //alert(selected_text); var floating = ""; var Ergebnis = selected_text.search(/float: left.+/); if (Ergebnis != -1) { floating = "float: left;"; } else { var Ergebnis = selected_text.search(/float: right.+/); if (Ergebnis != -1) { floating = "float: right;"; } else { floating = ""; } } var pre_selected_text = "<figure class='caption' style='"+floating+"'>"; var after_selected_text = "<figcaption>Bildunterschrift</figcaption></figure>"; if (selected_text.length < 1 ) { selected_text = "Bild"; } editor.insertHtml(pre_selected_text+selected_text+after_selected_text); } }); // Create the toolbar button that executes the above command. editor.ui.addButton( 'my_plugin', { label: 'BU2', command: 'my_plugin', toolbar: 'insert' }); } });if i have a text and want to insert an image inside a p-tag, i click on insert image, select it, set align to left or right, press ok and its inside the text and the text floats around my image.. thats perfect...
but if i press my plugin-button to wrap my image with <figure> and <figcaption> the editor will break the p-tag, insert my code, and start a new p-tag ... so my text is not floating around the image.
expample-source inside ckeditor with normal image:
example-source inside ckeditor with my caption:
as you can see, ckeditor stops the default <p>-element, inserts my <figure>-element and starts a new <p>-element.
i want my <figure>-element inside the p-element the image was placed.
hope this helps to understand :) and thanks for reading and your time
<figure> cannot be a child of
<figure> cannot be a child of <p>. HTML does not allow that. That's why CKEditor breaks paragraph.
BTW. did you see the image2 plugin (demo).
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
yes i saw the demo, but i
yes i saw the demo, but i need a solution for images with captions inside my typo3 tt_news plugin. without captions its fine with floating text around my images, but with captions i cant solve it... :(
if i remove the closing and the new opening p-element, it works fine... but i cant tell the customers to modify the html-source ;)
We had exactly the same
We had exactly the same problem in the image2 plugin. But splitting paragraph is the only option if you want to use figure. If you don't have to use figure, then use some inline elements and that's it.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
i tried a solution with only
i tried a solution with only spans, source was fine, but typo3 was wrapping it :/ thats why i thought to try out figure...
but thank you for your answers! :)
maybe someone else is looking for this solution :)