vue 富文本编辑器使用

最新推荐文章于 2024-08-14 23:36:28 发布

进阶__前端

最新推荐文章于 2024-08-14 23:36:28 发布

阅读量574

点赞数

分类专栏： vue javascript 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_38074118/article/details/113439833

版权

本文介绍了在Vue与TypeScript环境下如何选择和使用富文本编辑器，重点推荐了wangEditor，强调了其易于使用和维护的特点，并提供了基本的引入和创建编辑器的步骤，同时建议封装成组件以便于复用。还提到了图片上传的处理方式，包括直接上传到服务器和本地图片的自定义上传。

摘要由CSDN通过智能技术生成

环境：在vue + TS 中使用富文本编辑器

markdown文本编辑器更加适合开发者使用

普通用户更适合类似word的使用方式，所见即所得

推荐使用的富文本编辑器

ckeditor5，内置插件和扩展性非常好
quill
medium-editor，比较老牌
wangEditor，近几年国产的
ueditor，百度开发，但是不再维护
tinymce

使用时候可以查看是否还在维护，在根据自己的应用场景，富文本编辑器是个有优缺点，列出的都是比较稳定的

使用wangEditor

官网： www.wangEditor.com/

会有基本效果，按照文档使用

npm i wangeditor --save
import E from ‘wangeditor’
const editor = new E(’#div1’)
editor.create()
推荐封装一个组件，在使用时候直接调用

组件基本思路

引入wangeditor
设置容器存放富文本编辑器
new创建对应的实例，给一个节点
通过v-model绑定对应的数据，在组件中使用value接收

组件代码

<template>
  <div ref="editor" class="text-editor"></div>
</template>

<script lang="ts">
import Vue from 'vue'
import E from 'wangeditor'

export default Vue.extend({
   
  name: 'TextEditor',
  props: {
   
    value: {
   
      type: String,
      default: ''
    }
  },
  // 组件已经渲染好，可以初始化操作 DOM 了
  mounted () {
   
    this.initEditor()
  },
  methods: {
   
    initEditor () {
   
      const editor = new E(this.$refs.editor as any)
      // 注意：事件监听必须在 create 之前
      editor.config.onchange = (value: string) => {
   
        this.$emit('input', value)
      }
      editor.create()

      // 注意：设置初始化必须在 create 之后
      editor.txt.html(this.value)
    }
  }
})
</script>

<style lang="scss" scoped></style>

使用方式

<template>
  <el-card>
    <div slot="header">
      <el-steps :active="activeStep" simple>
        <el-step
          :title="item.title"
          :icon="item.icon"
          v-for="(item, index) in steps"
          :key="index"
          @click.native="activeStep = index"
        ></el-step>
      </el-steps>
    </div>
    <el-form label-width="80px">
      <div v-show="activeStep === 0">
        <el-form-item label="课程名称">
          <el-input v-model="course.courseName"></el-input>
        </el-form-item>
        <el-form-item label="课程简介">
          <el-input v-model="course.brief"></el-input>
        </el-form-item>
        <el-form-item label="课程概述">
          <el-input
            style=