Layui 使用 TinyMCE 富文本编辑器

Layui 使用 TinyMCE 富文本编辑器1.进入 Layui 第三方组件平台下载该拓展组件2.写一个测试 Demo3.调用 TinyMCE 组件渲染下该文本域4.效果演示5.源码地址

Layui 使用 TinyMCE 富文本编辑器

1.进入 Layui 第三方组件平台下载该拓展组件

2.写一个测试 Demo

代码结构树如下，extend 目录下加入我们刚下载的 tinymce 拓展组件

随便写一个 form 表单

<form class="layui-form layui-form-pane"><div class="layui-form-item"><label class="layui-form-label">文本域</label><div class="layui-input-block"><textarea name="desc" id="contentArea" cols="30" rows="10" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><div class="layui-input-inline"><button class="layui-btn" lay-submit lay-filter="tinymceDemo">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form>

发现样式还挺好看，虽然还没用 tinymce 渲染

3.调用 TinyMCE 组件渲染下该文本域

<script type="text/javascript">layui.extend({tinymce:'{/}./plugin/layui/extend/tinymce/tinymce'}).use(['tinymce','form'],function(){var form = layui.form,tinymce = layui.tinymce;//使用tinymce渲染var contentArea = tinymce.render({elem:"#contentArea",height:600,width:'100%'})});</script>

发现样式根本没有变化，这时候我们打开开发者工具（按F12），看见下方报错，一分析知道是本地加载文件的跨域问题

ps：如果是写后台这样调用应该是没有问题的

这里提供一种解决办法

找到浏览器快捷方式位置，右键属性在后面加一串 --allow-file-access-from-files，中间有个空格符

记得应用后关闭所有浏览器页面，重新用该快捷方式打开浏览器！ ！ ！ ( 特 别 重 要 ) \color{red}{！！！(特别重要)} ！！！(特别重要)

再打开刚刚的 Demo 文件，发现现在显示正常了

关于TimyMce的具体配置，请参考 TinyMCE中文文档 和TinyMCE官方文档

4.效果演示

5.源码地址

GitHub地址：/1123GY/Layui