修改 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/
我是 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/