删除由 tinymce 插件创建的元素答案

【问题标题】：Remove an element create by tinymce plugin删除由 tinymce 插件创建的元素
【发布时间】：2020-04-17 12:04:30
【问题描述】：

我在 tinymce 中创建了一个插件，它在文本前添加图像以提醒读者。 (Exemple)

插入这个div，修改里面的内容就可以了，但是如果我的用户想删除那个div（所有的红色边框），那就更难了。

我希望我的用户单击“危险标志”并按 DEL 删除该元素。（实际上不可能）我应该如何在我的插件中添加它？

这是我的插件：

tinymce.PluginManager.add('picto', function (editor, url) {
    editor.contentCSS.push(url + '/css/picto.css');


    if (tinymce.majorVersion == 5) {

        editor.ui.registry.addIcon('addwarning', '<img src="' + url + '/img/attention.png" style="width:24px ; height:24px;">');
    }

    function addWarning() {
        var selection = editor.selection;
        var node = selection.getNode();
        if (node) {
            editor.undoManager.transact(function () {
                var content = selection.getContent();
                if (!content) {
                    content = 'Contenu';
                }

                selection.setContent('<br><div class="alert-modop">' + content + '</div><br>');
            });
        }
    }

这是我对编辑器的 js 调用：

<script> 
            tinymce.init({
                selector: 'textarea#contenuEtask',
                relative_urls: false,
                language: 'fr_FR',
                contextmenu: false,
                browser_spellcheck: true,
                plugins: "noneditable wordcount autolink anchor fullscreen lists advlist link image hr tabfocus table searchreplace spoiler picto",
                toolbar1: 'fullscreen | undo redo | styleselect | bold italic underline| link image table | bullist numlist outdent indent ',
                toolbar2: 'alignleft aligncenter alignright alignjustify | fontselect fontsizeselect forecolor backcolor | spoiler-add spoiler-hide spoiler-close | warning-add new-add note-add |hr searchreplace',
                noneditable_noneditable_class: "mceNonEditable",
                menubar: "",
                height: 500,
                setup: function (editor) {
                    editor.on('init', function () {
                        var tinyHtml = $('.TinyHiddenValue input[type=hidden]').val();
                        this.setContent(tinyHtml);
                    });
                    editor.on('keyup', function () {
                        var tinyHtml = this.getContent();
                        $('.TinyHiddenValue input[type=hidden]').val(tinyHtml);
                    });
                    editor.on('click', function () {
                        var tinyHtml = this.getContent();
                        $('.TinyHiddenValue input[type=hidden]').val(tinyHtml);
                    });
                }
            });
            tinymce.execCommand('mceRemoveControl', true, 'contenuEtask');
        </script>

和我的 css 来创建这个元素：

.alert-modop {
  background: url("../Sources/Images/attention.svg") no-repeat;
}

感谢您的帮助。 o/

【问题讨论】：

标签： javascript tinymce

【解决方案1】：

对于那些和我有同样困难的人，我有一个有趣的解决方案。

我用 div 包围了我的内容，其中内容可编辑为 true。这不会影响您的插件，但现在可以选择我的内容。

selection.setContent('<br><div contenteditable="true" style="display: inline-block"><div class="alert-modop">' + content + '</div></div><br>');

【讨论】：