更新记录

1.1.1（2025-03-19） 下载此版本

1. 更新vue2环境下状态销毁异常的问题

1.1.0（2025-03-07） 下载此版本

1. 更新状态销毁逻辑

1.0.9（2025-01-18） 下载此版本

1. 修复调色板在微信小程序vue2环境下的问题

平台兼容性

基于官方 uni-editor 的富文本编辑器 [sv-editor]

一、前言

首先，你需要了解 uni-editor 相关注意事项，以及api

传送门：

1. editor 组件概况
2. editorContext api详情
3. 仔细阅读 HTML 标签和 style 内联样式支持情况
4. 仔细了解 注意事项

二、本插件在官方 uni-editor 基础上做了什么

1. 提供插入视频的api
2. 提供插入链接的api
3. 在插入链接的基础上扩展了 @某人、#话题#、以及 添加附件 的api
4. 支持插入emoji表情包，可自定义表情包面板
5. 解决了在app端插入内容后，编辑器聚焦后自动弹出键盘的问题，提供api可在聚焦的同时取消键盘反复弹出带来的影响！！！
6. 工具栏toolbar与编辑器editor分离式写法，让你的代码更加自由
7. 插件内部大部分样式由css变量控制，更方便你使用样式穿透去自定义，对有暗黑主题的需求更加友好
8. 所有组件添加了 styleIsolation: 'shared' 配置项，再也不用怕小程序端的样式隔离穿透不了
9. 部分扩展基于renderjs，因此小程序端无法使用，可见下列关键功能概况详情
10. App与H5端关键扩展api如下：
    • noKeyboardEffect：取消键盘影响，不想让富文本聚焦后总是自动弹出键盘？这个api可以完美解决你的问题
    • focus：主动聚焦，你可以直接通过 editorCtx 实例调用此api，以便直接主动使富文本聚焦
    • backspace：主动退格(删除)，希望可以模拟键盘上的退格键？这个api如同键盘的 backspace 键一样，删除光标前一个单位，或者删除所选区域
    • 等等其他api，详见下文

三、兼容性

✅已兼容，❌未兼容

1. 实际请以真机效果为准，并不能保证所有机型都兼容，如遇到问题还请加群讨论
2. 注意：因为部分api基于renderjs，而小程序无法使用renderjs，故部分api和功能并不适配小程序，更多详情会在各api中说明
3. 特别注意：在微信小程序中，生成的 a 标签的 href 属性会被自动抹去，因此在微信小程序中是无法点击超链接跳转的，这点目前微信小程序官方固件不支持，暂时也没啥好的办法

四、关键功能概况

✅完美支持，☑可用但或有副作用，❌不支持

五、开始

1. 因为本插件不依赖其他第三方插件，因此直接点击右上角 下载并导入HBuilderX 导入至你的项目中即可
2. 强烈建议你先 使用HBuilderX导入示例项目 ，跑一下示例看亿下先，部分写法可以直接抄示例
3. 因为本插件提供除 editorContext 官方api外，额外扩展的api，需要你对js有着基本的掌握，特别是Promise和异步处理
4. 本插件仅为富文本编辑器，如要解析回显还请自行寻找富文本解析插件（不推荐rich-text）

六、插件目录结构

uni_modules
└─ sv-editor 
   ├─ components 
   │  ├─ common 
   │  │  ├─ config.js           // 配置文件
   │  │  ├─ file-handler.js     // 文件处理方法
   │  │  ├─ parse.js            // 富文本解析工具
   │  │  ├─ store.js            // 插件内全局状态管理
   │  │  ├─ tool-list.js        // 工具栏工具列表
   │  │  └─ utils.js            // 通用工具api
   │  ├─ icons 
   │  │  ├─ iconfont.css        // 字体图标样式
   │  │  └─ iconfont.ttf        // 字体图标
   │  └─ sv-editor 
   │     ├─ sv-choose-file.vue      // 文件选择器
   │     ├─ sv-editor-popup-more.vue    // 更多工具弹窗面板
   │     ├─ sv-editor-render.vue    // renderjs组件
   │     ├─ sv-editor-toolbar.vue   // 内置工具栏
   │     └─ sv-editor.vue       // 编辑器主体
   ├─ changelog.md 
   ├─ package.json 
   └─ readme.md 

七、基本使用

sv-editor 编辑器主体

符合uni_modules规范，无需引入直接使用

1. props

2. emits

• statuschange 事件还提供 uni.$emit('E_EDITOR_STATUSCHANGE', { ctx, event }) 抛出，你可以通过 uni.$on('E_EDITOR_STATUSCHANGE') 进行监听，但是不要忘记在适当的地方off关掉
• epaste (*特殊扩展) 事件还提供 uni.$emit('E_EDITOR_PASTE', { ctx, id, text, html, range }) 抛出，你可以通过 uni.$on('E_EDITOR_PASTE') 进行监听，但是不要忘记在适当的地方off关掉

sv-editor-toolbar 编辑器工具栏

与编辑器本体分离，按需引入使用

1. props

注意：

• 此处 toolList 等为全列表，详见 uni_modules/sv-editor/components/common/tool-list.js 文件。
• 若只想使用部分工具以及修改顺序，则给组件对应的props属性例如 :tools="['style', 'undo', 'redo']" 即可只使用该三项工具且顺序以该数组顺序排序。
• 关于图标，本插件内置了 阿里巴巴矢量图标库 的字体图标，如需使用其他图标，请自行替换。

2. emits

toolList

styleToolList

• 以上为插件内置样式工具，更多详见 支持设置的样式列表

• 缩进时，需要在解析插件（此处以mp-html为例）中添加如下缩进样式以供识别：

  // uni_modules/mp-html/components/mp-html/node/node.vue
  
  // 不要管插件内原始的样式代码
  <style>...</style>
  
  // 直接在该vue文件最底下添加如下scss样式
  <style lang="scss">
  @for $i from 1 through 10 {
    .ql-indent-#{$i} {
      // 默认一个缩进为2个em单位，此处对应
      text-indent: #{$i * 2}em;
    }
  }
  </style>

moreToolList

在微信小程序中，生成的 a 标签的 href 属性会被自动抹去，因此在微信小程序中是无法点击超链接跳转的，这点目前微信小程序官方固件不支持，暂时也没啥好的办法

emojiToolList

emoji默认列表

colorList

调色板默认颜色列表

api 合集

1. editorContext 官方api

2. 本插件编辑器实例 editorCtx 中，你可以直接通过富文本实例调用

• initHtml 在微信小程序端会导致聚焦滚动，建议先将编辑器 v-show=false，待 initHtml 内容初始化完成后再 true。也正是因为微信小程序端会聚焦滚动，所以 editorEID 在初始阶段会默认保持最后一个实例 eid，需要手动重新聚焦
• initHtml 第二个参数 customCallback 和 api: replaceVideoWithImageRender 一致，customCallback 为自定义处理封面回调，自带参数为视频地址，需要return封面图片资源，若无有效返回则走默认封面处理，建议配合后端生成视频封面以兼容各端。

3. uni_modules/sv-editor/components/common/store.js 文件中，插件内全局状态仓库，你可以按需引入后通过 store.state 与 store.actions 来访问变量

4. uni_modules/sv-editor/components/common/utils.js 文件中，需要按需引入，实用工具

5. uni_modules/sv-editor/components/common/parse.js 文件中，需要按需引入，正则解析工具

6. uni_modules/sv-editor/components/common/config.js 配置文件

7. 具体使用代码案例请 使用HBuilderX导入示例项目 导入示例工程参考

八、特殊扩展

本插件提供部分额外特殊扩展功能，具体如下：

• createCoverThumbnail 在iOS端可能会报 the operation is insecure 的错，这是iOS更加严格的安全策略导致的，本地file://协议也会导致跨域，从而污染了画布

制作不易，特殊扩展功能限时免费开放，感谢支持Thanks♪(･ω･)ﾉ 使用方式：将插件内 backup 文件夹下的文件复制并粘贴进 plugins 文件夹下并覆盖原文件

九、结语

本插件免费开源（除特殊扩展外），如若借鉴源码还请注明出处，未经授权禁止转载售卖等侵犯版权行为，谢谢！

如若商用，望您可以联系作者本人，留下您的项目名，我希望能以方式此推广，谢谢！

感谢您使用本插件，如果在使用过程中遇到任何问题，欢迎在评论区留言，或在 Gitee 上提交issue，我会尽快回复您。

制作不易，还望五星好评，若能在 Gitee 上点个 ⭐star，不胜感激Thanks♪(･ω･)ﾉ

欢迎加群讨论，Q群： ① 852637893 ② 816646292