富文本编辑器富文本编辑器都有哪些

时间：2023-05-03 16:30/span> 作者：tiger 分类：新知浏览：1496 评论：0

在线编辑器对网站开发人员是再熟悉不过了，比较有名的Ueditor(百度)，Kindeditor，Simditor，CKEditor，wangEditor，Suneditor，ContentTools，ewebeditor，summernote等等。

TinyMCE5.0 是一个功能强大且灵活的富文本编辑器，可以嵌入到任意Web应用中使用，UI精美、功能模块多、可按需加载配置。

介绍

TinyMCE 是一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，采用JavaScript/ECMAScript开发，主要特性包括主题/模板支持，多语言支持(包括简体中文)，支持通过插件的方式进行扩展。功能配置灵活简单（两行代码就可以将编辑器嵌入网页中），支持AJAX。另一特点是加载速度非常快。最重要的是，TinyMCE是一个根据LGPL license发布的自由软件，你可以把它用于商业应用。

Github地址

http://github.com/origin/tinymce/tinymce

使用方法

在<head>中引入官网的tinymce.min.js文件到项目（引用官网js文件需要申请API_KEY）

<script src=&34;http://cloud.tinymce.com/origin/5/tinymce.min.js?apiKey=官方申请的API_KEY&34;></script>

建议下载一份代码到本地 / 创建一个TinyMCE实例初始化

<!DOCTYPE html>
<html>
<head>
    <script src=&34;/tinymce/tinymce.min.js&34;></script>
    <script>tinymce.init({selector:&39;textarea&39;});</script>
</head>
<body>
    <textarea>Next, use our Get Started docs to setup Tiny!</textarea>
</body>
</html>

经典模式

经典模式也是TinyMCE的默认模式，其界面与其他流行的富文本编辑器样式功能一致。

经典模式

内联模式

将编辑视图与阅读视图合二为一，当其被点击后，元素才会被编辑器替换，而不是编辑器始终可见。

内联模式

沉浸模式

在该模式下，编辑器以轻巧的方式呈现。此模式提供了将常用的链接、图像、表格等以快速插入的方式。

沉浸模式

自定义界面

用户可以轻松自定义菜单、工具栏，也可以方便的修改编辑器的大小、外观、按钮等等。

TinyMCE v5 的默认皮肤是“oxide”，它包含浅色版本和深色版本。默认oxide是浅色版。下面的例子将使用深色版皮肤。

tinymce.init({
        selector: &39;tinydemo&39;,
        skin: &39;oxide-dark&39;,
});

使用content_css自定义可编辑区域。

tinymce.init({
        selector: &39;tinydemo&39;,
        content_css : content_css : [&39;mycontent.css&39;, &39;mycontent2.css&39;] ,
});

粘性工具栏（或停靠工具栏），在向下滚动网页直到不再可见编辑器时，将工具栏和菜单停靠在屏幕顶部。

tinymce.init({
        selector: &39;tinydemo&39;,
        toolbar_sticky : true,
});

其它功能参考官网

插件使用

TinyMCE真正强大之处在于它对插件完善的支持。它本身自带了许多实用的插件，而社区则提供了更多优秀的插件。而插件的开发，正是得益于TinyMCE预留接口的友好。

由于大多数人通过TinyMCE Cloud安装TinyMCE或下载软件包，他们错误地认为所有插件都是TinyMCE“核心”的一部分。虽然所有插件（不包括专业功能）都包含在这些包中，但每个插件都需要在配置中加载才能使用。实际上，如果您使用自定义程序包下载选项，则只能使用列表中选择包含的插件。

advlist 高级列表
anchor 锚点插件
autolink 自动链接
autoresize 编辑器自适应
autosave 自动存稿
bbcode
charmap 特殊字符
code 编辑源码
codesample 代码示例
directionality 文字方向
emoticons 表情插件
fullpage 文档属性
fullscreen 全屏
help 帮助
hr 水平分割线
image 插入编辑图片
importcss 引入css
insertdatetime 插入日期时间
legacyoutput 输出HTML4
link 超链接
lists 列表插件
media 插入编辑媒体
nonbreaking 插入不间断空格
noneditable 不可编辑元素
pagebreak 插入分页符
paste 粘贴插件
preview 预览
print 打印
quickbars 快速工具栏
save 保存
searchreplace 查找替换
spellchecker 拼写检查
tabfocus tab切入切出
table 表格插件
template 内容模板
textcolor 文字颜色
textpattern 快速排版
toc 目录生成器
visualblocks 显示元素范围
visualchars 显示不可见字符
wordcount 字数统计

文章评论

取消回复

富文本编辑器 富文本编辑器都有哪些

介绍