拿来吧你,vue3-tinymce 富文本编辑器__Vue.js__前端
发布于 2 年前 作者 banyungong 4636 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

theme: vuepress

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

为什么

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

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

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

一些示例

示例1:经典设置 9281632625167_.pic.jpg

示例2:类似掘金富文本editor设置 9291632625183_.pic.jpg

组件特色

开箱即用

组件内置按需加载 tinymce@5.8.2 版本 cdn 资源,无需另外引入。使用 v-if 在必要时渲染组件。

属性 script-src 可自定义 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 额外的参数。图片默认 file
  custom_images_upload_param: { id: 'xxxx01', age: 18 }
}

快速上手

获取组件

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

这里也提供 NPM 引入:npm install @jsdawn/vue3-tinymce,然后在 vue 中引入

import Vue3Tinymce from '@jsdawn/vue3-tinymce';

在 vue 中使用

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

<script setup>
import { reactive } from 'vue';
// 引入组件
import Vue3Tinymce from 'your-path/Vue3Tinymce';

const state = reactive({
  content: 'hello vue3-tinymce!',
  // editor 配置项
  setting: {
    height: 400 // editor 高度
  }
});
</script>

组件属性

名称 类型 描述
modelValue String 绑定值/内容,建议以 v-model 的形式使用
setting Object 设置项,延用官方 tinymce 设置
setup Function 编辑器设置时的回调,回调参数 editor 实例,在此将编辑器事件添加到 TinyMCE 中
script-src Function 自定义 tinymce 静态资源,支持绝对路径和网络地址。内置按需加载 tinymce@5.8.2
@change Function 编辑器监听到 change input undo redo 时触发,回调参数为编辑器 content
@init Function 编辑器初始化完成后触发,回调参数 editor 实例

使用示例

点击前往 使用示例

转载声明: 请注明作者,注明原文链接,有疑问致邮 kingwyh1993@163.com

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 青山依旧 原文链接:https://juejin.im/post/7012073370023886856

回到顶部