富文本编辑器Simditor

文档地址：https://simditor.tower.im/docs/doc-usage.html

父组件：

options: {
          placeHolder: 'this is placeHolder',
          toolbarFloat: false,
          toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'],
          pasteImage: true,
          upload: {
            url: config.baseUrl + `sys/policy/uploadPics`, // 文件上传的接口地址(这个工具后端给的接口填写)
            params: { token: getToken('access_token') }, // （这是额外的参数）键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
            fileKey: 'files', // 服务器端获取文件数据的参数名
            connectionCount: 3,
            leaveConfirm: '正在上传文件'
          }
}

富文本编辑器组件：

<template>
  <div class="simditor">
    <textarea :id="id"></textarea>
  </div>
</template>
<script>
  import Simditor from 'simditor'
  import $ from 'jquery'
  import 'simditor/styles/simditor.css'
  import config from '@/config/index'

  export default {
    name: 'lin-ueditor',
    props: {
      options: { // 配置参数
        type: Object,
        default() {
          return {}
        }
      },
      policyContent: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        id: new Date().getTime(), // 这是为了在同一个组件里放多个富文本编辑器，而加的标记
        editor: ''
      }
    },
    mounted () {
      let vm = this
      this.editor = new Simditor(Object.assign({}, {
        textarea: $(`#${vm.id}`)
      }, this.options))
      // 不知道干什么的
      this.editor.on('valuechanged', (e, src) => {
        this.valueChange(e, src)
      })
      // 修改上传后图片的路径
      this.editor.uploader.on('uploadsuccess', function(e, file, result) {
          var $img, $mask, msg
          if (!file.inline) {
            return
          }
          $img = file.img
          $img.removeData('file')
          $img.removeClass('uploading')
          $mask = $img.data('mask')
          if ($mask) {
            $mask.remove()
          }
          $img.removeData('mask')
          if (result.success === false) {
            msg = result.msg || '上传被拒绝了'
            this.$message.error(msg)
            $img.attr('src', this.defaultImage)
          } else {
            // 修改图片路径和样式
            $img.attr({
              src: config.baseUrl + result.file_path, // 路径
               200,
              height: 200
            }) // 这里就是成功后的替换，将这个改成了我们所使用的字段名file
          }
        }
      )
     this.setContentValue(this.policyContent)
    },
    methods: {
      // 获取富文本编辑器的值
      valueChange(e, val) {
        this.$emit('editorContentValue', this.editor.getValue())
      },
      // 给富文本编辑期赋值
      setContentValue (val) {
        this.editor.setValue(val)
      }
    }
  }
</script>

<style scoped>

</style>