修改 dijit.editor 个过滤器以允许标签

Modify dijit.editor filters to allow tags

我是 Dojo 新手,正在尝试使用 dijit.Editor。

我能够成功创建我的编辑器,并在有人按下按钮时将 html 添加到编辑器。例如,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: true,parseOnLoad: true"></script>
    <style type="text/css">
        /* bring in the claro theme */
        @import "//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css";
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script>
        function onDrag(event) {
            event.dataTransfer.setData('Text', 'Some content');
        }
    </script>
</head>
<body>
<div class="row">
<div  style="border:1px solid #000" id="myeditor" class="col-md-6 claro" data-dojo-type="dijit/Editor" data-dojo-props="extraPlugins:['foreColor','hiliteColor','|','createLink','insertImage','fullscreen','viewsource','newpage']">
    This is the <strong>default</strong> content.
</div>
    <div class="col-md-6" >
        <div id="btn" >BLAST</div>
    </div>
</div>
<script>
    // Include the class
    require([
        "dijit/Editor",
        "dojo/parser",
        "dijit/_editor/plugins/ViewSource",



            ]);

    require(["dijit/form/Button", "dijit/registry"], function(Button, dijitRegistry) {
        var button = new Button({
            label: "Click Me!",
            onClick: function(){
                var editor = dijitRegistry.byId("myeditor");
                editor.execCommand("inserthtml","<div>Here</div>");
            }
        }, "btn");
        button.startup();
    });
</script>
</body>
</html> 

但是,div 标签正在被删除。我需要做什么才能允许使用 inserthtml 命令插入 div 标签?

dijit.Editor 不会过滤您的 html 字符串。浏览器会。
例如,在编辑器中启动一个项目符号列表。然后,当光标位于列表的第一项时,按下按钮。
您会看到 div 在那里。 它与您当前正在编辑的 dom 元素有关。
如果光标在 div 内并且您插入 div 它将被删除。
实际上,如果您编辑一个跨度并向其中插入一个跨度,它也会被删除...

浏览器基本上会尝试优化内容。

很多年前有人针对 chromium 提出了一个问题:https://bugs.chromium.org/p/chromium/issues/detail?id=122062

作为解决方法,您可以使用自定义方法插入内容。像这样:

    insertContent: function(content) {
        var insertRange;
            var selection = rangeapi.getSelection(editor.window);
            if(selection && selection.rangeCount && selection.getRangeAt){
                insertRange = selection.getRangeAt(0);
                insertRange.deleteContents();

                var div = domConstruct.create('div');
                div.innerHTML = content;
                var node, lastNode;
                var n = editor.document.createDocumentFragment();
                while((node = div.firstChild)){
                    lastNode = n.appendChild(node);
                }
                insertRange.insertNode(n);
                if(lastNode) {
                    insertRange = insertRange.cloneRange();
                    insertRange.setStartAfter(lastNode);
                    insertRange.collapse(false);
                    selection.removeAllRanges();
                    selection.addRange(insertRange);
                }
            }
}

此方法直接从dijit/_editor/RichText(第2161行)复制过来。
你可以在这里看到一个 jsfiddle:https://jsfiddle.net/aqsL1mcf/