TinyMCE插件开发

aboutU 发布于2019-08-22 18:29 / 1676人阅读

摘要：目前网上关于插件开发的文章少得可怜，下面分享最近的经历，如何快速上手开发一个插件。第六步调试插件在打开的网页中可以看到工具栏中实现了插件。

TinyMCE是一个非常优秀的轻量级的所见即所得HTML编辑器，历史悠久，开源，在github的start也非常高的，且长期保持更新。
TinyMCE的官方插件不少，基本能满足日常需求，但是有时候我们还需要一些结合业务的功能。这时官方插件无法满足，就需要我们自己开发插件。目前网上关于TinyMCE插件开发的文章少得可怜，下面分享最近的经历，如何快速上手开发一个TinyMCE插件。
资料
TinyMCE官方提供了正确开发插件的文档说明（https://www.tinymce.com/docs/...）、提供相关接口文档（https://www.tinymce.com/docs/...）
根据TniyMCE文档说明，开发插件需要使用 Yeoman generator 构建开发环境

第一步：安装nodejs和npm
根据自己的操作系统到https://nodejs.org/ 下载nodejs安装

第二步：安装Yeoman yo脚手架

npm install -g yo

等待安装完成后。

第三步：安装 generator-tinymce 脚手架模板

npm install -g generator-tinymce

继续等待安装完成后。

第四步：创建生成插件项目
首先，在硬盘上建立工作空间，例如：D: inymcedemoplugin
cd 进入文件目录

cd D:	inymcedemoplugin

使用 yo tinymce 命令生成项目

yo tinymce

首次运行会出现一个询问提示，输入 y 回车即可。

之后就是进入到项目的配置选项了。

根据提示配置选项如下：

? Plugin name: demoplugin //插件项目名称
? How do you want to write your plugin? ES2015 //可以选ES2015 ，TypeScript 等
? Use yarn instead of npm? No //是否使用yarn替代npm，这里我们选npm
? Skip git repo initialization? Yes //是否使用git创建库
? What"s your name: xxx //插件作者名称
? Your email (optional): xxx@163.com //插件作者email
? Your website (optional): //插件作者网站
? Which license do you want to use? Apache 2.0 //采用的开源协议，可选 No License 不开源，或者Apache2.0 MIT  BSD 等

等待一会项目文件初始化创建完成。

第五步：插件项目结构
使用开发工具载入文件目录，就可以开发调试发布TinyMCE插件了，这里我们使用vscode作为开发工具
打开工作空间后，可以看到项目结构如下：

如图所示 src/index.js是插件的声明文件；src/plugin.js 是插件的主体文件，所有功能代码都在这里编写。具体调用TinyMCE接口可以参照接口文档（https://www.tinymce.com/docs/...）
这里demo初始化实现了一个弹窗输入文字插入到编辑器中的插件。

第六步：调试插件

 npm start

在打开的网页中可以看到TinyMCE工具栏中实现了demoplugin插件。

第7步：打包插件
也非常简单使用命令

 npm run build

稍等片刻就编译打包好了，在项目的 dist/demoplugin目录下有插件相关的3个文件：

plugin.js //未经压缩的插件文件

plugin.min.js //压缩过的插件文件

LICENSE //插件开源协议文件

注：因为默认示例中引入了lodash打包后文件非常大，lodash实际使用中并不必须

第8步：插件的使用
只需要将打包的文件拷贝TinyMCE的tinymce/plugins 目录下，在需要地方引入并配置调用，就可以在生产项目中实用我们开发好的插件了。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95910.html

tinymce与prism代码高亮实现及汉化的配置

摘要：简单介绍是一个轻量级的基于浏览器的所见即所得编辑器，由写成。它对和都有着非常良好的支持。功能方强大，并且功能配置灵活简单。另一特点是加载速度非常快的。所以我们使用作为代码高亮插件。简单介绍：TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大，并且功能配置灵活简单。另一特点是加载速度非常快的...

番茄西红柿 2019-04-23 13:31 评论0 收藏0
vue 集成富文本tinymce

摘要：开发环境开发语言插件安装可以使用里面的文件，下载后可以在里面查看如下未目录结构可以将整个结构拷在里面，为了节省打包后的文件大小可以将以方式导入放在中附上封装的代码可以直接导入使用引入中文包地址可导入文件进行上传图片构造的选择器可以把下面的开发环境 1. vscode 开发语言 1. vue 2. javaScript 插件安装 1. npm install tinymce -S ...

qpal 2019-08-23 13:48 评论0 收藏0
django项目admin后台整合tinymce富文本编辑并自定义添加图片本地上传和富文本中的回显

摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。前言我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...

HackerShell 2019-08-21 17:29 评论0 收藏0
django项目admin后台整合tinymce富文本编辑并自定义添加图片本地上传和富文本中的回显

摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。前言我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...

Honwhy 2019-08-01 17:56 评论0 收藏0
django项目admin后台整合tinymce富文本编辑并自定义添加图片本地上传和富文本中的回显

摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。前言我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...

k00baa 2019-07-30 14:56 评论0 收藏0