富文本编辑器

### 页面引入 ```html <!-- css --> <link rel="stylesheet" href="../../../js/kindeditor-4.1.10/themes/default/default.css"/> <!-- javascript --> <script charset="utf-8" src="../../../../js/kindeditor-4.1.10/kindeditor.js"></script> <script charset="utf-8" src="../../../../js/kindeditor-4.1.10/lang/zh_CN.js"></script> ``` 富文本同样包含在form内, 但是其值另外处理 ```html <textarea id="content" placeholder="请输入富文本内容" class="layui-textarea"></textarea> ``` ![image.png](https://cos.easydoc.net/27100029/files/k9wiw6og.png) ### JS 代码 #### 写在 load 外面 ```javascript var content KindEditor.ready(function (K) { // #content 对应textarea的id content = K.create('#content', { uploadJson: '/manage/common/kinderEditor/upload?type=9', // 这里的type要注意 // 功能模块(不能传错)1知识库 2学院 3website 4杂志 5:商品 6:品牌 7faq 8榜单页面 9:标签 10 olabel介绍 11商品素材 allowFileManager: true }); } ``` #### 写在 load 里面 ```JavaScript content.sync(); // 数据同步 var formContent = $('#content').val(); // 获取了富文本的内容 formContent = onion.transform(formContent); // 类型转化 ``` #### 数据回显 ```javascript content .html(dfniDetail); // dfniDetail为从后端返回的数据 ```