vue3-tinymce 富文本编辑器 #

vue3-tinymce 是基于 vue@3.x + tinymce@6.1.2 封装的富文本编辑器。

简单示例（掘金富文本编辑器）：

为什么 #

在开发管理台项目的时候有富文本编辑的功能需求，封装为组件方便使用。

个人开发一套完美的富文本编辑器难度大且耗时，在挑选插件中发现 tinymce editor 背景和功能都非常强大，并且文档清晰。基于 tinymce 封装组件是一个非常好的选择。

该组件清晰易懂，可自行修改为 vue2 版本使用。期待你的 Star ，发现问题可以提到 issues 👏

组件特色 #

开箱即用 #

组件内置按需加载 tinymce@6.1.2 版本 cdn 资源。使用 v-if 在必要时渲染组件。

组件包含 tinymce@6.1.2 , 属性 script-src 可自定义 tinymce 静态资源路径。支持绝对路径和网络地址。

稳定使用：建议将 tinymce 资源包放到项目根目录，使用绝对路径。

拓展图片上传 #

本组件拓展了 插入图片 的图片上传部分，重写 setting.images_upload_handler ，上传成功回填编辑器插入图片数据，关联 toolbar 和 plugins 中的 image 。

{
  // 开启组件拓展的 上传图片功能，工具栏 图片按钮 弹框中出现 `upload` 选项
  custom_images_upload: true,
  // 复用 图片上传 api 地址
  images_upload_url: 'your_upload_api_url...',
  // 上传成功回调函数，return 图片地址。默认 response.location
  custom_images_upload_callback: response => response.url,
  // 上传 api 请求头
  custom_images_upload_header: { 'X-Token': 'xxxx' }
  // 上传 api 额外的参数。图片默认 file
  custom_images_upload_param: { id: 'xxxx01', age: 18 }

快速上手 #

NPM 使用 #

下载组件

npm install @jsdawn/vue3-tinymce

在 vue3 中使用

<template>
  <vue3-tinymce v-model="state.content" :setting="state.setting" />
</template>
<script setup>
import { reactive } from 'vue';
// 引入组件
import Vue3Tinymce from '@jsdawn/vue3-tinymce';
const state = reactive({
  content: 'hello vue3-tinymce!',
  // editor 配置项
  setting: {
    height: 400, // editor 高度
});
</script>

稳定使用静态资源包（推荐）：

在 node_modules 目录中找到 @jsdawn/vue3-tinymce ，将 @jsdawn/vue3-tinymce/dist/tinymce 目录复制到项目根目录的 public/tinymce ， 然后传入 组件的 script-src :

<template>
  <vue3-tinymce
    v-model="state.content"
    :setting="state.setting"
    script-src="/tinymce/tinymce.min.js"
</template>

自定义组件使用 #

前往 Vue3Tinymce 仓库 获取 packages/Vue3Tinymce 组件文件，Copy 到自己项目中使用。setting 选项配置参照 tinymce 官方文档

组件属性 #

使用示例： #

简体中文 #

language - 语言 code， language_url - 语言包路径。

vue 脚手架项目可前往官网 下载语言包 放在 public/tinymce/langs 中，也可使用该组件语言包 cdn https://unpkg.com/@jsdawn/vue3-tinymce@2.0.2/dist/tinymce/langs/zh-Hans.js

const setting = {
    // 以中文简体为例
    language: 'zh-Hans',
    language_url: '/tinymce/langs/zh-Hans.js',

注意：如果项目存在多个编辑器存在的情况下，请为每个编辑器配置同样的语言配置。

经典设置 #

经典设置，包含了大部分可能用到的富文本编辑器功能和插件。

const classic_setting = {
  height: 300,
  toolbar:
    'undo redo | fullscreen | blocks alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontsize forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
  toolbar_mode: 'sliding',
  quickbars_selection_toolbar:
    'removeformat | bold italic underline strikethrough | fontsize forecolor backcolor',
  plugins: 'link image media table lists fullscreen quickbars',
  font_size_formats: '12px 14px 16px 18px',
  link_default_target: '_blank',
  link_title: false,
  nonbreaking_force_tab: true,
  // 以中文简体为例
  language: 'zh-Hans',
  language_url:
    'https://unpkg.com/@jsdawn/vue3-tinymce@2.0.2/dist/tinymce/langs/zh-Hans.js',
  See the Pen <a href="https://codepen.io/jsdawn/pen/BaxwWaQ">
  Vue3Tinymce-ex1</a> by 青山依旧 (<a href="https://codepen.io/jsdawn">@jsdawn</a>)
  on <a href="https://codepen.io">CodePen</a>.
类似掘金设置 #
类似掘金设置服务 简洁的图文写作，仅包含较常用的文字格式，图片上传，与链接功能。
const juejin_setting = {
  menubar: false,
  height: 190,
  toolbar:
    'bold italic underline h1 h2 blockquote codesample numlist bullist link image | removeformat fullscreen',
  plugins: 'codesample link image table lists fullscreen',
  toolbar_mode: 'sliding',
  nonbreaking_force_tab: true,
  link_title: false,
  link_default_target: '_blank',
  content_style: 'body{font-size: 16px}',
  // 自定义 图片上传模式
  custom_images_upload: true,
  images_upload_url: 'your_upload_api_url...',
  custom_images_upload_callback: (res) => res.url,
  custom_images_upload_param: { id: 'xxxx01', age: 18 },
  See the Pen <a href="https://codepen.io/jsdawn/pen/mdLBWbe">
  Vue3Tinymce-ex1</a> by 青山依旧 (<a href="https://codepen.io/jsdawn">@jsdawn</a>)
  on <a href="https://codepen.io">CodePen</a>.