vue+富文本插件

<template>
  <div >
    <vue-ueditor-wrap v-model="msg.html" :config="myConfig" />
  </div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
  name: 'Noticeedit',
  components: {
    VueUeditorWrap
  },
  props: ['msg'],
  data() {
    return {
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
        // serverUrl: 'http://35.201.165.105:8000/controller.php',
        // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
        UEDITOR_HOME_URL: '/UEditor/',
        toolbars: [[
          'fullscreen', 'source', '|', 'undo', 'redo', '|',
          'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
          'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
          'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
          'directionalityltr', 'directionalityrtl', 'indent', '|',
          'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify'
        ]]
      }
    }
  }
}
</script>

备注:

  * 加载ueditor.config.js失败,请检查您的配置地址UEDITOR_HOME_URL填写是否正确!

    官网:https://github.com/haochuan9421/vue-ueditor-wrap

    quick start的第一步解决此问题