vue集成kindeditor

kindeditor官方文档：http://kindeditor.net/doc.php

vue-kindeditor官方: https://github.com/ff755/vue-kindeditor

---

一、安装kindeditor

npm install vue-kindeditor

npm install kindeditor

---

二、使用

1、在main.js增加如下代码

importVueKindEditorfrom 'vue-kindeditor'

import 'kindeditor/kindeditor-all-min.js'

import 'kindeditor/themes/default/default.css'

 Vue.use(VueKindEditor)

2、解决图片上传跨域？通过修改源码文件

kindeditor-all.js

3、要引入富文版的.vue

<template>

  <div id="hello">

    <!--

      uploadJson:上传接口地址，指定上传文件的服务器端程序

      basePath：图片反显地址

      items：要显示的功能列表，配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符

      @on-content-change：监听编辑器的改变事件

      content：编辑器的值

     -->

    <h1>vue-kindedtior demo</h1>

   <editor id="editor_id" height="500px" width="700px" :content="editorText"

    :items="kitem"

    fileManagerJson=""

    basePath=''

    uploadJson=""

    :loadStyleMode="false"

    @on-content-change="onContentChange"></editor>

  </div>

</template>

<script>

export default{

  name: 'hello',

  data() {

    return{

      kitem:['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', '|', 'image',

          'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',

          'anchor', 'link', 'unlink', '|', 'about'],

      editorText: '',//编辑器的值

    }

  },

  created() {

  },

  methods:{

    onContentChange (val) {

      this.editorText = val

    },

    afterChange() {

    }

  }

}

</script>

<style>

</style>

参考：

https://blog.csdn.net/alongxiao/article/details/104831596

https://segmentfault.com/a/1190000019408320?utm_source=tag-newest

Ps:转载请说名出处，谢谢，尊重劳动成果。