Обновить существующий узел TinyMCE - PullRequest
Новая
       22

Обновить существующий узел TinyMCE

0 голосов
/ 14 апреля 2020

Я добавил панель инструментов, которая при нажатии откроет диалоговое окно и позволит пользователю вставить span.GB_calculator в контент, выполнив ed.selection.setContent(). Затем при щелчке по элементу span открывается то же диалоговое окно, однако сначала получается копия узла с помощью ed.selection.getNode(), а затем вместо этого я просто изменяю узел с помощью node.setAttribute(), а затем ed.selection.setNode(). Полный код показан ниже.

Все работает так, как нужно, за исключением того, что при щелчке по существующему диапазону узел обновляется по желанию, однако новый контент добавляется к содержимому в том, что выглядит как тело iframe.

Как обновить существующий узел TinyMCE без добавления нового узла в контент? 

 tinymce.init({
    selector: '#frontContent',
    toolbar: 'addCalculator',
    setup : function(ed) {
        ed.addButton('addCalculator', {
            icon: 'fa fa-calculator',
            tooltip : 'Add Calculator',
            onclick : function() {
                var elem = $('<span/>', {'class': 'GB_calculator fa-calculator fa fa-5x'})
                .data('points', [{mathFunction:'base', elem:{x:0,y:0}},{mathFunction:'add', elem:{x:0,y:0}}])
                $("#dialog-calculator").data('elem', elem).dialog("open");
            }
        }),
        ed.on("init", function(){
            ed.$('.GB_calculator').on('click', function() {
                $("#dialog-calculator").data('elem', this).data('node', ed.selection.getNode()).dialog("open");
            })
        });
    }
});

$("#dialog-calculator").dialog({
    autoOpen    :false,
    resizable   :false,
    height      :500,
    width       :500,
    modal       :true,
    buttons     : [
        {
            text    : 'Save',
            click    : function() {

                var dialog=$(this);
                var elem=$(dialog.data('elem'));
                var points=[];
                $('#args-list tr').each(function(i){
                    var trs=$(this).find('td');
                    var mathFunction=trs.eq(0).data('value');
                    points.push({mathFunction: mathFunction, elem:{x:parseInt(trs.eq(1).text()),y:parseInt(trs.eq(2).text())}})
                })
                elem.data('points', points);
                var ed=tinymce.get('frontContent');
                ed.focus(); //Not sure if necessary
                var node=dialog.data('node');
                if(node) {
                    console.log('update', node);
                    node.setAttribute('data-points', JSON.stringify(points));
                    ed.selection.setNode(node);
                }
                else {
                    console.log('add');
                    elem.on('click', function() {$("#dialog-calculator").data('elem', this).dialog("open");});
                    ed.selection.setContent('<span class="GB_calculator fa-calculator fa fa-5x" data-points='+JSON.stringify(points)+' title="Calculator" contenteditable="false">&nbsp;</span>');
                }
                ed.setDirty(true);
                $(this).closest('div.dialog').dialog("close");
            }
        }
    ]
});
...