dojo - Modify dijit.editor filters to allow tags -
i new dojo , trying use dijit.editor.
i able create editor , adding html editor whenever pushes button. example,
<!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 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']"> <strong>default</strong> content. </div> <div class="col-md-6" > <div id="btn" >blast</div> </div> </div> <script> // include 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> however, div tag being stripped. need allow div tags inserted using inserthtml command?
dijit.editor not filter html string. browser does.
instance, in editor start bullet list. then, when cursor on first item of list, press button.
see div there. have dom element editing.
if cursor inside div , insert div stripped.
actually, if edit span , insert span it stripped well...
basically browser tries optimize content.
there issue raised chromium while many years ago: https://bugs.chromium.org/p/chromium/issues/detail?id=122062
as workaround, can use custom method insert content. this:
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); } } } this method copied directly dijit/_editor/richtext (line 2161).
can see jsfiddle here: https://jsfiddle.net/aqsl1mcf/
Comments
Post a Comment