tinymce 号称富文本编辑器世界第一,大家同意么?
suiw9 2024-10-25 16:58 159 浏览 0 评论
大家好,很高兴又见面了,我是"高级前端?进阶?",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。
1. 什么是 TinyMCE
TinyMCE 是世界排名第一的开源富文本编辑器。
TinyMCE 也是世界上最可定制、可扩展且灵活的富文本编辑器,受到数百万开发人员的使用和信赖,同时推出了 Atlassian、Medium、Evernote 等产品,帮助开发者为用户创造卓越的内容和体验。
TinyMCE 每年的下载量超过 3.5 亿次,也是互联网上最值得信赖的企业级开源 HTML 编辑器之一。 目前全球有超过 1 亿多个由 Tiny 提供支持的产品。 作为一款高性能的所见即所得编辑器,TinyMCE 专为扩展而设计,旨在创新,并不断完善特殊边界情况。
开发者可以在 TinyMCE 网站文档中访问 TinyMCE 的全功能演示。同时,官方建议升级到 TinyMCE 7 以继续接收安全更新,或者如果需要更多时间升级,请考虑 TinyMCE 5 LTS。
2.TinyMCE 有什么特色
2.1 轻松集成
借助以下组件,TinyMCE 可以轻松集成到当前项目中:
- tinymce-react
- tinymce-vue
- tinymce-angular
目前 TinyMCE 拥有超过 29 个集成和 400 多个 API,请参阅 TinyMCE 文档以获取编辑器集成的完整列表,包括:使用 Tiny Cloud、包管理器或自托管下载安装 TinyMCE 的各种安装和集成选项。支持 React、Angular、Vue.js、Blazor、Svelte、Web Component、Java Swing、jQuery、Bootstrap、Django、Node.js + Express、Laravel、Ruby on Rails、Wordpress 等等。
2.2 高可定制
开发者可以轻松配置富文本编辑器的 UI 以匹配当前网站、产品或应用程序的设计。 由于其灵活性,开发者还可以根据需要为编辑器配置任意数量的功能。
配置 UI 非常简单,比如:
tinymce.init({
selector: 'textarea',
// 根据页面 HTML 配置
skin: 'oxide-dark',
content_css: 'dark'
// skin 皮肤配置
});
tinymce 还支持将 skin 版本基于用户操作系统中指定的首选项,比如下面例子:
tinymce.init({
selector: 'textarea',
// change this value according to your HTML
skin: (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'oxide-dark' : 'oxide'),
content_css: (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default')
});
凭借 50 多个强大的插件,以及作为 TinyMCE 基础的可编辑内容,添加附加功能就像添加一行代码一样简单。只需要几行代码即可实现大多数插件的全部功能。
比如,以下示例启用列表(lists)、高级列表(advlist)、链接(link)和图像(image)插件。
tinymce.init({
selector: 'textarea',
// change this value according to your HTML
plugins: 'advlist link image lists'
});
2.3 可扩展性
有时,编辑器要求可能非常独特,例如:需要自由和灵活性来进行创新。 由于 TinyMCE 是开源的,开发者可以查看源代码并开发自己的自定义功能扩展,以满足自己的需求。
TinyMCE API 的公开使开发者可以更轻松地编写适合 TinyMCE UI 组件现有框架的自定义功能。比如常见的 API:
- add(editor: tinymce.Editor): tinymce.Editor:将编辑器实例添加到编辑器集合中,并将其设置为活动编辑器。
- addI18n():添加语言包,由加载的语言文件(如 en.js)调用。
- createEditor():创建一个编辑器实例并将其添加到 EditorManager 集合中
- execCommand(cmd: String, ui: Boolean, value: Object | String | Number | Boolean): Boolean:在当前活动编辑器上执行特定命令
- get(id: String | Number): tinymce.Editor | Array:返回给定 id 的编辑器实例
- triggerSave():对集合中的所有编辑器实例调用 save 方法,当要提交表单时这会很有用。
对于需要根据企业级标准构建更深入的效率、合规性或协作功能的专业软件团队,开发者还可以与官方团队联系。
Tiny 还为专业开发团队提供专门的 SLA 和支持。
3.TinyMCE 基础用法
TinyMCE 的使用非常简单,假如有以下 HTML 页面结构:
<textarea id="basic-example">
<p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>
<h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>
<h2>A simple table to play with</h2>
<h2>Found a bug?</h2>
<p>
Don't forget to check out our other product <a href="http://www.plupload.com"target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
</p>
<p>
Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
</p>
</textarea>
可以快速通过下面的 JS 实例化编辑器脚本,其中 plugins 指定了编辑器的插件列表,而 toolbar 指定了导航栏的基本功能。
tinymce.init({
selector: 'textarea#basic-example',
height: 500,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'help', 'wordcount'
],
toolbar: 'undo redo | blocks |' +
'bold italic backcolor | alignleft aligncenter' +
'alignright alignjustify | bullist numlist outdent indent |' +
'removeformat | help',
content_style: 'body {font-family:Helvetica,Arial,sans-serif; font-size:16px}'
});
更多关于 tinymce 的用法可以参考文末资料,本文不再过多展开。
参考资料
https://github.com/tinymce/tinymce
https://www.tiny.cloud/docs/tinymce/6/installation/
https://www.tiny.cloud/docs/tinymce/6/customize-ui/
https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.root/
相关推荐
- 谁说 Vim 不好用?送你一个五彩斑斓的编辑器!
-
相信大家在使用各种各样强大的IDE写代码时都会注意到,代码中各种类型的关键字会用独特的颜色标记出来,然后形成一套语法高亮规则。这样不仅美观,而且方便代码的阅读。而在上古神器Vim中,我们通常看...
- Python 基础教程 九之cron定时执行python脚本
-
前言在Linux或Unix系统中,你可以使用cron任务来定时执行Python脚本。cron是一个基于时间的作业调度器,允许你安排命令或脚本在系统上自动执行。...
- RK3588主板Ubuntu 22.04固件刷机后需要进行哪些操作?
-
RK3588主板Ubuntu22.04固件刷机完成后,您需要进行以下操作:1、验证固件版本:确认您刷入的Ubuntu22.04固件版本是否正确,并且系统正常运行。...
- Ubuntu16.04搭建VNC Server远程桌面服务器
-
1.前言本文主要讲解Ubuntu16.04怎么安装VNCServer远程桌面服务器。VNC全称为VirtualNetworkComputing(虚拟网络计算)是一种图形化桌面共享工具,允许...
- 开源&Docker:何必nextcloud,新晋神级私人云盘,在线office编辑
-
本内容来源于@什么值得买APP,观点仅代表作者本人|作者:可爱的小cherry前言大家好,这里是可爱的Cherry。...
- Ubuntu系统,常用命令、IP配置等教程
-
Ubuntu系统常用命令与IP配置教程一、常用命令在Ubuntu系统中,掌握一些常用的命令对于日常操作非常重要,以下是常见的命令及其用法说明:1.ls—列出当前目录内容...
- Zed编辑器:Rust之力,Linux之翼,VS Code劲敌新篇章
-
Zed是一款支持多人协作...
- 如何在Ubuntu系统中进行系统级的代理设置
-
Ubuntu系统级代理设置步骤详解在Ubuntu系统中进行系统级的代理设置是一种常见的网络配置方式,尤其适用于需要通过代理访问互联网的场景。通过配置代理,你可以让系统中的所有应用程序(如浏览器、终端、...
- Linux Vim文本编辑器(linux用vi编辑文本)
-
在使用Linux操作系统的过程中,经常需要对文本文件进行操作,如新建、编辑等,常用的方法有以下几种:...
- 从零入门Linux(五)文本编辑器(linux好用的文本编辑器)
-
Linux系统提供了多种文本编辑器,每种编辑器都有其独特的功能和使用场景。以下按功能和复杂程度分类介绍:1.简单文本编辑器...
- 照片选择器,使用简单,几行代码就可以完成集成
-
照片选择器,使用简单,几行代码就可以完成集成来源:极客头条用于发表图片时候选择相册图片和拍照这样的需求,虽然网上也有很多类似的控件,写的挺不错的,但是深入使用就有些问题,还是自己写算了;网上的一些轮...
- 探索iOS 9适配(iphone适配)
-
CSDN移动将持续为您优选移动开发的精华内容,共同探讨移动开发的技术热点话题,涵盖移动应用、开发工具、移动游戏及引擎、智能硬件、物联网等方方面面。如果您想投稿,或寻求《近匠》报道,请发送邮件至tang...
- “旅行者”回望30载 一点淡蓝“焕新颜”
-
据美国国家航空航天局(NASA)网站12日报道,为纪念著名的“暗淡蓝点”(PaleBlueDot)照片问世30周年,NASA重新制作了这张照片,使其“焕新颜”,NASA喷气推进实验室于近日发布了新...
- 「底层技术原理体系」深入探索Java服务器性能监控Metrics框架
-
承接上文承接上文中的【深度挖掘Java性能调优】「底层技术原理体系」深入探索Java服务器性能监控Metrics框架的实现原理分析(Counter篇),我们知道和了解了对应的Counter计数器的作用...
你 发表评论:
欢迎- 一周热门
-
-
Linux:Ubuntu22.04上安装python3.11,简单易上手
-
宝马阿布达比分公司推出独特M4升级套件,整套升级约在20万
-
MATLAB中图片保存的五种方法(一)(matlab中保存图片命令)
-
别再傻傻搞不清楚Workstation Player和Workstation Pro的区别了
-
Linux上使用tinyproxy快速搭建HTTP/HTTPS代理器
-
如何提取、修改、强刷A卡bios a卡刷bios工具
-
Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框
-
日本组合“岚”将于2020年12月31日停止团体活动
-
SpringCloud OpenFeign 使用 okhttp 发送 HTTP 请求与 HTTP/2 探索
-
tinymce 号称富文本编辑器世界第一,大家同意么?
-
- 最近发表
-
- 谁说 Vim 不好用?送你一个五彩斑斓的编辑器!
- Python 基础教程 九之cron定时执行python脚本
- RK3588主板Ubuntu 22.04固件刷机后需要进行哪些操作?
- Ubuntu16.04搭建VNC Server远程桌面服务器
- 开源&Docker:何必nextcloud,新晋神级私人云盘,在线office编辑
- Ubuntu系统,常用命令、IP配置等教程
- Ubuntu 24.10安装体验(ubuntu 20.04.1安装教程)
- Zed编辑器:Rust之力,Linux之翼,VS Code劲敌新篇章
- 如何在Ubuntu系统中进行系统级的代理设置
- Linux Vim文本编辑器(linux用vi编辑文本)
- 标签列表
-
- dialog.js (57)
- importnew (44)
- windows93网页版 (44)
- yii2框架的优缺点 (45)
- tinyeditor (45)
- qt5.5 (60)
- windowsserver2016镜像下载 (52)
- okhttputils (51)
- android-gif-drawable (53)
- 时间轴插件 (56)
- docker systemd (65)
- slider.js (47)
- android webview缓存 (46)
- pagination.js (59)
- loadjs (62)
- openssl1.0.2 (48)
- velocity模板引擎 (48)
- pcre library (47)
- zabbix微信报警脚本 (63)
- jnetpcap (49)
- pdfrenderer (43)
- fastutil (48)
- uinavigationcontroller (53)
- bitbucket.org (44)
- python websocket-client (47)