Question

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

我能够成功创建我的编辑器，并且每当有人按下按钮时都会向编辑器添加html。例如，

<div class="child1">
  <div class="wrapper">
    <div class="blurb"></div>
    <div class="form"></div>
  </div>
</div>

但是，div标签正被剥离。我需要做什么才能使用inserthtml命令插入div标签？

Answer 1

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

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

许多年前，铬存在一个问题：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/

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

1 个答案: