首页 > 其他分享 >vue2-常用富文本编辑器使用介绍

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

时间:2024-07-21 10:40:40浏览次数:18  
标签:files 文本编辑 file res formData 常用 editor vue2 上传

mavon-editor

安装命令

npm install [email protected] --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>

image.png

  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">
                  <!-- 左工具栏后加入自定义按钮  -->
                  <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>

image.png

  1. 相关事件介绍

@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();
    });
},
  1. 获取编辑器中的内容
 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>

预览图

image.png

标签:files,文本编辑,file,res,formData,常用,editor,vue2,上传
From: https://www.cnblogs.com/mingcore/p/18314238

相关文章

  • HR常用的招聘平台,招人快人一步!
    以下是一些HR常用的招聘平台:吉鹿力招聘网(吉鹿力招聘网求职招聘平台)是一家专属于年轻人的移动社交招聘平台,为年轻职场人匹配最佳工作机会,拓展职场人脉,提升职场价值.大街想要做的,就是用互联网思维,以颠覆招聘行业的方式来服务招聘行业。不同的招聘平台有各自的特点和......
  • mysql常用命令总结
    连接数据库格式mysql-h连接地址-u用户-p密码-P端口例如mysql-h127.0.0.1-uroot-p123456-P3310 常用用户管理操作https://dev.mysql.com/doc/refman/8.0/en/create-user.html创建用户CREATEUSER'用户名字'@'%'IDENTIFIEDBY'密码';例如CREATEUSER'wxh......
  • 数学中常用的英文惯用法
    英文翻译beforeproceedingfurther在进一步之前i.e.也就是,即cf.即confer,参考onecan...人们能...,我们可以...withrespectto/w.r.t关于.........
  • redis常用命令大全
    以下是一个以表格形式总结的Redis命令概览:命令类别命令描述通用PING查看服务是否运行通用DBSIZE查看当前数据库中key的数目通用SELECTindex切换到指定的数据库通用FLUSHDB清空当前数据库的所有key及其值通用FLUSHALL清空所有数据库的所有key及其值通用QUIT/EXIT退出当前......
  • 解析Java中1000个常用类:GregorianCalendar类,你学会了吗?
    在线工具站推荐一个程序员在线工具站:程序员常用工具(http://cxytools.com),有时间戳、JSON格式化、文本对比、HASH生成、UUID生成等常用工具,效率加倍嘎嘎好用。程序员资料站推荐一个程序员编程资料站:程序员的成长之路(http://cxyroad.com),收录了一些列的技术教程、各大面试专......
  • 解析Java中1000个常用类:GregorianCalendar类,你学会了吗?
    在线工具站推荐一个程序员在线工具站:程序员常用工具(http://cxytools.com),有时间戳、JSON格式化、文本对比、HASH生成、UUID生成等常用工具,效率加倍嘎嘎好用。程序员资料站推荐一个程序员编程资料站:程序员的成长之路(http://cxyroad.com),收录了一些列的技术教程、各大面......
  • Nginx系列-3 servername优先级和location优先级和常用正则表达式
    1.正则表达式和分组由于Nginx配置文件中经常出现正则表达式,因此本章节专门对常见的正则表达式进行简单介绍。[1]开始与结束^表示匹配输入字符串的开始$表示匹配输入字符串的结束[2]匹配次数?表示匹配0次或者1次+表示匹配1次或多次*表示匹配0从或多次{n}匹配n......
  • Java 语言及其常用集合类的操作,以及反射机制与注解
    目录一、Java语言概述二、Java集合框架ArrayList操作示例:HashMap操作示例:三、反射机制1.反射的示例五、总结Java是一种广泛使用的高级编程语言,因其平台独立性、简洁性及丰富的API而备受开发者青睐。一、Java语言概述 Java语言由JamesGosling等人......
  • Java工具库——Hutool的常用方法
    Hutool-All(或简称Hutool)是一个功能强大的Java编程工具库,旨在简化Java应用程序的开发。它提供了大量的工具类和方法,涵盖了各种常见任务,包括字符串处理、日期时间操作、文件操作、网络通信、加密解密、数据转换、图像处理、JSON操作、Excel处理、邮件发送等等。以下是Hutool-All的......
  • 【SQL】常用的分库策略有哪些
    分库是数据库设计中的一种常见策略,用于解决大规模数据处理和高并发访问的问题。通过将数据分布到多个数据库实例上,可以提高系统的可扩展性、性能和可用性。常用的分库策略主要包括垂直分库、水平分库和混合分库。以下是这些策略的详细介绍:1.垂直分库(VerticalSharding)垂......