vue中使用富文本編輯器ueditor

參考：

https://www.cnblogs.com/daimo/p/7525146.html

https://blog.csdn.net/liujun03/article/details/84453287

1.下載文件包http://ueditor.baidu.com/website/download.html（我用的jsp的UTF-8版本）

2.文件包放到static下

 

3.  cnpm install --save vue-ueditor-wrap

4.使用

<div class="ueditor">
            <vue-ueditor-wrap v-model="content" :config="myConfig"></vue-ueditor-wrap>
          </div>

js

import VueUeditorWrap from 'vue-ueditor-wrap'
  export default {
    name: 'needForm',
    components: {VueUeditorWrap},
    data() {
      return {
        
        myConfig: {
          // 如果需要上傳功能,找后端小伙伴要服務器接口地址
          // serverUrl: this.$config.baseUrl + 'ueditor/ueditorConfig',
          // serverUrl: 'http://localhost:8090/ueditor/ueditorConfig',
          // 你的UEditor資源存放的路徑,相對於打包后的index.html
          UEDITOR_HOME_URL: '/ueditor/',
          // 編輯器不自動被內容撐高
          autoHeightEnabled: false,
          // 工具欄是否可以浮動
          autoFloatEnabled: false,
          // 初始容器高度
          initialFrameHeight: 340,
          // 初始容器寬度
          initialFrameWidth: '100%',
          // 關閉自動保存
          enableAutoSave: true
        },
        content: ''
      }
    },
    mounted() {
      his.editor.setContent("1223"))
    },
    watch: {

    },
    methods: {
      
    },
    destroyed() {
    　
    }
  }

 

 

配置工具欄顯示的內容