AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Tinymce plugins [Tinymce 扩展插件集合]

2022-08-05 1195
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 因为项目需要用到富文本编辑器众多富文本编辑器中，选择了 Tinymce，根据项目需要对Tinymce 进行扩展和增强插件，记录一下，并同时分享给需要帮助的人。

前言

因为项目需要用到富文本编辑器众多富文本编辑器中，选择了 Tinymce，根据项目需要对Tinymce 进行扩展和增强插件，记录一下，并同时分享给需要帮助的人。

目前正在全力调整重构

tinymce 官方文档

tinymce 中文文档

插件下载地址

项目demo地址

CSDN 博客

个人博客

QQ邮箱: fivecc@qq.com

简述

This is tinymce plugins该项目主要为 tinymce 富文本编译器的扩展插件，或增强优化插件目前整理完成插件列表如下：

  • imagetools [增强优化]： 图片编辑工具插件， 对图片进行处理。优化跨域，功能更丰富；
  • table [增强优化]：表格插件，处理表格。 增强优化表格控制，增加表格转图片功能，便捷布局按钮；
  • indent2em[增强优化]：首行缩进插件。提供中文段落排版的首行缩进2个字符的功能。增强优化 加入字间距非默认情况，也能实现准确首行缩进2字符；
  • letterspacing：设置间距插件。可以设置文档中的文字间距；
  • layout： 一键布局插件。可以给文档段落进行一键快速排版布局；
  • importword： 导入word插件。可以直接导入word ,并且保证word中图片不会丢失，自动转为base64;
  • upfile： 文件上传。可以点击导入文件，可自定义编辑文件名;
  • bdmap： 百度地图。 支持更改尺寸，自定义标签，开启导航功能,支持vue;
  • axupimgs: 多图上传。可同时上传多组图片，支持vue;
  • attachment: 附件上传。拥有附件类型对应图标，支持vue;

下载

npm i @npkg/tinymce-plugins 或 cnpm i @npkg/tinymce-plugins -D

使用说明

未使用过 tinymce ，可以查看莫若卿大佬的 tinymce 中文文档

imagetools 使用方法：

增强效果：

网络异常，图片无法展示
| 

tinymce.init({
selector: '#tinydemo',
plugins: "image imagetools",
toolbar: "image",
   });

点击下载更多下载更多配置 见 插件 / imagetools

table 使用方法：

增强效果：

网络异常，图片无法展示
|

提供一个配置项目 table_icons 自定义图标配置【Object】可配置icon 对象为

  1. align-left-table： 表格居左
  2. align-center-table： 表格居中
  3. align-right-table： 表格居右
  4. table-to-img： 表格转图片
tinymce.init({
selector: '#tinydemo',
plugins: "table",
toolbar: "table"table_icons: {// 以下下为默认配置'align-right-table': '<svg width="24" height="24"><path d="M5 5h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm6 4h8c.6 0 1 .4 1 1s-.4 1-1 1h-8a1 1 0 0 1 0-2zm0 8h8c.6 0 1 .4 1 1s-.4 1-1 1h-8a1 1 0 0 1 0-2zm-6-4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2z" fill-rule="evenodd"></path></svg>',
'align-left-table': '<svg width="24" height="24"><path d="M5 5h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm0 4h8c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm0 8h8c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2zm0-4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2z" fill-rule="evenodd"></path></svg>',
'align-center-table': '<svg width="24" height="24"><path d="M5 5h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm3 4h8c.6 0 1 .4 1 1s-.4 1-1 1H8a1 1 0 1 1 0-2zm0 8h8c.6 0 1 .4 1 1s-.4 1-1 1H8a1 1 0 0 1 0-2zm-3-4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2z" fill-rule="evenodd"></path></svg>'    }
});

点击下载更多下载更多配置 见 插件 / table

indent2em 使用方法：

当使用 本项目 letterspacing 插件，如需使用首行缩进 请替换原有indent2em，使用该项目indent2em插件。

tinymce.init({
selector: '#tinydemo',
plugins: "indent2em",
toolbar: "indent2em"});

点击下载更多下载更多配置 见 插件 / indent2em

letterspacing 使用方法：

tinymce.init({
    selector: '#tinydemo',
    plugins: "letterspacing",
    toolbar: "letterspacing"
});

点击下载更多下载

更多配置(选配) :

提供字段 letterspacing 配置参数【String类型】，空格隔开；

tinymce.init({
selector: '#tinydemo',
plugins: "letterspacing",
toolbar: "letterspacing",
letterspacing: "0px 2px 4px 6px 24px"});

layout 使用方法：

tinymce.init({
selector: '#tinydemo',
plugins: "layout",
toolbar: "layout"});

点击下载更多下载

更多配置 (选配):

提供 一键布局 默认参数字段 layout_options 配置参数【Object类型】目前一共4个属性：

  1. style : 一键布局默认样式参数【Object】
  2. filterTags： 【Array】过滤标签，该数组中的标签，一键布局中将会被忽略（默认忽略 ‘table’,‘tbody’,‘td’,‘tr’）
  3. tagsStyle： 单独标签样式处理【Object】
  4. clearStyle: 【Array】清除样式 ，一键布局后 ，数组中的样式将会清除掉。

配置优先级从低到高： style < filterTags < tagsStyle < clearStyle

tinymce.init({
selector: '#tinydemo',
plugins: "layout",
toolbar: "layout",
layout_options: {
style: {
'text-align':'justify',
'text-indent':'2em',
'line-height': 1.5                },
filterTags：['table>*','tbody'], //'table，'tbody','td','tr' 将会忽略掉 同时 table>*，忽略table 标签 以及所有子标签clearStyle: ['text-indent'],//text-indent 将会被清除掉tagsStyle: {
'table': {
'line-height': 3,
'text-align': 'center'                   },
'table,tbody,tr,td': { //支持并集选择'line-height': 2                   },
'tr>td,table>tbody': { //支持, 精准定位 通过 ' > ''line-height': 3,
'text-align': 'center'                   }
               }
    }
});

importword 使用方法：

tinymce.init({
selector: '#tinydemo',
plugins: "importword",
toolbar: "importword"});

点击下载更多下载

更多配置(选配) :

提供 导入word 插件预处理函数 importword_handler 配置参数【Function类型】传入3个参数

  1. editor : editor 编辑器实列【object】
  2. files : 导入的文件 【object】
  3. next : 下一步骤回调函数 传入files标签字符串【Function】

过滤函数 importword_filter 配置参数【Function类型】传入3个参数

  1. result : 导入word 生成的 html标签字符串【String】
  2. insert : 插入回调函数 传入 html标签字符串【String】
  3. message: 转换过程中产生的错误信息集【Array】
tinymce.init({
selector: '#tinydemo',
plugins: "importword",
toolbar: "importword",
importword_handler: function(editor,files,next){
varfile_name=files[0].nameif(file_name.substr(file_name.lastIndexOf(".")+1)=='docx'){
editor.notificationManager.open({
text: '正在转换中...',
type: 'info',
closeButton: false,
                    });
next(files);
                }else{
editor.notificationManager.open({
text: '目前仅支持docx文件格式，若为doc111，请将扩展名改为docx',
type: 'warning',
                    });
                }
// next(files);    }
importword_filter: function(result,insert,message){ 
// 自定义操作部分insert(result) //回插函数    }
});

upfile 使用方法：

tinymce.init({
selector: '#tinydemo',
plugins: "upfile",
toolbar: "upfile"});

点击下载更多下载

更多配置(选配) :

提供 upfile 插件 过滤函数 file_callback 配置参数【Function类型】传入2个参数

  1. file : 文件对象【file】
  2. succFun : 成功回调函数 传入 html标签字符串【Function类型】(url|string,obj)
tinymce.init({
selector: '#tinydemo',
plugins: "upfile",
toolbar: "upfile",
file_callback: function (file, succFun) {
// 自定义处理文件操作部分succFun(url,{text: 'xx.pdf'}) //成功回调函数 text 显示的文本    }
});

bdmap 使用方法：

tinymce.init({
selector: '#tinydemo',
plugins: "bdmap",
toolbar: "bdmap"});

点击下载更多下载

更多配置(选配) :

提供 bdmap 插件 bdmap_options 配置参数【object】 传入 4 个参数

  1. width: 百度地图默认宽度 默认 560
  2. height: 百度地图默认高度 默认 360
  3. outputIframe: 百度地图输出iframe路径， 默认 ‘.’ （当前路径） Vue 默认 ‘https://unpkg.com/@npkg/tinymce-plugins/plugins/bdmap/bd.html’
  4. apiKey: 自定义百度地图apiKey Vue 中有效
tinymce.init({
selector: '#tinydemo',
plugins: "bdmap",
toolbar: "bdmap",
bdmap_options: {
width: 560,
height: 360,
outputIframe: 'https://unpkg.com/@npkg/tinymce-plugins',
apiKey: 'ONXXXXXXXXXXXXXXnP'    }
});

axupimgs（Vue）使用方法：

tinymce.init({
selector: '#tinydemo',
plugins: "axupimgs",
toolbar: "axupimgs"});

点击下载更多下载

更多配置 见 插件 / axupimgs

attachment 使用方法：

tinymce.init({
selector: '#tinydemo',
plugins: "attachment",
toolbajr: "attachment"});

点击下载更多下载

更多配置(选配) :

提供 attachment 插件 提供 attachment_max_size，attachment_style,attachment_icons_path,attachment_upload_handler 配置参数attachment_max_size: 附件大小限制 默认 209715200 （200M）【number】attachment_style: 附件的样式，主要为保存数据后可以直接在其他页面展示。 【string】attachment_icons_path： 附件的 图标的路径 icons ， 默认 当前路径 Vue 默认 ‘https://unpkg.com/@npkg/tinymce-plugins/plugins/attachment/icons’attachment_upload_handler： 附件上传处理函数 【function】 function(file, succFun, failFun, progressCallback)

  1. file : 文件对象【file】
  2. succFun : 成功回调函数 传入 (url|string)
  3. failFun : 失败回调函数 传入 (string)
  4. progressCallback: 进程回调函数 传入 (string)
varxhrOnProgress=function (fun) {
xhrOnProgress.onprogress=fun;
returnfunction () {
varxhr=$.ajaxSettings.xhr();
if (typeofxhrOnProgress.onprogress!=='function')
returnxhr;
if (xhrOnProgress.onprogress&&xhr.upload) {
xhr.upload.onprogress=xhrOnProgress.onprogress;
        }
returnxhr;
    }
  }
tinymce.init({
selector: '#tinydemo',
plugins: "attachment",
toolbar: "attachment",
attachment_max_size: 209715200,
attachment_style:'.attachment>img{display:inline-block!important;max-width:30px!important;}'attachment_icons_path: 'https://unpkg.com/@npkg/tinymce-plugins/plugins/attachment/icons',
attachment_upload_handler: function (file, succFun, failFun, progressCallback) {
vardata=newFormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: './api/file.json',
cache: false,
contentType: false,
processData: false,
header:{'Content-Type':'multipart/form-data'},
dataType: 'json',
xhr: xhrOnProgress(function (e) {
constpercent= (e.loaded/e.total*100|0) +'%';//计算百分比progressCallback(percent);
                }),
            }).then(function (data) {
if ( data.code==200) {
succFun(data.data);
                } else {
failFun('上传失败:'+data.data);
                }
            }).fail(function (error) {
failFun('上传失败:'+error.message)
            });
        },
});

在vue当中使用

只需将插件下载后引用到安装目录中

|-- node_modules
| ...
|   |-- tinymce
|   | .
|   |-- |-- plugins
|   |   |   |-- letterspacing
|   |   |   |-- layout
|   |   |   |-- indent2em
|   |   |   |-- importword
|   |   |   |-- imagetools
|   |   |   |-- table
|   |   |   |-- bdmap
|   |   |   |-- axupimgs
|   |   |   |-- attachment
| ...

引入

可以全部引入

import'@npkg/tinymce-plugins'

也可以按需引入

import'@npkg/tinymce-plugins/importword'import'@npkg/tinymce-plugins/lineheight'import'@npkg/tinymce-plugins/layout'import'@npkg/tinymce-plugins/letterspacing'import'@npkg/tinymce-plugins/indent2em'import'@npkg/tinymce-plugins/upfile'import'@npkg/tinymce-plugins/imagetools'import'@npkg/tinymce-plugins/attachment'

欢迎提出建议，动手点赞 ，或提pr

目前项目正在重构调整

力求创建一个 提供 强大、好用、丰富 的 tinymce 富文本编辑器 插件、扩展 和 技术 的技术社区，方便 交流讨论，分享经验 。 本社区有多个不错的插件或者项目，欢迎 Star ⭐ 关注~

新项目文档网站（测试）：https://tinymce-plugin.github.io/

文章标签：
JavaScript
定位技术
编译器
Five
目录
相关文章
游客6w5iiviqxobva
|
JavaScript 前端开发 API
core-js介绍及安装使用
core-js介绍及安装使用
游客6w5iiviqxobva
3082 0
core-js介绍及安装使用
snowball_win
|
前端开发 JavaScript
nuxt项目：css相关插件加载顺序问题【extract-css-chunks-webpack-plugin】
nuxt项目：css相关插件加载顺序问题【extract-css-chunks-webpack-plugin】
snowball_win
253 0
日_升
|
5月前
|
Web App开发 JavaScript
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件，手动配置 vite.config.ts 和 manifest.json 文件
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件，手动配置 vite.config.ts 和 manifest.json 文件
日_升
216 0
前端开发社区（公众号）
|
前端开发 JavaScript
vue.config.js的优化配置（element-ui, echarts, lodash按需加载 ）（一）
vue.config.js的优化配置（element-ui, echarts, lodash按需加载 ）（一）
前端开发社区（公众号）
256 0
前端开发社区（公众号）
|
JavaScript
vue.config.js的优化配置（element-ui, echarts, lodash按需加载 ）（二）
vue.config.js的优化配置（element-ui, echarts, lodash按需加载 ）（二）
前端开发社区（公众号）
254 0
凯小默
webpack进阶篇（十五）：PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀
webpack进阶篇（十五）：PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀
凯小默
440 0
webpack进阶篇（十五）：PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀
biaoblog.cn个人博客
|
Web App开发 JavaScript 前端开发
vite-plugin-chrome-extension（Vue版本）
vite-plugin-chrome-extension（Vue版本）
biaoblog.cn个人博客
720 0
ADI
|
JavaScript 前端开发 开发者
[记录] Vue-cli引入lib-flexible&&ElementUI
[记录] Vue-cli引入lib-flexible&&ElementUI
ADI
186 0
刘同学酱
|
JavaScript
Webpack+Vue导入Jquery和Jquery的第三方插件
Webpack+Vue导入Jquery和Jquery的第三方插件
刘同学酱
134 0
pcr5nnbbix3xm
|
资源调度 前端开发 JavaScript
wp2vite的妙用，让webpack项目支持vite
TNTWeb - 全称腾讯新闻前端团队，组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。 目前团队主要支持腾讯新闻各业务的前端开发，业务开发之余也积累沉淀了一些前端基础设施，赋能业务提效和产品创新。
pcr5nnbbix3xm
975 0
wp2vite的妙用，让webpack项目支持vite

热门文章

最新文章

  • 1
    尝鲜：如何搭建一个简单的webrtc服务器
  • 2
    从零开始：阿里云上Kubernetes集群的搭建与部署
  • 3
    面试必问的4种单点登录的实现方式，你知道几个？
  • 4
    Github Pages+Hexo+阿里云域名绑定
  • 5
    测试开启MySQL performance_schema后对性能的影响
  • 6
    阿里云视频云总经理何亚明：基于倚天的视频云原生业务新范式
  • 7
    Windows SDK编程(Delphi版) 之 消息框和菜单资源
  • 8
    三级侧边栏-树形菜单案例效果
  • 9
    U盘故障详细维修方法
  • 10
    1、Windows API函数归总，网络函数、消息函数、文件处理
  • 1
    如何在项目中保证 Web 组件化的性能
    15
  • 2
    如何在项目中高效地进行 Web 组件化开发
    14
  • 3
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
    15
  • 4
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
    102
  • 5
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
    20
  • 6
    网络漏洞
    16
  • 7
    网络安全
    14
  • 8
    完整性
    14
  • 9
    可用性
    97
  • 10
    可靠性
    13

    • 相关课程

    更多
  • 前端自动化构建工具 Webpack
  • Node.js 入门教程文档
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器

    • 相关电子书

    更多
  • 23-Vue.js在前端...1506518547.pdf
  • 基于webpack和npm的前端组件化实践
  • Babel_ Under the Hood--Nicolò Ribaudo

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    无影云桌面