javascriptjquerytinymce-3

Tinymce 3 - insert new content in new block after custom button click


I want to ask if it's possible to add new content "outside" of content that has beed added recently. So, i have custom button which adds some simple HTML. And what i want to archive is to add the same html but outside of existing one, so in place marked green on my screenshot. I'm looking for a way how to escape from this div, and add new html after existing one.

below screenshot, and code - how javascript button in generated - very simple.

Thanks for advice. enter image description here

var oferta = '<div class="col-sm-3"><h1>test</h1></div>'
setup: function (ed) {
        ed.addButton('example', {
            title: 'example.desc',
            image: './/',
            text: 'Oferta',
            icon: true,
            onclick: function () {
                tinyMCE.execCommand('mceInsertContent', false, oferta);
            }
        });
    },

EDIT: Below how this looks now when i hit button 3 times in row.(every next content is added to existing one.) enter image description here


Solution

  • Is very easy to do it try to change you code with this example.

    setup: function (editor) {
        ed.addButton('example', {
            title: 'example.desc',
            image: './/',
            text: 'Oferta',
            icon: true,
            onclick: function () {
                var h1 = editor.dom.create('h1');
                h1.innerText = 'test';
                var oferta = editor.dom.create('div' ,{'class': 'col-sm-3'});
                oferta.appendChild(h1);
                var divs = editor.dom.select('div');
                if(divs && divs.length > 0){
                  editor.dom.insertAfter(oferta,divs[divs.length-1])
                }else{
                  tinyMCE.execCommand('mceInsertContent', false,oferta.outerHTML);
                }
                editor.selection.select(oferta);
                editor.selection.collapse(true);
            }
        });
    },