将数据插入到 tinymce 中的正确方法不是打印出来,甚至使用htmlentities
. 考虑以下代码
<div class="editor" id="editor">
</div>
<script>
tinymce.init({
selector: 'div.editor',
theme: 'inlite',
plugins: 'image table link paste contextmenu textpattern autolink',
insert_toolbar: 'quickimage quicktable',
selection_toolbar: 'bold italic | quicklink h1 h2 h3 blockquote',
inline: true,
paste_data_images: true,
automatic_uploads: true,
init_instance_callback : function(ed) {
// ed.setContent("<h1>Title</h1><p>Content...</p>");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
ed.setContent(xhttp.responseText);
}
};
xhttp.open("GET", "content.php", true);
xhttp.send();
},
content_css: [
'//www.tinymce.com/css/codepen.min.css'
]
});
</script>
并且文件content.php
应该只打印html内容
<?php
$content = ''; // Fetch from database
print $content;
?>
注意init_instance_callback
我初始化tinymce时的功能。也就是tinymce初始化后调用的函数。现在与其直接print
在编辑器内部使用,不如在内部进行 ajax 调用init_instance_callback
并在那里渲染。我已经放入了一个示例注释行,只是为了帮助您解决同样的问题。这还将负责安全验证(如果有,则不执行脚本标记)。
同时获取编辑器的内容,同时将其保存到数据库是
var content = tinyMCE.get('editor').getContent();
然后您可以发出 ajax 发布请求以将数据保存到数据库。
现在为什么我使用 ajax 很重要。我尝试了很多其他方法,我可以直接打印它。但这会导致一个安全漏洞,因为脚本标签可以在编辑器初始化之前运行。
我在这个例子中使用了 div 但即使对于文本区域也是一样的。也不要使用 htmlentities ,因为这会转义 html 内容,并且您希望看到在 tinymce 中呈现的内容,而不是转义的版本。