百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术教程 > 正文

tinymce 号称富文本编辑器世界第一,大家同意么?

suiw9 2024-10-25 16:58 158 浏览 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(虚拟网络计算)是一种图形化桌面共享工具,允许...

开源&amp;Docker:何必nextcloud,新晋神级私人云盘,在线office编辑

本内容来源于@什么值得买APP,观点仅代表作者本人|作者:可爱的小cherry前言大家好,这里是可爱的Cherry。...

Ubuntu系统,常用命令、IP配置等教程

Ubuntu系统常用命令与IP配置教程一、常用命令在Ubuntu系统中,掌握一些常用的命令对于日常操作非常重要,以下是常见的命令及其用法说明:1.ls—列出当前目录内容...

Ubuntu 24.10安装体验(ubuntu 20.04.1安装教程)

内核版本...

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计数器的作用...

取消回复欢迎 发表评论: