TinyMCE插件开发

  • A+
所属分类:PHP

前言

​ TinyMCE是一个非常优秀的轻量级的所见即所得HTML编辑器,历史悠久,开源,在github的start也非常高的,且长期保持更新。 TinyMCE的官方插件不少,基本能满足日常需求,但是有时候我们还需要一些结合业务的功能。这时官方插件无法满足,就需要我们自己开发插件。目前网上关于TinyMCE插件开发的文章少得可怜,下面分享最近的经历,如何快速上手开发一个TinyMCE插件。

官方资料

​ TinyMCE官方提供了正确开发插件的文档说明(https://www.tinymce.com/docs/...)、提供相关接口文档(https://www.tinymce.com/docs/...) 根据TniyMCE文档说明,开发插件需要使用 Yeoman generator 构建开发环境

开发步骤

  1. 第一步:安装nodejs和npm

    ​ 根据自己的操作系统到https://nodejs.org/ 下载nodejs安装

  2. 第二步:安装Yeoman yo脚手架

    npm install -g yo
    或者
    yarn global add yo
    

  3. 安装 generator-tinymce 脚手架模板

    npm install -g generator-tinymce
    或者
    yarn global add generator-tinymce
    

  4. 创建制作插件的项目

    1. 首先,在硬盘上建立工作空间。在该工作空间目录下执行命令

      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): [email protected] //插件作者email
     Your website (optional): //插件作者网站
     Which license do you want to use? Apache 2.0 //采用的开源协议,可选 No License 不开源,或者Apache2.0 MIT  BSD 等
    

    生成开发插件的项目

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

    项目目录

  1. 插件目录结构

    ​ 使用开发工具载入文件目录,就可以开发调试发布TinyMCE插件了。

    项目结构

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

  2. 调试插件

    npm start
    

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

    demo示例

  3. 打包插件

    npm run build
    

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

    • plugin.js //未经压缩的插件文件
    • plugin.min.js //压缩过的插件文件
    • LICENSE //插件开源协议文件

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

  4. 使用插件

    ​ 只需要将打包的文件拷贝TinyMCE的tinymce/plugins 目录下,在需要地方引入并配置调用,就可以在生产项目中实用我们开发好的插件了。具体可以参考static/index.html的示例调用方法。

  5. 示例项目(gitee)

为tinymce开发的图片上传插件

​ 强力特性:支持 Ctrl+C/Ctrl+V 上传,支持拖拽上传,也支持 QQ/微信截图上传。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin