@toast-ui/vue-editor中Viewer和Editor封装与使用

eadela

已于 2023-03-15 21:04:46 修改

阅读量1.2k

点赞数 1

文章标签： vue.js ui javascript

于 2023-03-15 20:56:35 首次发布

本文链接：https://blog.csdn.net/eadela/article/details/129568261

版权

需求：

页面局部文本内容需要编辑

实现：

方案一：

texteara 内容换行‘\n’ 替换未<br> ，不支持富文本内容，加粗斜线等等

方案二：

使用@toast-ui/vue-editor富文本编辑封装editor和viewer
“@toast-ui/vue-editor”: “^3.2.3”,
思想来源于vue-element-admin
vue-element-admin github
vue-editor使用方法
 @toast-ui/editor使用

实现过程

封装editor

<template>
  <editor
    :ref="refEditor"
    :initial-value="editorText"
    :options="editorOptions"
    initial-edit-type="markdown"
    preview-style="vertical"
    @change="onEditorChange"
  />
</template>

<script>
import '@toast-ui/editor/dist/toastui-editor.css'
import { generateUUID } from '@/utils/generateUUID'
import { Editor } from '@toast-ui/vue-editor'

export default {
  components: {
    editor: Editor
  },
  props: {
    editorValue: {
      type: String,
      default: ''
    },
    refEditor: {
      type: String,
      default: generateUUID()
    }
  },
  data() {
    return {
      editorText: '',
      editorOptions: {
        minHeight: '100px',
        language: 'zh-CN',
        useCommandShortcut: true,
        usageStatistics: true,
        hideModeSwitch: true,
        toolbarItems: [
          ['heading', 'bold', 'italic', 'strike'],
          ['hr', 'quote'],
          ['ul', 'ol', 'task', 'indent', 'outdent'],
          ['table', 'image', 'link'],
          ['code',