StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>So I had to answer my own question as I needed an answer very quickly. It appears the behaviour I was experiencing is intentional? and certainly not something that has been removed in the very latest versions of TinyMCE (both 3.x and 4.x after testing). </p> <p>With this in mind I ended up having to make a plugin to do what I wanted. </p> <p>I borrowed a huge amount of code by Peter Wilson, from a post he made here: <a href="http://www.tinymce.com/forum/viewtopic.php?id=20319" rel="nofollow">http://www.tinymce.com/forum/viewtopic.php?id=20319</a> So thanks very much for this Peter! </p> <p>I ended up slightly changing the rules from my original question in that my solution adds an outer wrapping div around all the content I want to select. This method also allowed me to reliably then grab the required areas of html with jQuery in my front-end site.</p> <p>My version of Peter's code is just very slightly modified from the original in order to add a class to the DIV, rename it, use a different button etc.</p> <p>The plugin works perfectly and allows for a div to be created wrapping any amount of content within TinyMCE. The divs inserted have the class name I need also applied to it.</p> <p>Add 'customDiv' to your plugin AND button bar for it to appear.</p> <pre><code>(function() { tinymce.create("tinymce.plugins.Div", { init : function(editor, url) { editor.addCommand("mceWrapDiv", function() { var ed = this, s = ed.selection, dom = ed.dom, sb, eb, n, div, bm, r, i; // Get start/end block sb = dom.getParent(s.getStart(), dom.isBlock); eb = dom.getParent(s.getEnd(), dom.isBlock); // If the document is empty then there can't be anything to wrap. if (!sb && !eb) { return; } // If empty paragraph node then do not use bookmark if (sb != eb || sb.childNodes.length > 1 || (sb.childNodes.length == 1 && sb.firstChild.nodeName != 'BR')) bm = s.getBookmark(); // Move selected block elements into a new DIV - positioned before the first block tinymce.each(s.getSelectedBlocks(s.getStart(), s.getEnd()), function(e) { // If this is the first node then we need to create the DIV along with the following dummy paragraph. if (!div) { div = dom.create('div',{'class' : 'expandCollapse'}); e.parentNode.insertBefore(div, e); // Insert an empty dummy paragraph to prevent people getting stuck in a nested block. The dummy has a '-' // in it to prevent it being removed as an empty paragraph. var dummy = dom.create('p'); e.parentNode.insertBefore(dummy, e); //dummy.innerHTML = '-'; } // Move this node to the new DIV if (div!=null) div.appendChild(dom.remove(e)); }); if (!bm) { // Move caret inside empty block element if (!tinymce.isIE) { r = ed.getDoc().createRange(); r.setStart(sb, 0); r.setEnd(sb, 0); s.setRng(r); } else { s.select(sb); s.collapse(1); } } else s.moveToBookmark(bm); }); editor.addButton("customDiv", { //title: "<div>", image: url + '/customdiv.gif', cmd: "mceWrapDiv", title : 'Wrap content in expand/collapse element' }); } }); tinymce.PluginManager.add("customDiv", tinymce.plugins.Div); </code></pre> <p>})();</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload