普益云编辑器

pyy-editor编辑器是基于Tinymce 5.8.2进行的二次封装。

安装

npm install pyy-editor

运行脚本命令

cd path/to/your/project
# 使用 Windows电脑 PowerShell
Copy-Item node_modules/pyy-editor/skins public/tinymce/skins -force -recurse
Copy-Item node_modules/pyy-editor/plugins/powerpaste public/tinymce/plugins/powerpaste -force -recurse
Copy-Item node_modules/pyy-editor/tinymce.vue path/to/your/conponents

# Linux
cp -rf node_modules/pyy-editor/skins public/tinymce/skins
cp -rf node_modules/pyy-editor/plugins/powerpaste public/tinymce/plugins/powerpaste
cp node_modules/pyy-editor/tinymce.vue path/to/your/conponents

配置

// 仅使用 npm 包时建议导入tinymce
import tinymce from 'pyy-editor';
Vue.prototype.$tinymce = tinymce;

import {tinymceUtils} from "pyy-editor/utils";  // 导入处理工具类

// 初始化 配置处理类
let tinymceConfigHandler = new tinymceUtils.ConfigHandler();
// 全局挂载
Vue.prototype.$_tinymceConfigHandler = tinymceConfigHandler;
// 初始化 文件上传处理类 api.tinymce为项目中上传接口
let uploadHandler = new tinymceUtils.UploadHandler(api.tinymce);
// 全局挂载
Vue.prototype.$_uploadHandler = uploadHandler;

组件使用

<tinymce v-model="data.content"    // 正文内容
         :configHandler="$_tinymceConfigHandler" // 组件处理类实例对象
         :uploadHandler="$_uploadHandler"  // 上传处理类实例
         :additionalParams="{bizType: 'news'}"  // 附加参数，用于所上传接口 如：业务类型
         :whiteList='["https://hnedu.obs.cn-south-1.myhuaweicloud.com"]'   // 白名单
         :baseUrl="window.location.origin" // 编辑器源路径
         :height="700" // 编辑器高度
></tinymce>

公共样式

在v-html或插入富文本到页面中时导入。

<style src="pyy-editor/skins/content/default/content.css" scoped></style>

主要功能

1、富文本框工具初始版本

2、组件配置重新封装

3、上传配置及相关方法重新封装

4、image插件调整：“插入/编辑图片”编辑器调整标签顺序

5、新增pdf2img插件：将pdf文件转成图片

6、media插件：动态配置“插入/编辑媒体”编辑器“内嵌”和“高级”标签

7、远程图片抓取后地址替换成本地链接

8、新增另存为模板插件：将当前正文内容保存为模板

9、其他优化

版本信息

1.0.0（2023年2月1日） -- 初始化