vue中使用富文本编辑器

原创

已于 2024-12-05 08:59:28 修改 · 4.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-09-10 10:55:39 首次发布

使用的是tinymce第三方插件

npm install tinymce
npm install @tinymce/tinymce-vue

封装组件

components下新增editor目录

新增editor.vue文件

/**
 * 富文本编辑器组件
 * (c) 2024-02
 * @param {String} value 绑定的数据字段
 * @param {Boolean} disabled 是否禁用，默认值 false
 * @param {Boolean} menubar 是否显示菜单栏，默认值 false
 * @param {Boolean} statusbar 是否显示状态栏，默认值 true
 * @param {Boolean} resize 是否可以拖动高度，默认值 true
 * @param {Number} height 编辑器高度，默认值 400
 * @param {String | Array} plugins 编辑器插件
 * @param {String | Array} toolbar 编辑器工具栏
 * @example: <editor v-model="editorHtml" :height="300"></editor>
 */
<template>
  <div class="editor">
    <tinymce-editor v-model="myValue" :init="init" :disabled="disabled" @onBlur