富文本编辑器（协同办公系统-后勤日志管理）

富文本编辑器

下载地址：http://www.kindsoft.net/license.php

1.效果展示

2.下载的内容放到项目中

3.html页面

3.1head标签中引入

<link rel="stylesheet" type="text/css" href="../../static/kindeditor/themes/default/default.css">

3.2弹出框

​ dialog上需要绑定事件 @opened=“opened”，打开弹出框之后做富文本框的初始化 （见4.2步骤）

<el-form-item label=" 工作日志:" :rules="[{ required: false, message: '请输入工作内容' }]">
            <textarea id="editor" name="content"
                      style="width:700px;height:300px;"  v-model="editorValue"></textarea>
</el-form-item>

3.3JS引入

<script type="text/javascript" src="../../static/kindeditor/kindeditor-all.js"></script>
<script type="text/javascript" src="../../static/kindeditor/lang/zh-CN.js"></script>

4.js页面

4.1Vue对象外

KindEditor.ready(function(K) {
   window.editor = K.create('#editor');

});

4.2富文本框的初始化

opened:function(){
   // 打开Dialog之后创建编辑器
   this.editor =KindEditor.create('#editor', {
      minHeight:'350px',
      // allowFileManager : true,
      // uploadJson : contextPath + "/api/hrpRepairProblemProcess/portal/uploadFile",
      // afterUpload: function(){this.sync();}, //图片上传后，将上传内容同步到textarea中
      // afterBlur: function(){this.sync();},   失去焦点时，将上传内容同步到textarea中
      items:[
         'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
         'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
         'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
         'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
         'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
         'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'insertfile',
         'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'link', 'unlink', '|', 'about'
      ]
   });
},

5.取值，清空

this.editor.html(); //取值
$("#editor").val(""); //清空