代码拉取完成，页面将自动刷新
[TOC]
协议：MIT
世界排名第一的开源富文本编辑器。
TinyMCE的优势：
安装
npm i tinymce
npm i @tinymce/tinymce-vue
先在public目录下新建文件夹 tinymce
将node_modules/tinymce/tinymce.min.js 复制到上面创建的文件夹目录下面
在public/tinymce目录下创建文件夹 skins 和 langs
将node_modules/tinymce/skins 文件夹直接复制到 public/tinymce目录下
配置中文语言 中文语言包 zh-Hans.js下载地址
Language Packages | Trusted Rich Text Editor | TinyMCE
下载完成后，解压。
解压完成后，将解压后 zh-Hans.js 复制到 public/tinymce/langs 文件夹下
如果zh-Hans.js中没有你要的中文，可以在zh-Hans.js中根据对应的英文加入对应中文的unicode编码或者直接用中文也行。
"Insert accordion":"插入手风琴","Toggle accordion":"切换手风琴","Delete accordion":"删除手风琴"
demo示例：
<template>
<editor v-model="textContent" :init="init" :tinymceScriptSrc="tinymceScriptSrc"></editor>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme' // 主题文件
import 'tinymce/icons/default'
import 'tinymce/models/dom'
// tinymce插件可按自己的需要进行导入
import 'tinymce/plugins/accordion' // 列表插件
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/advlist' // 有序列表插件
import 'tinymce/plugins/autolink' // 当用户输入有效的完整URL时，autolink插件会自动创建超链接。
import 'tinymce/plugins/link' // 链接
import 'tinymce/plugins/autosave' // 定时自动将编辑内容保存到浏览器本地存储中（Local Storage）
import 'tinymce/plugins/autoresize' // 可拉伸宽度
import 'tinymce/plugins/charmap' // 特殊字符
import 'tinymce/plugins/code' // 查看源码
import 'tinymce/plugins/codesample' // 插入代码
import 'tinymce/plugins/directionality' // 文字方向
import 'tinymce/plugins/emoticons' // 表情符号
import 'tinymce/plugins/emoticons/js/emojis'
import 'tinymce/plugins/fullscreen' //全屏
import 'tinymce/plugins/image' // 插入上传图片插件
import 'tinymce/plugins/importcss' //引入自己定义的css文件
import 'tinymce/plugins/insertdatetime' //插入时间日期
import 'tinymce/plugins/nonbreaking' // 空格
import 'tinymce/plugins/pagebreak' //分页
import 'tinymce/plugins/preview' // 预览
import 'tinymce/plugins/quickbars' // 快速工具栏
import 'tinymce/plugins/save' // 保存
import 'tinymce/plugins/searchreplace' //查询替换
import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/visualblocks' // 块范围显示
const props = defineProps({
modelValue: String,
})
const emit = defineEmits(['update:modelValue'])
const tinymceScriptSrc = '/tinymce/tinymce.min.js'
const init = {
height: 400,
language_url: '/tinymce/langs/zh-Hans.js',
language: 'zh-Hans',
skin_url: '/tinymce/skins/ui/oxide', // 皮肤：这里引入的是public下的资源文件
// skin_url: 'tinymce/skins/ui/oxide-dark',//黑色系
content_css: '/tinymce/skins/content/default/content.css', //内容区域css样式
content_style: "p {margin: 5px 0;}",
plugins: 'save accordion lists advlist quickbars autolink link autosave charmap wordcount code codesample directionality emoticons fullscreen image importcss insertdatetime nonbreaking pagebreak preview searchreplace table visualblocks formatpainter kityformula-editor',
toolbar: `save undo redo restoredraft code pastetext formatpainter removeformat | forecolor backcolor styles blocks fontfamily fontsize bold italic underline strikethrough lineheight | alignleft alignright aligncenter alignjustify
outdent indent ltr rtl | bullist numlist | blockquote subscript superscript | link table image charmap emoticons hr pagebreak insertdatetime | codesample kityformula-editor
| print preview fullscreen | wordcount nonbreaking searchreplace visualblocks custom-btn`,
toolbar_mode: 'wrap', // 工具栏模式: floating sliding scrolling wrap
external_plugins: { // 引入自定义的插件
'kityformula-editor': '/tinymce/plugins/kityformula-editor/plugin.min.js',
formatpainter: '/tinymce/plugins/formatpainter/plugin.min.js',
},
menubar: true, // 菜单栏
statusbar: true, // 是否显示底部状态栏
auto_focus: true, // 自动聚焦
branding: false, // 默认会在右下角显示Tiny图标
promotion: false, // 隐藏upgrade按钮
resize: true, // 改变宽高
// 快速工具栏配置，需引入插件 quickbars
quickbars_selection_toolbar: 'bold italic underline strikethrough', // 设置 快速选择 触发提供的工具栏 需引入插件 默认 'alignleft aligncenter alignright' 设置为false禁用
quickbars_insert_toolbar: 'quickimage quicktable quicklink', // 设置 快速插入 触发提供的工具栏 需引入插件quickbars 默认 quickimage quicktable 设置为false禁用
quickbars_image_toolbar: 'alignleft aligncenter alignright',
save_onsavecallback: function () { alert('已保存'); },
automatic_uploads: false, // 禁止图片自动上传
font_size_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_family_formats:
'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
setup: (editor: any) => {
console.log(editor);
editor.ui.registry.addButton("custom-btn", {
text: "自定义按钮",
icon: "ai",
tooltip: '自定义按钮',
onAction: function () {
alert('点击自定义按钮')
}
})
const onAction = (autocompleteApi: any, rng: any, value: any) => {
editor.selection.setRng(rng);
// editor.insertContent(value);
// contenteditable=false 不可编辑，保证删除时#和内容为一个整体
editor.insertContent(`<span style="color: blue;" contenteditable="false">#${value}</span><span> </span>`);
autocompleteApi.hide();
};
const getMatchedChars = (pattern: any) => {
return specialChars.filter(char => char.text.indexOf(pattern) !== -1);
};
/* 自动补全 */
editor.ui.registry.addAutocompleter('specialchars_cardmenuitems', {
trigger: '#',
minChars: 0,
columns: 1,
highlightOn: ['char_name'],
onAction: onAction,
fetch: (pattern: any) => {
return new Promise((resolve) => {
const results = getMatchedChars(pattern).map(char => ({
type: 'cardmenuitem',
value: char.value,
label: char.text,
items: [
{
type: 'cardcontainer',
direction: 'vertical',
items: [
{
type: 'cardtext',
text: char.text,
name: 'char_name'
},
{
type: 'cardtext',
text: char.value
}
]
}
]
}));
resolve(results);
});
}
});
},
// 初始化完成
init_instance_callback: (editor: any) => {
console.log('初始化完成：', editor)
editor.on('blur', (_e: any) => {
alert('失焦保存')
// var content = tinyMCE.activeEditor.getContent();
})
},
// 此处为自定义图片上传处理函数
images_upload_handler: (blobInfo: any) => new Promise((resolve: any, reject: any) => {
let file = blobInfo.blob()
// 调接口
console.log(file, resolve, reject, '==file')
// let url = 'blob:http://127.0.0.1:8000/2c6c7bbe-cb9a-481d-acfe-adc00f2866d5'
// resolve(url)
}),
image_advtab: true, // 图片高级功能
lists_indent_on_tab: true, // 是否按tab键进入新的子列表
link_context_toolbar: true,
link_rel_list: [
{ title: 'No Referrer', value: 'noreferrer' },
{ title: 'External Link', value: 'external' }
],
link_target_list: [
{ title: 'None', value: '' },
{ title: 'Same page', value: '_self' },
{ title: 'New page', value: '_blank' },
{ title: 'Parent frame', value: '_parent' }
],
fullscreen_native: true,
pagebreak_split_block: true,
table_border_widths: [
{ title: 'small', value: '1px' },
{ title: 'medium', value: '3px' },
{ title: 'large', value: '5px' },
],
table_toolbar: 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol tablecellborderwidth tablecellborderstyle',
}
// 组件挂载完毕
onMounted(() => {
tinymce.init({})
})
const specialChars = [
{ text: 'exclamation mark', value: '123' },
{ text: 'at', value: '456' },
{ text: 'hash', value: '789' },
]
const textContent = ref(props.modelValue)
watch(textContent, (newVal) => emit('update:modelValue', newVal))
</script>
<style scoped></style>
上面的demo是功能齐全的，实际使用时，根据你需要的进行动态删减。
plugins为插件配置，将需要在编辑器中使用的插件加入其中即可。
toolbar为工具栏配置，将需要在工具栏显示插件加入其中即可，前提是已经引入并在plugins中加入了插件。
此功能仅适用于TinyMCE 6.5及更高版本。
Accordion插件允许在文档中创建节(sessions)，这些节可以展开或折叠以显示或隐藏其他内容。
就是实现HTML5中的details标签功能——详细信息展现标签。
For example:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'accordion',
toolbar: 'accordion',
});
要将Accordion插件添加到编辑器，请将accordion添加到编辑器配置中的plugins选项。
要将Accordion工具栏图标添加到TinyMCE工具栏，请将accordion添加到编辑器配置中的toolbar选项。
以下配置选项会影响Accordion插件的行为。
此选项用于设置Accordion sections 的状态
有三个可能值：inherited, collapsed, expanded
当设置为collapsed时，所有Accordion将在创建和编辑器加载时显示为关闭。
当设置为expanded时，所有Accordion将在创建和编辑器加载时显示为打开。
【默认】当设置为inherited时，此选项的默认值是继承的。也就是初始是什么状态显示的就是什么状态。
我们知道
details标签可以通过open属性来控制默认展开和收起状态。下面两个details，第一个是open，第二个是默认关闭。这就是默认状态。
const content = (`
<details id="mce-accordion1" open>
<summary>How does it present to an end-user?</summary>
<p>By default, when the <code>accordion</code> plugin is loaded, the command is available in the TinyMCE menu at <strong>Insert → Accordion</strong>.</p>
</details>
<details id="mce-accordion2">
<summary>11?</summary>
<p>222</p>
</details>
`)
Example：设置所有的Accordion sections 为关闭状态。
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: accordion,
details_initial_state: 'collapsed' // 关闭
});
Example：在新建文档中的预配置的关于<details>的内容设置为打开。
使用
newdocument新建文档。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
toolbar: 'newdocument',
newdocument_content: '<details><summary>Accordion summary...</summary><p>Accordion body...</p></details>',
details_initial_state: 'expanded',
});
details_serialized_state
此选项设置保存TinyMCE实例中的内容时Accordion sections的状态。
有三个可能值：inherited, collapsed, expanded
collapsed时，所有Accordion都设置为在内容保存时关闭。expanded时，所有Accordion都设置为在内容保存时打开。inherited时，Accordion在内容保存时保留其各自的状态。Example：预览时设置<details>的状态为关闭。初始状态设置为打开。
使用
preview进行预览。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'preview', // added to this example for UX demonstration purposes; see the NOTE below
newdocument_content: '<details><summary>Accordion summary...</summary><p>Accordion body...</p></details>',
details_initial_state: 'expanded',
details_serialized_state: 'collapsed',
});
| 工具栏按钮标识符 | 描述 |
|---|---|
| accordion | 插入accordion |
| accordiontoggle | 切换accordion的展开收起状态 |
| accordionremove | 删除选中的accordion |
| 名称 | 参数 | 描述 |
|---|---|---|
| InsertAccordion | 无 | 在当前位置插入一个accordion |
| ToggleAccordion | true/false | 设置选中accordion的展开收起状态 |
| ToggleAllAccordions | true/false | 设置所有accordion的展开收起状态 |
| RemoveAccordion | 无 | 移除当前位置的accordion |
Examples
init_instance_callback: (editor: any) => {
// 初始化完成
// inserts an accordion section at the current position
editor.execCommand('InsertAccordion');
// sets the accordion at the current position to open
editor.execCommand('ToggleAccordion', false, true);
// sets all accordions in the current document to closed
editor.execCommand('ToggleAllAccordions', false, false);
// removes the accordion at the current position
editor.execCommand('RemoveAccordion');
}
execCommand第二个参数起源于旧的IE。例如。当true在createLink中时，IE显示一个弹出的用户输入该链接的协议和URL。Edge，FF和Chrome不用在乎这个值，设置为false就行。
在vue中使用，必须在
init_instance_callback初始化完成里调用，不可以在setup中调用。
光标放在summary中也是不能插入
accordion的。
列表插件允许您添加编号和项目符号列表到TinyMCE。
要启用高级列表（例如字母编号列表，方形项目符号），您还应该启用 advlist插件。
该插件还规范了浏览器之间的列表行为。如果你在列表的一致性方面有问题，就启用它。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'lists',
toolbar: 'numlist bullist'
});
listprops菜单项添加到Tools菜单的示例listprops菜单项打开列表属性对话框。
此对话框仅适用于编号列表(可以改变序号的类型)。除非所选内容或插入点位于编号列表中，否则菜单项处于非活动状态。
只对有序列表生效。
上述标识符可以被以下情况使用：（具体菜单、右键、自定义按钮如何配置见配置说明文档）
menu 菜单配置contextmenu 右键配置Example：menu菜单配置
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'lists',
toolbar: 'bullist numlist',
menu: { tools: { title: 'Tools', items: 'listprops' }},
});
lists_indent_on_tab
是否按tab键生成新的子列表。默认值是 true。
设置 false 后再按tab键就是恢复浏览器的tab切换。
Example：使用 lists_indent_on_tab
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'lists',
toolbar: 'numlist bullist',
lists_indent_on_tab: false // 此时按tab键就不会进行进入新的子列表
});
| 工具栏按钮标识符 | 描述 |
|---|---|
| bullist | 无序列表 |
| numlist | 有序列表 |
上述标识符可以被以下三种情况使用：
toolbar工具栏配置quickbars_insert_toolbar快速插入工具栏配置，新的行插入会提示quickbars_selection_toolbar快速选择工具栏配置，选中文字会提示Example: 2和3。需引入插件quickbars
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'lists quickbars',
toolbar: 'numlist bullist',
// 快速工具栏配置，需引入插件 quickbars
quickbars_selection_toolbar: 'bullist numlist', // 设置 快速选择 触发提供的工具栏 默认 'alignleft aligncenter alignright' 设置为false禁用
quickbars_insert_toolbar: 'bullist numlist', // 设置 快速插入 触发提供的工具栏s 默认 quickimage quicktable 设置为false禁用
});
Example：自定义上下文。
文本选中提示，不可以引入
quickbars，会有冲突。
tinymce.init({
selector: 'textarea#context-toolbar',
height: 350,
setup: (editor) => {
editor.ui.registry.addContextToolbar('textselection', {
predicate: (node) => !editor.selection.isCollapsed(),
items: 'bold italic | bullist numlist',
position: 'selection',
scope: 'node'
});
},
})
| 命令 | 描述 |
|---|---|
| InsertDefinitionList | 将定义列表插入编辑器。修改选中列表的属性。 |
| InsertOrderedList | 将一个有序列表插入编辑器。 |
| InsertUnorderedList | 将一个无序列表插入编辑器。 |
| mceListUpdate | 更新列表属性或样式。 |
| mceListProps | 打开列表属性对话框。 |
| RemoveList | 从所选内容中删除列表元素。 |
Examples
tinymce.activeEditor.execCommand('InsertDefinitionList', false, {
'list-item-attributes': {class: 'mylistitemclass'},
'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('InsertOrderedList', false, {
'list-style-type': 'decimal',
'list-item-attributes': {class: 'mylistitemclass'},
'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('InsertUnorderedList', false, {
'list-style-type': 'disc',
'list-item-attributes': {class: 'mylistitemclass'},
'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('mceListUpdate', false, {
styles: { 'background-color': 'powderblue' }
});
tinymce.activeEditor.execCommand('mceListUpdate', false, {
attrs: { contenteditable: 'false' }
});
tinymce.activeEditor.execCommand('mceListProps');
tinymce.activeEditor.execCommand('RemoveList');
此功能仅适用于TinyMCE 6.2及更高版本。
列表项目符号和列表编号现在可以采用内联格式。
advlist插件通过向控件添加CSS list-style-type，可以修改toolbar上无序列表和有序列表显示的序号类型。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'lists advlist'
});
!!必须激活
lists插件才能使advlist插件工作。
advlist_bullet_styles
控制工具栏的bullist（无序列表）的序号类型。
默认值：'default,circle,square'
可选值：
default: 默认类型—实心圆circle: 空心圆disc: 实心圆square: 实心方块Example：
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: 'lists advlist',
toolbar: 'bullist',
advlist_bullet_styles: 'square' // only include square bullets in list
});
可以写一个或多个类型，通过英文逗号分隔。
advlist_number_styles
控制工具栏的numlist有序列表的序号类型。
默认值：'default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman'
可选值：
default: 默认值—十进制lower-alpha:小写英文字母, e.g. a, b, c, … zlower-greek: 小写希腊字母, e.g. α, β, γ …lower-roman: 小写罗马数字, e.g. i, ii, iii, iv, v …upper-alpha: 大写英文字母, e.g. A, B, C, … Zupper-roman: 大写罗马数字, e.g. I, II, III, IV, V …Example：
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'lists advlist',
toolbar: 'numlist',
advlist_number_styles: 'lower-alpha' // only include lower alpha in list
});
| 命令 | 描述 |
|---|---|
| ApplyOrderedListStyle | 指定有序列表的list-style-type |
| ApplyUnorderedListStyle | 指定无序列表的list-style-type |
有关可用列表类型的信息，见: MDN web docs - list-style-type.
Examples
init_instance_callback: (editor: any) => {
// 初始化完成
editor.execCommand('ApplyOrderedListStyle', false, {
'list-style-type': 'cjk-decimal' // 中文一二三四五...
});
editor.execCommand('ApplyUnorderedListStyle', false, {
'list-style-type': 'disc'
});
}
此功能仅适用于TinyMCE 6.2及更高版本。
列表项目符号和列表编号现在可以采用内联格式。
此插件向工具栏添加一个锚/书签按钮，该按钮在编辑器的光标插入点插入一个锚。它还可以在Insert菜单(quickbars_insert_toolbar)下添加菜单项锚。
当用户单击锚按钮或菜单项时，将通过对话框提示用户输入字符串。该字符串将作为锚id插入到HTML中光标所在的位置。例如，用户将光标放在“Hello World”的开头，单击锚按钮并在对话框中输入“start”。结果HTML将采用<p><a id="start"></a>Hello，World！</p>.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'anchor',
toolbar: 'anchor',
});
allow_html_in_named_anchor此选项允许您指定编辑器是否应解析HTML并将其保留在命名的锚标记内。
也就是，设置为false就无法删除锚点(保留锚点)，设置为true可以删除锚点。
默认值：false
类型：布尔
Example：
tinymce.init({
selector: 'textarea', // change this value according to your HTML
allow_html_in_named_anchor: true
});
| 命令 | 描述 |
|---|---|
| mceAnchor | 打开插入/编辑锚对话框。 |
Example:
tinymce.activeEditor.execCommand('mceAnchor');
Autolink插件在用户键入有效、完整的URL时自动创建超链接。例如，www.example.com被转换为http://www.example.com。
请注意，此选项不会转换不完整的URL。例如，example.com将保持为未链接的文本，URL必须包含www才能自动转换。
粘贴的URL由TinyMCE的核心代码自动转换为元素，而不是由autolink插件。因此，此处描述的行为和设置不适用于粘贴的链接。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'autolink'
});
link_default_target此选项允许您在通过链接对话框插入/编辑链接时设置链接的默认target。如果link_default_target的值与link_target_list选项指定的值匹配，则该项将被设置为链接对话框中目标对象的默认项。
设置链接的默认打开方式。
设置链接的默认打开方式，但其实不管是
_self还是_blank，在当前编辑器中都是新标签页打开。实测是在非编辑状态下(即用
v-html显示内容)，_self才可以在当前页面打开。
link_target_list见link插件的选项配置，用于设置链接打开方式。
此选项也适用于
link插件。
类型：String
默认值：无，但其实a标签的target属性默认是_self。
Example:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'link autolink',
toolbar: 'link',
link_default_target: '_blank'
});
link_default_protocol此选项允许您在通过链接对话框插入/编辑链接时为链接设置默认协议。协议将应用于尚未指定协议且已接受前缀提示的任何链路。
为链接添加协议。
此选项也适用于
link插件。
类型：String
默认值：https
Example:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'link autolink',
toolbar: 'link',
link_default_protocol: 'http'
});
链接插件允许用户将外部资源（如网站URL）链接到其文档中的选定文本。
它增加了两个工具栏按钮，称为link和unlink，以及三个菜单项，称为link，unlink和open;onk。TinyMCE的默认配置中包含工具栏按钮和名为link的菜单项。link菜单项可以在插入菜单中找到。
链接插件还包括上下文菜单和上下文工具栏。上下文工具栏可以使用下面记录的link_context_toolbar和link_quicklink选项进行配置。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'link',
toolbar: 'link'
});
link_default_target此选项允许您在通过链接对话框插入/编辑链接时设置链接的默认目标值。如果link_default_target的值与link_target_list选项指定的值匹配，则该项将被设置为链接对话框中目标对象的默认项。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'link',
toolbar: 'link',
link_default_target: '_blank'
});
link_assume_external_targets设置如果提供的URL不包含协议前缀，TinyMCE是否应在前缀前添加http：//前缀。
false：当输入的URL以www开头并且没有协议时，提示用户在前面添加http：//。添加其他URL时没有提示。true：假设URL是外部的。未指定协议时，系统会提示用户在前面添加http：//前缀。'http'：URL被假定为外部的。没有协议前缀的URL会被添加一个http：//前缀。'https'：URL被假定为外部的。没有协议前缀的URL会被添加一个https：//前缀。默认值：false
link_class_listlink_class_list选项允许您为链接对话框指定class列表。这些类将出现在链接对话框的菜单中。每个类都必须定义为一个对象，具有标题和值。例如：{ title：'Cat'，value：'cat' }。当对话框被提交时，从对话框中选择的类项的value。
默认值：[]
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'link',
toolbar: 'link',
link_class_list: [
{ title: 'None', value: '' },
{ title: 'External Link', value: 'ext_link' },
{ title: 'Internal Support Link', value: 'int_sup_link' },
{ title: 'Internal Marketing Link', value: 'int_mark_link' },
{ title: 'Other Internal Link', value: 'int_other_link' }
]
});
若要创建嵌套列表，请将value替换为menu以添加列表的顶层，然后提供一个项目数组。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'link',
toolbar: 'link',
link_class_list: [
{ title: 'None', value: '' },
{ title: 'External Link', value: 'ext_link' },
{ title: 'Internal Links',
menu: [
{ title: 'Internal Support Link', value: 'int_sup_link' },
{ title: 'Internal Marketing Link', value: 'int_mark_link' },
{ title: 'Other Internal Link', value: 'int_other_link' }
]
}
]
});
link_context_toolbar默认情况下，无法直接从编辑器打开链接。将link_context_toolbar设置为true将启用一个上下文工具栏，当用户的光标位于链接内时，该工具栏将出现。此上下文工具栏包含用于修改、删除和打开所选链接的字段。外部链接将在单独的选项卡中打开，而相对链接将滚动到编辑器中的目标（如果找到目标）。
默认值：false
link_default_protocol此选项允许您在通过链接对话框插入/编辑链接时为链接设置默认协议。协议将应用于尚未指定协议且已接受前缀提示的任何链路。
默认值：https
link_list此选项允许您为链接对话框指定预定义的链接列表。这些链接将添加到链接对话框的下拉列表中。选择列表项后，对话框将填充相关数据。如果您的用户需要定期链接到相同的源，这很有用。
有多种方法可以指定如何获取链接列表的数据，但所有方法都依赖于返回的包含链接项数组的数据。链接项是具有标题和值的对象。例如：{ title：'My page 1'，value：'https：www.tiny.cloud' }。
类型：字符串、数组或函数
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'link',
toolbar: 'link',
link_list: [
{ title: '{companyname} Home Page', value: '{companyurl}' },
{ title: '{companyname} Blog', value: '{companyurl}/blog' },
{ title: '{productname} Documentation', value: '{companyurl}/docs/' },
{ title: '{productname} on Stack Overflow', value: '{communitysupporturl}' },
{ title: '{productname} GitHub', value: 'https://github.com/tinymce/' }
]
});
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'link',
toolbar: 'link',
link_list: [
{ title: '{companyname} Home Page', value: '{companyurl}' },
{ title: '{companyname} Blog', value: '{companyurl}/blog' },
{ title: '{productname} Support resources',
menu: [
{ title: '{productname} Documentation', value: '{companyurl}/docs/' },
{ title: '{productname} on Stack Overflow', value: '{communitysupporturl}' },
{ title: '{productname} GitHub', value: 'https://github.com/tinymce/' }
]
}
]
});
您还可以使用JSON数据配置URL。JSON数据必须使用与上面相同的格式。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'link',
toolbar: 'link',
link_list: '/mylist.php'
});
link_list也可以采用一个函数，当链接对话框打开时调用该函数。TinyMCE传递给这个函数一个成功回调函数，它应该传递一个链接项数组。这允许链接列表的异步和动态生成。
下面是一个如何将link_list与回调函数一起使用的示例。fetchLinkList可以替换为任何返回链接项数组的函数。它可用于根据以下内容生成链接项列表：
const fetchLinkList = () => [
{ title: 'My page 1', value: 'https://www.tiny.cloud' },
{ title: 'My page 2', value: 'https://about.tiny.cloud' }
];
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'link',
toolbar: 'link',
link_list: (success) => { // called on link dialog open
const links = fetchLinkList(); // get link_list data
success(links); // pass link_list data to {productname}
}
});
link_title此选项允许您禁用链接对话框中的链接标题输入字段。
默认值：true
link_quicklink此选项更改CTRL + K快捷键的行为。默认情况下，按CTRL + K将打开链接对话框。如果link_quicklink设置为true，则按CTRL + K将打开链接上下文工具栏。如果光标位于现有链接内，则此上下文工具栏将包含用于修改、删除和打开所选链接的字段。如果没有，上下文工具栏允许快速插入链接。
默认值：false
link_rel_list
rel属性定义了所链接的资源与当前文档的关系，在<a>、<area>和<link>元素上有效。支持的值取决于拥有该属性的元素。有关可用列表类型的信息，见: MDN web docs - HTML 属性：rel.
此选项允许您为链接对话框指定rel值列表。这些值将应用于rel属性。每个rel项必须定义为一个具有标题和值的对象。例如：{ title：'No Referrer'，value：'noReferrer' }。当提交对话框时，所选rel项的value。
默认值：[]
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'link',
toolbar: 'link',
link_rel_list: [
{ title: 'No Referrer', value: 'noreferrer' },
{ title: 'External Link', value: 'external' }
]
});
link_target_listlink_target_list选项允许您为链接对话框指定命名目标的列表。这些目标将出现在链接对话框的菜单中。每个目标都必须定义为一个对象，该对象具有标题和值。例如：{ title：'Same page'，value：'_self' }。提交对话框时，所选目标项的value。
如果还配置了link_default_target并且其值与link_target_list指定的值匹配，则该项将被设置为链接对话框中目标对象的默认项。
默认值：
[
{ text: 'Current window', value: '' },
{ text: 'New window', value: '_blank' }
]
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'link',
toolbar: 'link',
link_target_list: [
{ title: 'None', value: '' },
{ title: 'Same page', value: '_self' },
{ title: 'New page', value: '_blank' },
{ title: 'Parent frame', value: '_parent' }
]
});
要禁用选项对话框，请将link_target_list设置为false。
| 按钮标识符 | 描述 |
|---|---|
| link | 在编辑器中创建/编辑链接。 |
| unlink | 从当前选择中删除链接。 |
| openlink | 在新选项卡中打开选定的链接。 |
只有link适用。unlink和openlink不适用。
mceLink：在当前光标位置或为当前选择打开链接或快速链接对话框。
tinymce.activeEditor.execCommand('mceLink');
这个插件会自动调整编辑器的大小，以适应其中的内容。它通常用于防止编辑器在用户输入到可编辑区域时无限扩展。例如，通过给max_height选项一个值，编辑器将在达到设置值时停止拉伸。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'autoresize'
});
这些设置会影响自动调整大小插件的执行，包括对最小宽度、高度、底部边距和默认初始化状态的更改。
autoresize_bottom_margin类型：Number
此选项允许您在初始化时指定编辑器padding设置底部的body的大小。
必须将
autoresize_bottom_margin设置为小于为文档设置的任何margin-bottom的值。
autoresize_overflow_padding类型：Number
此选项允许您在初始化时指定编辑器的padding集两侧的body的大小。
max_height根据max_height插件的状态，autoresize选项有两种行为：
autoresize关闭（默认）：如果没有autoresize插件，此选项设置用户可以拉伸整个TinyMCE界面的最大高度（通过抓住编辑器界面右下角的可拖动区域）。autoresize 打开：使用autoresize插件，此选项设置编辑器可以自动扩展到的最大高度。类型：Number
如果
resize选项设置为false，则调整大小手柄将被禁用，用户将无法调整编辑器的大小（通过手动拖动）。
min_heightmin_height选项有两种行为，具体取决于autoresize插件的状态：
autoresize关闭（默认）：如果没有autoresize插件，此选项设置用户可以缩小整个TinyMCE界面的最小高度（通过抓住编辑器界面右下角的可拖动区域）。autoresize 打开：使用autoresize插件，此选项设置编辑器可以自动缩小到的最小高度。类型：Number
默认值：100
| 命令 | 描述 |
|---|---|
| mceAutoResize | 自动调整编辑器的大小以适应内容 |
Example:
tinymce.activeEditor.execCommand('mceAutoResize');
如果用户在编辑器中有未保存的更改，autosave插件会向用户发出警告：
autosave 插件增加了：
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'autosave',
toolbar: 'restoredraft'
});
autosave_ask_before_unload此选项允许您设置编辑器是否应提示用户在试图关闭当前窗口时告知他们有未保存的更改。
默认值：true
autosave_interval此选项使您可以指定编辑器在拍摄当前内容的快照和将其保存到本地存储之间应等待的时间。语法是将字母s附加到数字值的末尾。例如，“30s”表示30秒。
默认值：30s
autosave_prefix此选项允许您设置用于localStorage的key的前缀。
默认值：tinymce-autosave-{path}{query}-{id}-
autosave_restore_when_empty此选项允许您指定当编辑器在初始化时为空时，TinyMCE是否应自动恢复存储在本地存储中的内容。这对于那些不知道如果浏览器崩溃，可以通过从Restore last draft菜单中选择File来恢复丢失的工作的用户来说很有用。
默认值：true
autosave_retention此选项允许您指定应保留在本地存储中的持续时间编辑器内容。超过设定时间的内容将被忽略。语法是将字母m附加到数字值的末尾。例如，“20m”为20分钟。
默认值：20m
| 按钮标识符 | 描述 |
|---|---|
| restoredraft | 恢复到最新的自动保存草稿 |
| 菜单项标识符 | 默认菜单位置 | 描述 |
|---|---|---|
| restoredraft | File | 恢复到最新的自动保存草稿。 |
该插件自动在“插入”菜单中添加“特殊字符”工具，点击后出现一个包含许多特殊字符的窗口，点击可插入相应的特殊字符。也可以配置工具栏，加入值charmap，使该功能出现在工具栏上。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'charmap',
toolbar: 'charmap',
});
charmap
自定义该窗口中可选的特殊字符。
该值是一个数组（也可以是返回值是数组的函数），数组元素又由若干子数组组成。子数组的第一个值为字符的Unicode代码，第二个值是当鼠标悬停时出现的字符名称。
Unicode代码可以是十进制、八进制或十六进制，多个时，进制要统一。
取值：Array, Function
tinymce.init({
selector: '#tinydemo',
plugins: "charmap",
toolbar: "charmap",
charmap: [
[0x2615, 'morning coffee'],
[0x2600, 'sun'],
[0x2601, 'cloud'],
],
});
charmap_append追加特殊字符到弹出窗口左侧分类的“自定义”列表中。
该值是一个数组（也可以是返回值是数组的函数），写法同上。
取值：Array, Function
tinymce.init({
selector: '#tinydemo',
plugins: "charmap",
toolbar: "charmap",
charmap_append: [
[0x2615, 'morning coffee'],
[0x2600, 'sun'],
[0x2601, 'cloud'],
],
});
可使用该插件编辑内容区的HTML源码。
该插件可在工具栏提供一个按钮，该功能也可通过菜单“工具”中选取。
tinymce.init({
selector: '#tinydemo',
plugins: "code",
toolbar: "code",
});
代码示例插件（codesample）允许用户将语法颜色突出显示的代码片段插入和嵌入到可编辑区域中。它还向工具栏添加了一个按钮，单击该按钮将打开一个对话框以接受原代码输入。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'codesample',
toolbar: 'codesample'
});
默认情况下，codesample使用http://prismjs.com/在编辑器中嵌入代码示例，并开箱即用。也就是说，当用户将有效的代码语法复制到可编辑区域时，代码将根据Prism默认的CSS规则自动格式化。
codesample_global_prismjs此配置选项允许在突出显示代码示例块时使用全局Prism.js版本，而不是使用捆绑在codesample插件中的Prism.js版本。这允许使用自定义版本的Prism.js，包括其他语言。
使用此选项时，请确保在站点上加载了Prism.js和任何语言加载项，以及TinyMCE脚本：
<script src="prism.js" data-manual></script>
<script src="tinymce.js"></script>
类型：boolean
默认值：false
当前默认的已经够用，不用考虑增加其他的代码高亮显示。
codesample_languages此配置选项使您能够设置要在语言下拉列表中显示的语言列表。
tinymce.init({
selector: 'textarea',
plugins: 'codesample',
codesample_languages: [
{ text: 'HTML/XML', value: 'markup' },
{ text: 'JavaScript', value: 'javascript' },
{ text: 'CSS', value: 'css' },
{ text: 'PHP', value: 'php' },
{ text: 'Ruby', value: 'ruby' },
{ text: 'Python', value: 'python' },
{ text: 'Java', value: 'java' },
{ text: 'C', value: 'c' },
{ text: 'C#', value: 'csharp' },
{ text: 'C++', value: 'cpp' }
],
toolbar: 'codesample'
});
适应不同语言的书写方式，ltr文字方向从左到右，rtl从右到左。
实际效果就是让文字是左对齐/右对齐。
tinymce.init({
selector: '#tinydemo',
plugins: "directionality",
toolbar: "ltr rtl",
});
可在内容区插入unicode字符表情。
实际使用会报
Failed to load emojis: Script at URL "http://localhost:5173//plugins/emoticons/js/emojis.js" failed to load的错误，此时需要把emojis.js文件在组件中引入。import 'tinymce/plugins/emoticons' // 表情符号 import 'tinymce/plugins/emoticons/js/emojis'
tinymce.init({
selector: '#tinydemo',
plugins: "emoticons",
toolbar: "emoticons",
});
可以通过以下选项覆盖或扩展默认的emoji表情列表。
以下为自定义表情的格式示例。robot和dog为表情名，内部的keywords为该表情关键字，用于检索，char为该表情的unicode字符，category用于归类。
{
"robot": {
"keywords": ["computer", "machine", "bot"],
"char": "🤖",
"category": "people"
},
"dog": {
"keywords": ["animal", "friend", "nature", "woof", "puppy", "pet", "faithful"],
"char": "🐶",
"category": "animals_and_nature"
}
}
emoticons_append用于追加表情到默认列表中。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'emoticons',
toolbar: 'emoticons',
emoticons_append: {
custom_mind_explode: {
keywords: [ 'brain', 'mind', 'explode', 'blown' ],
char: '🤯'
}
}
});
emoticons_database此选项提供了指定在编辑器中渲染表情符号时使用哪个内置表情符号数据库的功能。以下内置的emoji数据库可用：
emojis -此数据库使用Unicode字符来表示编辑器内容中的emoji。
emojiimages -此数据库使用Twitter Emoji（twemoji）项目提供的图像来表示编辑器内容中的emoji。
由Tiny Technologies，Inc.在CC-BY 4.0许可协议下使用Twitter表情符号（twemoji）图形。
默认值：emojis
emoticons_database_url此选项提供加载表情数据库的默认位置。数据库应该是一个外部JavaScript文件，它注册了一个tinymce.plugins.emoticons资源。
默认值：'${pluginUrl}/js/emojis.js'
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'emoticons',
toolbar: 'emoticons',
emoticons_database_url: '/emojis.js'
})
emoticons_images_url此选项设置使用emojiimages数据库时用于表示表情符号的图像的基本URL。
默认值：'https://twemoji.maxcdn.com/v/13.0.1/72x72/'
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'emoticons',
toolbar: 'emoticons',
emoticons_database: 'emojiimages',
emoticons_images_url: 'http://my.server/images/emoticons/'
});
这个插件为TinyMCE增加了全屏编辑功能。当按下工具栏按钮时，可编辑区域将填充浏览器的视口。该插件在Fullscreen菜单下添加了一个工具栏按钮和一个菜单项View。
全屏模式可以使用以下键盘快捷键切换：
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'fullscreen',
toolbar: 'fullscreen'
});
fullscreen_native设为true后，全屏将不在是网页全屏，而是使用浏览器的全屏模式（同按F11键）
默认值：false
启用fullscreen_native时：
提供一个帮助组件，提示快捷键的用法、当前加载的插件和TinyMCE的版本。该插件提供一个快捷键alt+0，可用快速打开帮助窗口（当鼠标焦点在编辑区时可用）。
直接使用会报错，需要引入语言包。
import 'tinymce/plugins/help' //帮助 import 'tinymce/plugins/help/js/i18n/keynav/en.js'
tinymce.init({
selector: '#tinydemo',
plugins: "help",
toolbar: "help",
});
help_accessibility当帮助插件被加载时，TinyMCE编辑器默认在TinyMCE状态栏[编辑器底部]中显示用于访问帮助对话框的键盘快捷键。
help_tabs帮助对话框显示的菜单。
此选项允许您指定帮助对话框应显示哪些选项卡以及显示顺序。默认的TinyMCE选项卡称为shortcuts、keyboardnav、plugins和versions。这些选项卡可以通过提供具有相同name的新选项卡面板规范来覆盖，并且可以通过使用新name注册选项卡面板来添加新选项卡。新的选项卡可以在help_tabs配置中注册，也可以在初始化或运行时使用addTab API方法注册。
如果配置了help_tabs，则仅显示在help_tabs中命名的选项卡。使用addTab定义的、在help_tabs中没有命名的任何选项卡都将被忽略。
如果未配置help_tabs，则使用addTab定义的任何选项卡将显示在默认选项卡之后。
默认值：[ 'shortcuts', 'keyboardnav', 'plugins', 'versions' ]
tinymce.init({
selector: 'textarea',
plugins: 'help link table code emoticons',
toolbar: 'help addTab',
help_tabs: [
'shortcuts', // the default shortcuts tab
'keyboardnav', // the default keyboard navigation tab
'plugins', // the default plugins tab
{
name: 'custom1', // new tab called custom1
title: 'Custom Tab 1',
items: [
{
type: 'htmlpanel',
html: '<p>This is a custom tab</p>',
}
]
},
{
name: 'versions', // override the default versions tab
title: 'Custom Versions',
items: [
{
type: 'htmlpanel',
html: 'This is a custom versions panel.'
}
]
},
'custom2', // new tab custom2 as defined on init in setup() below
'custom3' // new tab custom3 as defined on button click in setup() below
],
setup: (editor) => {
// on editor init, add a tab called custom2
editor.on('init', () => {
editor.plugins.help.addTab({
name: 'custom2',
title: 'Custom Tab 2',
items: [
{
type: 'htmlpanel',
html: '<p>This is another custom tab</p>',
}
]}
);
});
// add a toolbar button that when clicked adds a tab called custom3
editor.ui.registry.addButton('addTab', {
text: 'Add tab',
onAction: () => {
editor.plugins.help.addTab({
name: 'custom3',
title: 'Custom Tab 3',
items: [
{
type: 'htmlpanel',
html: '<p>This is yet another custom tab</p>',
}
]
});
}
});
}
});
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'image',
toolbar: 'image',
image_list: [
{ title: 'My image 1', value: 'https://www.example.com/my1.gif' },
{ title: 'My image 2', value: 'http://www.moxiecode.com/my2.gif' }
]
});
这不是拖放功能，用户需要输入图像的路径。用户还可以选择输入图像描述、尺寸以及是否应限制图像比例（通过复选框选择）。其中一些设置可以使用插件的配置选项进行预设。
TinyMCE不支持SVG（可缩放矢量图形），以保护我们的用户及其最终用户。SVG可用于执行客户端和服务器端攻击。
a11y_advanced_options
a11y是可访问性的缩写，一般面向残障人士。
开启后，会在对话框中添加role="presentation"，该声明用于告诉浏览器这个图片仅作为装饰，无实际意义。
file_picker_callback用来添加自定义文件选择器。
缺点：不可以拖拽图片上传。拖拽图片上传请使用
images_upload_handler
file_picker_types: 'image',
/* and here's our custom image picker*/
file_picker_callback: (cb: any, value, meta) => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.addEventListener('change', (e: any) => {
const file = e.target.files[0];
const reader: any = new FileReader();
reader.addEventListener('load', () => {
/*
Note: Now we need to register the blob in TinyMCEs image blob
registry. In the next release this part hopefully won't be
necessary, as we are looking to handle it internally.
*/
const id = 'blobid' + (new Date()).getTime();
console.log(tinymceRef.value, '==tinymceRef.value');
const blobCache = tinymceRef.value.editorUpload.blobCache;
const base64 = reader.result.split(',')[1];
const blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
console.log(blobInfo, '==blobInfo.blobUri()');
// 调接口
// let file = blobInfo.blob()
// console.log(file, '==file')
/* call the callback and populate the Title field with the file name */
cb(blobInfo.blobUri(), { title: file.name });
});
reader.readAsDataURL(file);
});
input.click();
},
file_picker_types此选项使您能够通过空格或逗号分隔的类型名称列表指定所需的文件选择类型。目前有三种有效的类型：file、image和media。
可能的值：'file', 'image', 'media'
tinymce.init({
selector: 'textarea', // change this value according to your HTML
file_picker_types: 'image'
});
image_caption此选项允许用户为图像启用字幕。启用此选项后，图像对话框将有一个名为“标题”的额外复选框。当用户选中复选框时，图像将被包装在HTML5 figure元素中，其中包含figcaption。然后用户可以在编辑器中输入标题内容。
类型：boolean
默认值：false
下面是当用户选择标题复选框时创建的HTML示例。
<figure class="image">
<img src="url" alt="" />
<figcaption>Caption</figcaption>
</figure>
请注意，figure元素需要添加一些自定义CSS才能正确呈现。以下是TinyMCE内部content.css中使用的内容，可以用您自己的自定义content_css样式表覆盖。
figure.image {
display: inline-block;
border: 1px solid gray;
margin: 0 2px 0 1px;
background: #f5f2f0;
}
figure.align-left {
float: left;
}
figure.align-right {
float: right;
}
figure.image img {
margin: 8px 8px 0 8px;
}
figure.image figcaption {
margin: 6px 8px 6px 8px;
text-align: center;
}
image_list此选项允许您指定图像的预定义源列表。image_list采用数组的形式，其中包含要添加到列表中的项目以及相应的图像。每个项目都有一个title和一个value。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'image',
toolbar: 'image',
image_list: [
{ title: 'Cat', value: 'cat.png' },
{ title: 'Dogs',
menu: [
{ title: 'Alaskan Husky', value: 'husky.jpg' },
{ title: 'Dingo', value: 'dingo.png' },
{ title: 'Swedish Lapphund', value: 'swedish_lapphund.gif' }
]
}
]
});
自定义函数的示例:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'image',
toolbar: 'image',
image_list: (success) => {
success([
{ title: 'Dog', value: 'mydog.jpg' },
{ title: 'Cat', value: 'mycat.gif' }
]);
}
});
image_advtab此选项将在图像对话框中添加一个“高级”选项卡，允许您为图像添加自定义样式、间距和边框。
默认值：false
image_class_list此选项允许您指定要添加到图像的预定义类列表。它采用数组的形式，其中包含用于在链接上设置类的项。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'image',
toolbar: 'image',
image_class_list: [
{ title: 'None', value: '' },
{ title: 'No border', value: 'img_no_border' },
{ title: 'Borders',
menu: [
{ title: 'Green border', value: 'img_green_border' },
{ title: 'Blue border', value: 'img_blue_border' },
{ title: 'Red border', value: 'img_red_border' }
]
}
]
});
image_description此选项允许您禁用图像对话框中的图像描述输入字段。
默认值：true
image_dimensions此选项允许您禁用图像对话框中的图像尺寸输入字段。
默认值：true
image_prepend_url给图片地址增加前缀。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'image',
toolbar: 'image',
image_prepend_url: 'https://www.example.com/images/'
});
image_title此选项允许您在图像对话框中启用图像标题输入字段。
默认值：false
image_uploadtab此选项在图像对话框中添加了一个“上传”选项卡，允许您上传本地图像，同时配置了images_upload_url。
images_upload_url指定上传图片的服务器地址。
images_upload_base_path此选项允许您指定一个basepath作为从配置的images_upload_url页面返回的URL的前缀。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
images_upload_url: 'postAcceptor.php',
images_upload_base_path: '/some/basepath'
});
images_upload_credentials是否跨域上传图片。
默认值：false
images_upload_handler此选项允许您指定一个函数，用于将TinyMCE的默认JavaScript上传处理函数替换为自定义逻辑。
upload handler函数有两个参数：
blobInfoprogress回调函数，取值范围在1到100之间。// 此处为自定义图片上传处理函数
images_upload_handler: (blobInfo: any) => new Promise((resolve, reject) => {
let file = blobInfo.blob()
// 调接口
console.log(file, '==file')
// let url = 'blob:http://127.0.0.1:8000/2c6c7bbe-cb9a-481d-acfe-adc00f2866d5'
// resolve(url)
}),
images_file_types可上传的图片类型。
默认值：'jpeg,jpg,jpe,jfi,jif,jfif,png,gif,bmp,webp'
object_resizing此选项允许您打开/关闭图像、表格或媒体对象上的缩放控制柄。默认情况下启用此选项，并允许您调整表格和图像的大小。
默认值：true
resize_img_proportional当用户在编辑器中调整图像大小时，此选项控制是按比例调整图像大小还是自由调整图像大小。
默认值：true--按比例缩放
typeahead_urls此选项控制是否应启用或禁用预键入url字段功能。也就是输入地址时的自动完成。
默认值：true
importcss插件增加了从content_css配置中指定的CSS文件自动导入CSS类的功能。修改内容区域css样式。
引入的css文件中定义的类只能是：.类名{样式} 或 .类名.类名{样式} 或 标签.类名{样式} 这种形式，不支持其他选择器。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'importcss',
content_css: '/my-styles.css'
});
importcss_append如果设置为true，此选项将把导入的样式附加到格式菜单的末尾，并替换默认格式。
默认值：false
importcss_exclusive如果设置为false，则选择器将不是全局独占的，这意味着它们可以存在于两个单独的组中。这对于您希望将“.class”导入为段落选择器和跨度格式选择器的场景非常有用。
用于指定是否仅导入指定的 CSS 文件。如果设置为 true，则仅导入在 importcss_file_filter 中指定的 CSS 文件。如果设置为 false，则导入所有 CSS 文件。
默认值：true
此示例将仅导入 css/style.css 文件。
tinymce.init({
selector: 'textarea',
plugins: 'importcss',
importcss_exclusive: true,
importcss_file_filter: 'css/style.css'
});
importcss_file_filter用于过滤引入的css文件，支持仅写URL部分字符串、正则或函数返回值。如果content_css引入了好几个css文件，可用此参数动态过滤。
content_css: '/my-styles.css',
// 1 string
importcss_file_filter: '/my-styles.css',
// 2 正则
importcss_file_filter: /\/my-styles/,
// 3 函数
importcss_file_filter: (file) =>
file.indexOf('my-styles') !== -1
})
importcss_groupstinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'importcss',
content_css: '/my-styles.css',
importcss_groups: [
{ title: 'Table styles', filter: /^(td|tr)\./ }, // td.class and tr.class
{ title: 'Block styles', filter: /^(div|p)\./ }, // div.class and p.class
{ title: 'Other styles' } // The rest
]
});
importcss_merge_classes此选项用于应替换或合并class属性的情况。例如，如果您有多个类，则可以将所有类应用于同一个元素。如果此选项设置为false，它将始终替换class属性的内容。
默认值：true
importcss_selector_converter该选项允许你自定义css选择器的导入逻辑，手动编写解析css选择器，并生成格式对象。如果转换器返回false值，则选择器将从导入中忽略。
tinymce.init({
selector: '#tinydemo',
plugins: "importcss code",
toolbar: "styleselect code",
content_css: "/static/mycss.css",
importcss_selector_converter: function(selector) {
if(selector.indexOf('class') !== -1){
return this.convertSelectorToFormat(selector);
}
}
});
importcss_selector_filter类名过滤器，从引入css中的多个类里再次筛选。该过滤器支持字符串、正则或函数返回值。
insertdatetime插件提供了一个工具栏控件和菜单项Insert date/time（在Insert菜单下），允许用户轻松地将当前日期和/或时间插入到光标插入点的可编辑区域中。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'insertdatetime',
toolbar: 'insertdatetime'
});
insertdatetime_dateformat此选项允许您覆盖由mceInsertDate命令插入的日期格式的默认格式设置规则。这默认为%Y-%m-%d，其中不同的%变量被各种日期格式选项替换。
默认值：'%Y-%m-%d'
insertdatetime_formats允许您指定要在日期菜单或日期选择框中使用的日期/时间格式列表。完整的格式列表可在下面的日期格式下找到。
默认值：[ '%H:%M:%S', '%Y-%m-%d', '%I:%M:%S %p', '%D' ]
insertdatetime_timeformat此选项允许您覆盖由mceInsertTime命令插入的时间的默认格式设置规则。这默认为%H:%M:%S，其中不同的%变量被各种日期格式选项替换。
默认值：'%H:%M:%S'
insertdatetime_element启用此选项后，当您插入日期/时间时，将生成HTML5时间元素。
默认值：false
启用此参数插入时间时，会生成例如下方这种代码：
<time datetime="2019-04-02">2019-04-02</time>
| 名称 | 总结 |
|---|---|
| %D | mm/dd/yy（等同于%m%d%y） |
| %r | 12小时时间 hh:mm:ss AM或PM（等同于%I:%M:%S %p） |
| %y | 十进制数字表示的年份，不带世纪（00-99） |
| %Y | 4位年份（如2019） |
| %m | 月份（01-12） |
| %B | 本地化月份名全称（如：January） |
| %b | 本地化月份名缩写（如：Jan） |
| %d | 日期（01-31） |
| %A | 本地化星期名全称（如：Monday） |
| %a | 本地化星期名缩写（如：Mon） |
| %H | 小时（00-23） |
| %I | 小时（01-12） |
| %M | 分钟（00-59） |
| %S | 秒（00-59） |
| %p | AM或PM |
| %% | 用于显示%字符 |
这个插件添加了一个按钮，用于在当前插入符号位置（光标插入点）插入不间断的空格实体 。它还在Nonbreaking space菜单栏下添加了一个菜单项Insert和一个工具栏按钮。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'nonbreaking',
toolbar: 'nonbreaking'
});
nonbreaking_force_tab按tab键插入三个 。
默认值: false
nonbreaking_force_tab 与 table 插件的冲突
因为nonbreaking_force_tab设置了按tab键的行为，而该行为与使用表格在单元格间切换时会有冲突。
TinyMCE给出的建议是：调整两个插件的引入顺序，以决定是使用插3空格的行为，还是使用单元格导航的行为，以先出现的那个为准。
使用插3空格的行为：
plugins: "nonbreaking table",nonbreaking_force_tab: true
使用单元格导航：
plugins: "table nonbreaking",nonbreaking_force_tab: true
nonbreaking_wrap此选项默认开启，行为是在插入不间断空格（nbsp）时在外层包裹<span class="mce-nbsp-wrap"></span>。
其目的是为了防止在不间断空格被其它环境过滤掉。虽然导致源码量增加，但对于某些环境还是值得的，具体看情况选择开启或关闭，关闭后，其会恢复到旧模式，即仅插入nbsp。
默认值：true
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: 'pagebreak',
toolbar: 'pagebreak'
});
pagebreak_separator自定义分页符内容，当使用的系统限制分页符必须为某个字段时非常有用。
针对于HTML源码。
默认值：'<!-- pagebreak -->'
pagebreak_split_block插入时拆分块元素，默认未开启此项，插入的分页符会如普通文本一样内联在内容区内。
例如：<p>一个<!-- pagebreak -->demo</p>
而开启此选项后，插件会将当前分页符所在的块元素拆分成两个。
上例则变为：
<p>一个</p>
<!-- pagebreak -->
<p>demo</p>
默认值：false
！！开启后，插入分页符，必须回车。否则直接在分页符后加的内容不能正常显示。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'preview',
toolbar: 'preview'
});
快速搜索插件添加了三个上下文搜索：
bold、italic和link。这个插件还增加了三个新的工具栏按钮：
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'quickbars'
});
都可以搭配quickbars_insert_toolbar进行使用。
快速链接（quicklink）工具栏按钮允许用户快速插入/编辑内联链接。默认情况下，它包含在“快速选择”上下文工具栏中，并且可以在其他上下文工具栏中使用。
搭配link_context_toolbar使用效果更佳。
“快速图像”（quickimage）工具栏按钮允许用户快速将计算机中的图像插入编辑器。默认情况下，它包含在“快速插入”上下文工具栏中，并且可以在其他工具栏中使用。
“快速表格”（quicktable）工具栏按钮可插入宽度为100%的2x2表格。默认情况下，它包含在“快速插入”上下文工具栏中，并且可以在其他工具栏中使用。
quickbars_selection_toolbar要禁用快速选择工具栏，请将quickbars_selection_toolbar设置为false。
默认值：'bold italic | quicklink h2 h3 blockquote'
quickbars_insert_toolbar要禁用“快速插入”工具栏，请将quickbars_insert_toolbar设置为false。
默认值：'quickimage quicktable'
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'quickbars pagebreak',
quickbars_insert_toolbar: 'quickimage quicktable quicklink | hr pagebreak'
});
quickbars_image_toolbar要禁用快速图像工具栏，请将quickbars_image_toolbar设置为false。
默认值：'alignleft aligncenter alignright'
更多功能见付费插件：imagetools
这个插件为TinyMCE工具栏添加了一个保存按钮，它将提交编辑器所在的表单。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'save',
toolbar: 'save cancel' // cancel为取消保存
});
提醒：如果遇到提示“错误: 表单提交字段冲突.”，则可能在你的表单里有name="submit"的元素存在。解决办法就是将其name值修改一下。
<form><button name="submitbtn"></button></form>
save_enablewhendirty此选项允许您禁用保存按钮，直到对编辑器的内容进行了修改。默认情况下，此选项处于启用状态。
默认值：true
save_oncancelcallback此选项允许您指定调用取消按钮/命令时将执行的函数。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'save',
toolbar: 'save',
save_oncancelcallback: () => {
console.log('Save canceled');
}
});
save_onsavecallback此选项允许您指定调用保存按钮/命令时将执行的功能。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'save',
toolbar: 'save',
save_onsavecallback: () => {
console.log('Saved');
}
});
这个插件为TinyMCE添加了搜索/替换对话框。它还在查找并替换菜单栏下添加了一个工具栏按钮和菜单项Edit。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'searchreplace',
toolbar: 'searchreplace'
});
Table插件为TinyMCE添加了表格管理功能，包括对话框、上下文菜单、上下文菜单、菜单项和工具栏按钮。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'table',
toolbar: 'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
});
实际只需要在toolbar中引入table就会包含所有功能。
table_toolbar指定table专属的快速工具栏中按钮的显示及顺序。该参数是一个以空格分隔的工具栏控件列表。使用“|”作为分隔符。如果要禁用此工具栏，只需将值设置为空字符串即可。
默认值：'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
table_appearance_options此选项允许您禁用用户在插入或编辑表时可用的某些选项。当设置为false时，以下字段将不会出现：单元格间距，单元格填充，边框和标题。
默认值：true
table_grid此选项允许您禁用表格菜单中的网格状表格选取器。网格功能（默认情况下启用）由一个可拖动的矩阵组成，用户可以与之交互，以根据其输入自动创建x行x列的表格。
但是，如果table_grid设置为false，则表格选择器将被一个菜单项替换，该菜单项将打开一个对话框，用户可以使用该对话框插入表格。此对话框允许用户设置各种参数，如列数和行数、宽度、高度、单元格间距和填充、边框宽度、对齐方式以及是否显示标题。如果table_advtab设置为true，则还可以使用高级样式选项。
默认值：true
table_class_list此选项使您能够指定要在“表选项”对话框中显示的类列表。如果希望用户为表元素指定预定义的类，这将非常有用。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'table',
toolbar: 'table',
table_class_list: [
{ title: 'None', value: '' },
{ title: 'No Borders', value: 'table_no_borders' },
{ title: 'Borders',
menu: [
{ title: 'Red borders', value: 'table_red_borders' },
{ title: 'Blue borders', value: 'table_blue_borders' },
{ title: 'Green borders', value: 'table_green_borders' }
]
}
]
});
table_cell_class_list此选项使您能够指定要在“表格单元格选项”对话框中显示的类列表。如果您希望用户将预定义的类分配给表格单元格，这将非常有用。用法同上。
table_row_class_list此选项使您能够指定要在表行选项对话框中显示的类列表。用法同上。
table_border_widths此选项用于指定预定义单元格边框宽度的列表，以便在tablecellborderwidth工具栏按钮或菜单项上快速访问。此选项接受任何有效的CSS数值。
注意，使用前要在引入tablecellborderwidth工具。或者在table_toolbar中加入。
默认值：
[
{ title: '1px', value: '1px' },
{ title: '2px', value: '2px' },
{ title: '3px', value: '3px' },
{ title: '4px', value: '4px' },
{ title: '5px', value: '5px' }
]
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'table',
toolbar: 'table tablecellborderwidth',
table_border_widths: [
{ title: 'small', value: '1px' },
{ title: 'medium', value: '3px' },
{ title: 'large', value: '5px' },
]
});
table_border_styles此选项用于指定预定义单元格边框宽度的列表，以便在tablecellborderstyle工具栏按钮或菜单项上快速访问，以及对话框选项。此选项接受任何有效的CSS边框样式。用法同上。
默认值：
[
{ title: 'Solid', value: 'solid' },
{ title: 'Dotted', value: 'dotted' },
{ title: 'Dashed', value: 'dashed' },
{ title: 'Double', value: 'double' },
{ title: 'Groove', value: 'groove' },
{ title: 'Ridge', value: 'ridge' },
{ title: 'Inset', value: 'inset' },
{ title: 'Outset', value: 'outset' },
{ title: 'None', value: 'none' },
{ title: 'Hidden', value: 'hidden' }
]
table_background_color_map此选项用于指定表格单元格背景颜色选择器的默认值，可以使用tablecellbackgroundcolor工具栏按钮或菜单项打开。如果没有定义值，工具栏按钮和菜单项将使用color_map选项的值或默认值。此选项不会修改表格对话框中的背景颜色选择器。此选项接受Hex、RGB和HSL颜色值。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'table',
toolbar: 'table',
table_background_color_map: [
{ title: 'Red', value: 'FF0000' },
{ title: 'White', value: 'FFFFFF' },
{ title: 'Yellow', value: 'F1C40F' }
]
});
table_border_color_map此选项用于指定表格单元格边框颜色选择器的默认值，可以使用tablecellbordercolor工具栏按钮或菜单项打开。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'table',
toolbar: 'table',
table_border_color_map: [
{ title: 'Red', value: 'FF0000' },
{ title: 'White', value: 'FFFFFF' },
{ title: 'Yellow', value: 'F1C40F' }
]
});
table_advtab此选项可以禁用表格对话框中的高级选项卡。高级选项卡允许用户输入style、border color和background color值。
默认值：true
table_cell_advtab此选项可以禁用表格单元格对话框中的高级选项卡。高级选项卡允许用户输入style、border color和background color值。
默认值：true
table_row_advtab此选项可以禁用表行对话框中的高级选项卡。高级选项卡允许用户输入style、border color和background color值。
默认值：true
table_style_by_css开启后强制表格属性对话框中生成的属性使用css来实现而不是插入属性值。
举个例子，边框线是插入属性border=3来实现，但开启该选项后，将使用style="border-width: 3px;"来实现。
默认值：true
table_merge_content_on_paste此选项设置将一个表粘贴到另一个表时编辑器的行为。
true时，将一个表粘贴到另一个表中将用粘贴的表替换现有表。它将粘贴的表合并到现有表中，并在此过程中替换现有表。false时，将表格粘贴到另一个表格中会在现有表格的选定单元格中创建一个新表格。模板插件已标记为已弃用。它将从即将发布的TinyMCE 7.0版本中完全删除。不考虑使用。
media插件为用户提供了将HTML5视频和音频元素添加到可编辑区域的功能。
它还在Insert/edit video菜单下添加了Insert菜单项，并添加了Insert/edit video工具栏按钮。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
toolbar: 'media'
});
显示块元素范围。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'visualblocks',
toolbar: 'visualblocks'
});
显示不可见字符。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'visualchars',
toolbar: 'visualchars'
});
在统计栏 字词数 这一栏中，每一个中文被认为是一个字，统计+1；每一个单词被认为是一个词，不管其由几个字母组成，统计+1；数字及符号：不统计（有个别例外，如货币符号）。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'wordcount',
toolbar: 'wordcount'
});
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手