修改dijit.editor過濾器以允許使用標記

我是Dojo的新手，正在嘗試使用dijit.Editor。修改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標籤？

來源

2016-06-10 Jaime R.

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/

來源

2016-06-14 12:24:32 ben

修改dijit.editor過濾器以允許使用標記

回答

相關問題