最近给本站的后台管理功能换了一套新的前端模板，在将 TinyMCE 富文本编辑器引入到页面表单时却不显示编辑器主体，反复检查确认了代码配置没有任何问题。在经过一番研究发现，由于表单页面是通过 iframe 引入到主体框架中的，这些表单页面并没有 <!DOCTYPE html> <html> <head> 等 HTML 元素，而 TinyMCE 没有获取到这些元素就认为这不是一个 HTML 页面，因此无法加载编辑器主体。
得知这个原因后，只需要在表单页面最上面加上 <!DOCTYPE html>，告诉 TinyMCE 这是一个 HTML 页面就可以正常显示编辑器主体。
<!DOCTYPE html>
下面是 TinyMCE 编辑器的配置方法，首先引入 js 文件：
<!-- 配置文件 -->
<script type="text/javascript" src="/static/tinymce/tinymce.min.js"></script>然后配置 TinyMCE 的功能模块，并实例化编辑器：
<!-- 实例化编辑器 -->
<script>
tinymce.init({
selector: '#mytextarea',
convert_urls: false,
language: 'zh_CN',
plugins: 'advlist,autolink,link,image,imagetools,media,lists,preview,code,codesample',
toolbar: 'code formatselect fontselect fontsizeselect alignleft aligncenter alignright alignjustify blockquote undo redo removeformat advlist autolink link image media lists preview bold italic underline strikethrough indent outdent codesample',
images_upload_url: "", // 文件上传接口 url
height: 500,
extended_valid_elements: "script[language|type]",
setup: function(editor) {
editor.on('change', function() {
editor.save();
});
}
});
</script>最后将编辑器主体加载到容器中：
<!-- 加载编辑器的容器，注意这里的 id="mytextarea" 要和上面配置项里的 selector: '#mytextarea' 保持一致 -->
<textarea id="mytextarea" name="content" type="text/plain"></textarea>本站原创内容，如需转载请注明来源：https://www.liutonghui.com/216.html
评论列表（0条）
暂时没有评论！