在Vue项目使用kindEditor富文本编译器以及上传图片

真的不想哇

已于 2024-04-19 16:13:41 修改

阅读量1.9k

点赞数 26

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2024-04-16 17:19:53 首次发布

本文链接：https://blog.youkuaiyun.com/xiaoHelloWord/article/details/137832501

第一步

npm install kindeditor

第二步，建立kindeditor.vue组件

<template>
  <div class="kindeditor">
    <textarea :id="id" name="content" v-model="outContent"></textarea>
  </div>
</template>

<script>
  import '../../node_modules/kindeditor/kindeditor-all.js'
  // import '../utils/kindeditor-all.js?v=1'
  import '../../node_modules/kindeditor/lang/zh-CN.js'
  import '../../node_modules/kindeditor/themes/default/default.css'

  export default {
    name: 'kindeditor',
    data() {
      return {
        editor: null,
        outContent: this.content
      }
    },
    props: {
      content: {
        type: String,
        default: ''
      },
      id: {
        type: String,
        required: true
      },
      width: {
        type: String
      },
      height: {
        type: String
      },
      minWidth: {
        type: Number,
        default: 650
      },
      minHeight: {
        type: Number,
        default: 100
      },
      items: {
        type: Array,
        default: function () {
          // lineheight  行距自定了，可全局搜索   ‘自定义行距’ 在/utils/kindeditor-all.js文件裏
          return [
            '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', 'multiimage',
            'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
            'anchor', 'link', 'unlink', '|', 'about'
          ]
        }
      },
      noDisableItems: {
        type: Array,
        default: function () {
          return ['source', 'fullscreen']
        }
      },
      filterMode: {
        type: Boolean,
        default: true
      },
      htmlTags: {
        type: Object,
        default: function () {
          return {
            font: ['color', 'size', 'face', '.b