更新记录
1.0.0(2024-03-22) 下载此版本
第一次上传
平台兼容性
Mrj-tinymec 插件文档
概述
Mrj-tinymec 是一款基于 Tinymce 进行定制的富文本编辑器插件,其特色在于内建了 Word 文档上传与 PDF 文件上传功能。该插件为用户提供了一种强大且高度自定义的文本编辑体验,适用于各类需要丰富格式化文本编辑的应用场景。
安装与使用指南
引入相关资源
在项目模板文件 template.h5.html
的 <head>
标签内引入以下 JavaScript 文件:
<script type="text/javascript" src="<%= BASE_URL %>static/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>static/js/pdf/pdf.js"></script>
同时,请将插件中的 mode
文件夹内容复制到项目的 static
目录下。
插件代码结构概览
<template>
<div :class="{fullscreen:fullscreen, loaded: loaded}" class="tinymce-container" :style="{width:containerWidth}">
<textarea :id="tinymceId" class="tinymce-textarea" />
</div>
</template>
<script>
import plugins from './plugins'
import toolbar from './toolbar'
import '@npkg/tinymce-plugins'
import load from './dynamicLoadScript'
import { uploadPdfPlugin } from './utils'
export default {
// ...组件属性、数据、计算属性、方法等详细实现...
}
</script>
<style scoped lang="scss">
/* ...样式规则... */
</style>
功能特性
- 基于 Tinymce 编辑器的核心功能进行扩展
- 支持用户自定义工具栏
- 内置 Word 文档上传功能
- 内置 PDF 文件上传功能
- 全屏模式支持
- 提供多种语言环境设置
- 可以通过 Vue 组件方式动态加载和销毁编辑器实例
初始化与配置
在组件挂载时,MrjTinymec 会自动初始化 Tinymce 编辑器,并通过监听事件来更新编辑器的内容变化。同时,它集成了文件上传回调函数,用于处理图像和文件的上传操作,利用uniCloud服务进行文件上传及获取临时链接。
注意事项
在使用此插件前,请确保正确配置并引入了所需脚本资源,并根据需求调整相应的属性配置(如工具栏、菜单栏、高度、宽度等)。此外,还需注意在适当的地方调用初始化和销毁方法以保证插件的正常运行和资源释放。 本插件部分功能依赖tinymce-plugins,第一次安装插件默认自动执行npm i @npkg/tinymce-plugins,若安装失败请手动执行
结束语
以上便是 Mrj-tinymec 富文本编辑器插件的基本介绍与使用说明,通过集成该插件,开发者可以快速构建具有 Word 和 PDF 文件上传能力的高性能富文本编辑器,提升用户体验的同时简化开发流程。