Layui 是一款采用自身模块规范编写的情怀型前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。因此深受FE们的喜爱。
但是在最近项目中发现layui中整合百度ckeditor之后，通过form表单提交时，后台接收到的富文本编辑器中的值为空值，经过排查前端也没有获取到富文本编辑器的内容。
但是去掉富文本编辑器之后，单纯<textarea>却又是正常的，所以初步断定是textarea没有获取到CKEDITOR中的内容。
解决方法：
主要看script部分，为了完整展示，截取了部分代码。
- <form class="layui-form layui-box" style='padding:25px 30px 20px 0' action="__SELF__" data-auto="true" method="post">
- <div class="layui-form-item">
- <label class="layui-form-label">文章内容</label>
- <div class="layui-input-block">
- <textarea name="content" required="required" class="layui-textarea"></textarea>
- </div>
- </div>
- <div class="hr-line-dashed"></div>
- <div class="layui-form-item text-center">
- <button class="layui-btn" type='submit'>保存数据</button>
- <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
- </div>
- <script>
- require(['ckeditor'], function () {
- //创建编辑器
- var editor = window.createEditor('[name="content"]');
- //获取编辑器内容
- var content = editor.getData();
- //异步将内容同步textarea
- editor.sync(content);
- });
- window.form.render();
- </script>
- </form>
主要就是将CKeditor编辑器中的内容通过异步同步到textarea中。如果在这里你用的不是百度的富文本编辑器，而是官方的，那么也可以参考官方文档解决。思路都是一样的。
