wangeditor 富文本编辑器使用

使用环境vue3 + ts  ，添加了字数限制

尝试了两种，使用方法类似（参考文档），工具栏图标有不同，最后选用了第一种。

一、wangeditor 安装

 npm i wangeditor --save

使用

这里封装了个简单组件

<template>
  <div class="editor-container">
    <div id="editor"></div>
    <div :class="overflow ? 'editorText alert' : 'editorText'" v-if="maxLength > 0">
      {{ editorLen }} / {{ maxLength }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineExpose, watch } from 'vue'
import EWangEditor from 'wangeditor'   //引入

const props = defineProps({
  htmls: {  
    type: String,
    default: ''
  },
  height: {          //编辑框高度
    type: Number,
    default: 200
  },
  maxLength: {       //字数限制
    type: Number,
    default: -1
  },
  placeholder: {
    type: String,
    default: '请输入内容...'
  },
  menuList: {        // 工具栏配置           
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['contentChange'])
const editor = ref()
const editorLen = ref(0)       //字数统计
const overflow = ref(false)    //文本溢出

const initEditor = function () {    //初始化 创建实例
  if (editor.value) return
  else {
//这里的EWangEditor同引入时的名称一致
    editor.value = new EWangEditor('#editor')
    editor.value.customConfig = editor.value.customConfig
      ? editor.value.customConfig
      : editor.value.config
//change监听  做字数限制处理
    editor.value.customConfig.onchange = (html) => {
      console.log(html, 'editor change')
      if (props.maxLength > 0) {
        let reg = /<[^<>]+>/g                     //去标签
        let value = html.replace(reg, '')
        value = value.replace(/&nbsp;/gi, '')    //去空格
        editorLen.value = value.length
        overflow.value = value.length > props.maxLength
      }
      editor.value.editorContent = html
      emit('contentChange', editor.value.txt.html())
    }

    editor.value.config.menus = [...props.menuList]
    editor.value.config.height = props.height
    editor.value.config.placeholder = props.placeholder
    editor.value.config.showFullScreen = false

    editor.value.create()
    resetEditor()
    console.log(editor.value, 'editor.value')
  }
}

onMounted(() => {
  initEditor()
})
//设置初始内容
const resetEditor = function (val?: string) {
  editor.value.txt.html(val || props.htmls)
}
//销毁
const destroyEditor = function () {
  editor.value.destroy()
  editor.value = null
}
//清空
const clearEditor = function () {
  editor.value.txt.clear()
}

defineExpose({ clearEditor,  destroyEditor, resetEditor })

</script>

<style scoped>
.editor-container {
  width: 100%;
  position: relative;
}
.editorText {
  position: absolute;
  bottom: 0;
  right: 10px;
  color: #909399;
  z-index: 10001;
}
.alert {
  color: #f56c6c;
}
:deep(.vcp-fullscreen-toggle) {          //这里隐藏了 全屏
  display: none;
}
</style>

效果图：

我这里工具栏按需求只放了自己需要的功能 

二、vue-quill-editor安装

npm install vue-quill-editor --save

全局引入：

 //引入quill-editor编辑器
 import VueQuillEditor from 'vue-quill-editor'
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
 Vue.use(VueQuillEditor)
 

使用

此处代码不全，不可正常运行，使用参考文档

 <quill-editor  class="editor"  v-model="content" ref="customQuillEditor" :options="editorOption" />


const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  ["blockquote", "code-block", "formula"], // 引用  代码块 插入公式
  [{ header: 1 }, { header: 2 }], // 1、2 级标题
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
  [{ script: "sub" }, { script: "super" }], // 上标/下标
  [{ indent: "-1" }, { indent: "+1" }], // 缩进
  [{ direction: "rtl" }], // 文本方向
  [{ size: [false,"14px","16px","18px","20px","22px","26px","28px","30px"] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5,6, false] }], // 标题
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  [{ font: ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",] }], // 字体种类
  [{ align: [] }], // 对齐方式
  ["clean"], // 清除文本格式
  ["link", "image", "video", "report"] // 链接、图片、视频、自定义行为
]


const editorOption = {
        placeholder:'你想说什么？',
          toolbar: {
            container: toolbarOptions,  // 工具栏
        }
}

效果图：