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

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

suiw9 2024-10-25 16:58 152 浏览 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/

相关推荐

Apicloud功能模块使用customToast

[toast](#a1)概述customToast弹出一个定时自动关闭的提示框,自定义Toast,自定义提示框颜色、透明度、字体大小、字体颜色、圆角幅度,显示时间;让Toast更完美的融入应用,不...

wxPython - 在程序中使用拖放(wxpython设置滚动条)

实战wxPython系列-052在GUI程序中,拖放是单击虚拟对象并将其拖到不同位置或另一个虚拟对象上的操作(或对该操作的支持)。一般来说,它可用于调用多种类型的操作,或在两个抽象对象之间创建各种类型...

美化Python GUI界面!让你的窗口拥有Win11般的质感 | pywinstyles

1.PythonGUI外观个性化的福音在使用Python开发GUI时,我们经常会使用如Tkinter、PyQt等常见的库,然而这些库的默认界面总显得有些...普通。而如果你想让你的PythonG...

5月BestBuy(5月英文)

Intel处理器排行榜No.1Intel酷睿i511600KF1799元No.2Intel酷睿i511400F1249元No.3Intel酷睿i711700K2899元酷睿i511...

手把手教您使用Python+Flutter开发在线教育系统(上),纯干货!

一、系统架构设计...

Python开发GUI运维工具具体案列(python运维开发做什么)

在Python开发GUI运维工具的具体实践中,不同GUI库的案例各有特色,以下是结合运维场景的典型实现案例及技术方案:一、基础运维工具案例...

开发图形界面Tkinter、wxPython、PyQt、PySide选哪一个?

  学习Python,就不得不提一下Python的图形界面开发,如果只用命令行写程序,用户体验不太好,难以胜任复杂的人机交互场景。Python的图形界面开发库常用的有:Tkinter、wxPython...

wxPython和PyQt谁才是最赞的Python GUI库

Python是一种解释型、面向对象、动态数据类型的高级程序设计语言,PythonGUI图形库允许Python程序员很方便的创建完整的、功能键全的GUI用户界面。作为Python开发者,你迟早都会用到...

wxpython入门第五步(组件)(wxpython怎么用)

Widgets在本节中,我们将介绍wxPython中的基本widgets。每个组件都会有一个小的代码示例。wxPython中有很多不同的组件,包括按钮、复选框、滑块和列表框。wx.Buttonwx....

wxpython简介(python的wxpython)

PythonPython是一种成功的脚本语言,它最初是由GuidovanRossum开发的。它于1991年首次发布。Python的灵感来自于ABC和Haskell编程语言。Python是一种高级...

所见即所得,跨平台快速GUI界面RAD设计

Linux一路走来,界面组件很多,TK、gtk、Qt、wxWidget等。Tk古老而又厚重,不失motif风格,gtk+glade别具特色,Qt轻快时尚,许多语言本身没有gui可用,于是做接口加wra...

Spring Security权限控制系列(二)

环境:Springboot2.4.12+SpringSecurity5.4.9本篇主要内容:请求拦截及自定义登录页面上一篇:《...

Spring整合CXF 发布webservice接口服务器和客户端,WSDL简单解析

在垮平台通讯中有很多的接口方式,这里做个简单的webservice接口。发布webservice接口的方式也多种多样,这里做个基于CXF的webservice接口。首先做点知识储备,javax.jws...

聊聊如何对eureka管理界面进行定制化改造

前言在nacos还未面世之前,eureka基本上就是springcloud全家桶体系注册中心的首选,随着nacos的横空出世,越来越多基于springcloud的微服务项目采用nacos作为注册中心,...

Spring Boot 四大核心组件,你知道几个?

前言...

取消回复欢迎 发表评论: