0

I have a Wordpress plugin which allows users to mark a bullet list and then add a shortcode around it. Unfortunately, when users select the bullet list, the first UL is not selected and therefore they end up with a weird selection. The end code should be:

[checklist-box title="Hello"]
<ul>
    <li>xxxx</li>
    <li>yyyy</li>
    <li>zzz</li>
</ul>
[/checklist-box]

but instead ends up as something like:

<ul>
    <li>[checklist-box title="Hello"]
<ul>
    <li>xxxx</li>
    <li>yyyy</li>
    <li>zzz</li>
</ul>
[/checklist-box]</li>
</ul>

which looks horrible.

Clarify: I need the [checklist-box] shortcode to wrap the whole list including the

    This is the code that wraps the bullets in TinyMCE:

    onsubmit: function(e) {
          var selected_text = editor.selection.getContent();
          shortcode = '[checklist-box title="' + e.data.title + '"]' + selected_text + '[/checklist-box]';
          editor.execCommand('mceInsertContent', 0, shortcode);
    }
    
    • 2
      not sure what is exactly the question here. if the code of the plugin is relevant to the question, please edit the question and include the relevant parts. As it is right now it is a question that better asked in a tinymce forum. – Mark Kaplun Jul 18 '17 at 13:19
    • The question is how to ensure the selected text is wrapping any UL tags so that the HTML produced is not messy – checklist Jul 19 '17 at 9:16
    • ... therefor it is a tinymce question? the fact that you try to insert ashortcode has zero to do with your problem – Mark Kaplun Jul 19 '17 at 9:21
    • this is a WP question. Please be productive and not badger other people. – checklist Jul 19 '17 at 9:47
    • 1
      seriously? you engage in pointless argument about where is best to ask the question, and complain that other people are not productive? lol it is your time you are wasting – Mark Kaplun Jul 19 '17 at 11:55
    0

    Try to use this instead:

    editor.focus();
    var selected_text = editor.selection.getContent();
    shortcode = '[checklist-box title="' + e.data.title + '"]' + selected_text + '[/checklist-box]';
    editor.selection.setContent(shortcode);
    editor.setContent(editor.getContent());
    

    Basically, I'm first forcing editor focus and then use setContent instead to change the content. In my tests there were still some glitches on the editor but the source was ok, so I just copy all content and set it again to refresh the editor.

    • Sorry but this yields the same result. Mixed html as in my questions. – checklist Jul 19 '17 at 10:48
    • It worked directly with TinyMCE, but now I tried inside WP and doesn't work. Selections on browsers/wysiwyg editors are always a nightmare... maybe it's related to TinyMCE on WP being inside an iframe, I don't know. But after you apply the shortcode, if you toggle between HTML and back to Editor tabs it looks fine on my side. the only think I would suggest would be to try to replicate that behaviour, but doesn't look very "clean"... – dbeja Jul 19 '17 at 12:22

    Your Answer

    By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

    Not the answer you're looking for? Browse other questions tagged or ask your own question.