Dijit.editor Filter ändern, um Tags zu ermöglichen

Ich bin neu in Dojo und versuche, dijit.Editor zu verwenden.Dijit.editor Filter ändern, um Tags zu ermöglichen

Ich bin in der Lage, meinen Editor erfolgreich zu erstellen und HTML Editor hinzuzufügen, wenn jemand eine Taste drückt. Zum Beispiel

<!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>

jedoch wird der div-Tag abgestreift. Was muss ich tun, damit div-Tags mit dem Befehl inserthtml eingefügt werden können?

Quelle

2016-06-10 Jaime R.

dijit.Editor filtert nicht Ihre HTML-Zeichenfolge. Der Browser tut es.
Zum Beispiel im Editor eine Aufzählungsliste starten. Wenn sich der Cursor auf dem ersten Element Ihrer Liste befindet, drücken Sie die Taste. Sie werden sehen, dass die div dort ist. Es hat mit dem dom-Element zu tun, das Sie gerade bearbeiten.
Wenn sich der Cursor in einem div befindet und Sie einen div einfügen, wird er entfernt.
Eigentlich, wenn Sie einen Bereich bearbeiten und einen Bereich einfügen, wird es auch entfernt ...

Grundsätzlich versucht der Browser, den Inhalt zu optimieren.

Es gab ein Problem für Chrom erhöht, während vor vielen Jahren: https://bugs.chromium.org/p/chromium/issues/detail?id=122062

Als Abhilfe können Sie eine benutzerdefinierte Methode verwenden, um Inhalte einzufügen. Wie folgt aus:

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); 
       } 
      } 
}

Diese Methode wird direkt von dijit/_editor/RichText (Linie 2161) kopiert.
Sie können ein JFiddle hier sehen: https://jsfiddle.net/aqsL1mcf/

Quelle

2016-06-14 12:24:32 ben

Dijit.editor Filter ändern, um Tags zu ermöglichen

Antwort

Verwandte Themen