vue2-常用富文本编辑器使用介绍

合集 - vue2-功能实现(6)

1.vue2-实现动态显示时间2024-12-092.vue+.net 利用signalR实现实时推送和显示通知消息02-133.插件1-图片预览组件v-viewer（vue2）02-114.vue2-自定义全局toast提示插件2024-10-28

5.vue2-常用富文本编辑器使用介绍2024-07-21

6.Vue2-利用自定义指令实现按钮权限控制2024-07-13

收起

mavon-editor

安装命令

npm install mavon-editor@2.9.1 --save

全局配置

1. 修改main.js文件，添加如下配置

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)

组件使用

1. 不含视频上传功能

<el-row>
            <el-col :spam="24">
              <el-form-item :label-width="formLabelWidth" label="内容" prop="contentMd">
                <mavon-editor placeholder="输入文章内容..." style="height: 500px" ref=md v-model="article.contentMd"
                  @imgDel="imgDel" @imgAdd="imgAdd">
                </mavon-editor>
              </el-form-item>
            </el-col>
          </el-row>

2. 含视频上传功能

<el-row>
            <el-col :spam="24">
              <el-form-item :label-width="formLabelWidth" label="内容" prop="contentMd">
                <mavon-editor placeholder="输入文章内容..." style="height: 500px" ref=md v-model="article.contentMd"
                  @imgDel="imgDel" @imgAdd="imgAdd">
                  <!-- 左工具栏后加入自定义按钮  -->
                  <template slot="left-toolbar-after">
                    <el-dropdown>
                      <span class="el-dropdown-link">
                        <i class="op-icon fa el-icon-video-camera" title="上传视频"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                          <el-upload style="display: inline-block;" :show-file-list="false" ref="upload" name="filedatas"
                            action="" :http-request="uploadVideo" multiple>
                            <span>上传视频</span>
                          </el-upload>
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <div @click="dialogVisible = true">添加视频地址</div>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </mavon-editor>
              </el-form-item>
            </el-col>
          </el-row>

3. 相关事件介绍

@imgAdd="imgAdd"：将图片上传到服务器，返回地址替换到md中

imgAdd: function (pos, $file) {
  var formdata = new FormData();
  formdata.append('multipartFile', $file);
  upload(formdata).then(res => {
    this.$refs.md.$img2Url(pos, res.data.url);
  }).catch(err => {
    console.log(err)
  })
},

@imgDel="imgDel"：删除图片，某些业务场景下，需要删除服务器端图片时需要此方法

imgDel: function (filename) {
  //delBatchFile(filename[0].split(this.img)[1])
},

uploadVideo：上传视频

//上传视频
uploadVideo(param) {
  this.openLoading();
  this.files = param.file;
  var formData = new FormData();
  formData.append("multipartFile", this.files);
  upload(formData)
    .then((res) => {
      const $vm = this.$refs.md;
      // 将文件名与文件路径插入当前光标位置，这是mavon-editor 内置的方法
      $vm.insertText($vm.getTextareaDom(), {
        prefix: `<video height=100% width=100% controls autoplay src="${res.data.url}"></video>`,
        subfix: "",
        str: "",
      });
      this.loading.close();
    })
    .catch((err) => {
      this.loading.close();
    });
},

4. 获取编辑器中的内容

 this.content = this.$refs.md.d_render;

wangeditor

安装命令

npm install @wangeditor/editor --save  
npm install @wangeditor/editor-for-vue --save

组件使用

<template>
  <div class="app-container">
  <el-row :gutter="24">
    <el-form-item label="关于我">
      <div style="border: 1px solid #ccc">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"/>
        <Editor
          style="height: 500px; overflow-y: hidden"
          v-model="form.aboutMe"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"/>
      </div>
    </el-form-item>
  </el-row>
  </div>
</template>


<script>
  import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
  components: {
    Editor,
    Toolbar,
  },
  data() {
    return {
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
            customUpload: this.contentUpload, // this.contentUpload 是 methods 中的一个普通方法
          },
          //配置上传视频
          uploadVideo: {
            customUpload: this.uploadVideo,
          },
          codeSelectLang: {
            // 代码语言
            codeLangs: [
              { text: "CSS", value: "css" },
              { text: "HTML", value: "html" },
              { text: "XML", value: "xml" },
              { text: "Java", value: "java" },
              // 其他
            ]
          }
        }
      }
      mode: "default", // or 'simple'
    }
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    //上传视频
    uploadVideo: function (file, insertFn) {
      this.files = file;
      //FormData 对象
      var formData = new FormData();
      // 文件对象
      formData.append("multipartFile", this.files);
      upload(formData).then((res) => {
        insertFn(res.data.url, "");
      });
    },
    //上传图片
    contentUpload: function (file, insertFn) {
      this.files = file;
      //FormData对象
      var formData = new FormData();
      //文件对象
      formData.append("multipartFile", this.files);
      upload(formData).then((res) => {
        insertFn(res.data.url, "", res.data.url);
      });
    },
    onCreated(editor) {
      //一定要用 Object.seal() ，否则会报错
      this.editor = Object.seal(editor);
    },
   }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

预览图