2

I'm using TinyMCE v4.1 for my project and it's doing the job except for one thing.

It doesn't support formatting. It's configured to only accept text and <span> elements. The toolbar has several buttons that inserts spans which represent icons for the different objects that's related to my projects purpose.

The problem is sometimes if I insert a span and click to the right of it to insert another span, the cursor goes inside the first span and it adds the second span into the first as a child when I want it to become a sibling after the first.

Here's an example of my button implementation code inside the setup parameter function:

editor.addButton('itemType1Btn', {
    text: 'Item Type #1',
    icon: 'itemType1BtnIco',
    onclick: function () {
        var promptAnswer = prompt("Destination Color?", "#000000");

        editor.insertContent("<span class='item itemType_1' data-to='" + promptAnswer + "'>&nbsp;</span>");
    }
});

When the problem happens, the output is something like this:

<span class='item itemType_1' data-to='#000000'>
    <span class='item itemType_2' data-to='#000000'>&nbsp;</span>
</span>

When I want it to be:

<span class='item itemType_1' data-to='#000000'>&nbsp;</span>
<span class='item itemType_2' data-to='#000000'>&nbsp;</span>

What code should I put in place of the insertContent() function to place the inserted content appropriately?

Any help is appreciated!

user2653364
  • 115
  • 2
  • 8
  • its inserting at the carat, which is still inside the span. see some other questions dealing with the same/similar issue http://stackoverflow.com/questions/4063144/setting-the-caret-position-to-an-empty-node-inside-a-contenteditable-element http://stackoverflow.com/questions/21574522/contenteditable-put-caret-outside-inserted-span – chiliNUT Jul 02 '14 at 15:32
  • Thanks @chiliNUT. I looked at those threads and noticed they we're not specifically related to TinyMCE, which got me thinking what if I tried using jQuerys after() function if I could get the element that contains the carat. I'm now using: [Start of Code] if (editor.selection.getNode().nodeName.toLowerCase() == "span") { $(editor.selection.getNode()).after("..."); } else { editor.insertContent("..."); } [End of Code] It's working too! but is it dangerous to use jQuery on a tinyMCE element? – user2653364 Jul 02 '14 at 16:42
  • not dangerous, but be careful, because jQuery will manipulate the dom, but the text tiny mce submits is not verbatim of what the dom is, one example of many is when mce outlines table borders for you. but, btw, while not directly about tinyMCE, tinyMCE is just a nice abstraction layer on top of a contenteditable div. – chiliNUT Jul 02 '14 at 17:09

0 Answers0