【超详细】Tinymce富文本使用教程

您所在的位置：网站首页 › 编辑器的使用说明书图片高清 › 【超详细】Tinymce富文本使用教程

【超详细】Tinymce富文本使用教程

2023-12-22 06:19| 来源: 网络整理| 查看: 265

Tinymce基础使用手册 1. 开始

官网文档：www.tiny.cloud/docs/

社区版及开发版官方最新打包地址：www.tiny.cloud/get-tiny/self-hosted/

汉化包：tinymce.ax-z.cn/static/tiny/langs/zh_CN.js

2. 快速使用引入tinymce脚本将tinymce初始化为页面的一部分

我们需要使用tinymce.init()来进行初始化；tinymce.init()内的初始化对象包含众多参数，但都是可省略的，唯一必须的参数就是selector（允许通过css选择器指定tinymce要绑定的内容容器，div和textarea都是可以的）

例如：

tinymce.init({ selector: '#tinydemo' });

获取tinymce富文本框内容的几种方式：

如果当前页面只有一个编辑器

获取内容：tinyMCE.activeEditor.getContent()

设置内容：tinyMCE.activeEditor.setContent("需要设置的编辑器内容")

如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）

获取内容：tinyMCE.editors[0].getContent()

设置内容：tinyMCE.editors[0].setContent("需要设置的编辑器内容")

获取不带HTML标记的纯文本内容

var activeEditor = tinymce.activeEditor; var editBody = activeEditor.getBody(); activeEditor.selection.select(editBody); //纯文本内容 var text = activeEditor.selection.getContent({ 'format': 'text' });

textarea可通过表单提交 TinyMCE Quick Start Guide Hello, World! tinymce.init({ selector: '#mytextarea' });

3. 常用配置 selector

渲染DOM，必填，String值，使用CSS选择器。

language

指定语言，String，值区分大小写。

language_url

汉化包路径

height

设置整个编辑器的高度，包括菜单栏、工具栏和状态栏,如果提供了数字，TinyMCE 以像素为单位设置高度。如果提供了字符串，TinyMCE 假定该值是有效的 CSS，并将编辑器的高度设置为字符串值。这允许备用单元，例如%，em，和vh。(测试%不起作用)

readonly

只读，Boolean，将编辑器设置成只读模式，不可编辑。

plugins

指定需加载的插件，String或Array，此插件必须已存在plugins目录内；若使用String值，多个插件用空格分隔；默认不会加载任何插件，支持自写插件。

可选插件配置：www.tiny.cloud/docs/plugins/opensource/advlist/

toolbar

自定义工具栏，Boolean或String或Array；为false时将关闭工具栏；String值时用于自定义工具栏，例：toolbar:"link | preview"，值中可插入“|”分组；支持多级工具栏,例：toolbar1:"",toolbar2:""；官网：www.tiny.cloud/docs/configure/editor-appearance/#toolbar

自定义菜单。例：

tinymce.init({ selector: '#tinydemo', menu: { file: {title: '文件', items: 'newdocument'}, edit: {title: '编辑', items: &

【本文地址】

【超详细】Tinymce富文本使用教程

【超详细】Tinymce富文本使用教程

今日新闻

推荐新闻