# vue3-tinymce **Repository Path**: wupeng0725/vue3-tinymce ## Basic Information - **Project Name**: vue3-tinymce - **Description**: tinymce@6.x在Vue3中的使用【详细】 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 11 - **Forks**: 4 - **Created**: 2023-12-11 - **Last Updated**: 2025-04-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README [TOC] # Vue 3 + TypeScript + Vite 协议：**MIT** ## 介绍世界排名第一的开源富文本编辑器。 TinyMCE的优势： - 开源可商用 - 插件丰富，自带插件基本涵盖日常所需功能 - 接口丰富，可扩展性强，有能力可以无限拓展功能 - 界面好看，符合现代审美 - 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”） - 对标准支持优秀（自v5开始） - 多语言支持，官网可下载几十种语言。 ## tinymce@6.x在Vue3中的使用 * 安装 ```bash npm i tinymce npm i @tinymce/tinymce-vue ``` * #### 从node_modules/tinymce复制样式到public目录下 * 先在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](https://www.tiny.cloud/get-tiny/language-packages/) 下载完成后，解压。解压完成后，将解压后 **zh-Hans.js** 复制到 **public/tinymce/langs** 文件夹下 > 如果zh-Hans.js中没有你要的中文，可以在zh-Hans.js中根据对应的英文加入对应中文的unicode编码或者直接用中文也行。 > > ```js > "Insert accordion":"插入手风琴","Toggle accordion":"切换手风琴","Delete accordion":"删除手风琴" > ``` demo示例： ```vue ``` > 上面的demo是功能齐全的，实际使用时，根据你需要的进行动态删减。 ## 说明 `plugins`为插件配置，将需要在编辑器中使用的插件加入其中即可。 `toolbar`为工具栏配置，将需要在工具栏显示插件加入其中即可，**前提**是已经引入并在`plugins`中加入了插件。 ## 插件 ### 开源插件 #### 1. Accordion(手风琴/可折叠) > 此功能仅适用于TinyMCE 6.5及更高版本。 Accordion插件允许在文档中创建节(`sessions`)，这些节可以展开或折叠以显示或隐藏其他内容。 **就是实现HTML5中的`details`标签功能——详细信息展现标签。** ![image-20231216175411144](src/assets/README/image-20231216175411144.png) For example: ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'accordion', toolbar: 'accordion', }); ``` ##### 基础设置要将Accordion插件添加到编辑器，请将accordion添加到编辑器配置中的`plugins`选项。要将Accordion工具栏图标添加到TinyMCE工具栏，请将accordion添加到编辑器配置中的`toolbar`选项。 ##### 选项（Options）以下配置选项会影响Accordion插件的行为。 * details_initial_state 此选项用于设置`Accordion sections` 的状态有三个可能值：`inherited`, `collapsed`, `expanded` * 当设置为`collapsed`时，所有Accordion将在创建和编辑器加载时显示为**关闭**。 * 当设置为`expanded`时，所有Accordion将在创建和编辑器加载时显示为**打开**。 * 【默认】当设置为`inherited`时，此选项的默认值是继承的。也就是初始是什么状态显示的就是什么状态。 > 我们知道`details`标签可以通过`open`属性来控制默认展开和收起状态。下面两个details，第一个是open，第二个是默认关闭。这就是默认状态。 ```js const content = (`

How does it present to an end-user?

By default, when the accordion plugin is loaded, the command is available in the TinyMCE menu at Insert → Accordion.

11?

222

`) ``` Example：设置所有的`Accordion sections` 为关闭状态。 ```js tinymce.init({ selector: 'textarea', // change this value according to your html plugins: accordion, details_initial_state: 'collapsed' // 关闭 }); ``` Example：在新建文档中的预配置的关于`

`的内容设置为打开。 > 使用`newdocument`新建文档。 ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML toolbar: 'newdocument', newdocument_content: '

Accordion summary...

Accordion body...

', details_initial_state: 'expanded', }); ``` * details_serialized_state 此选项设置保存TinyMCE实例中的内容时`Accordion sections`的状态。有三个可能值：`inherited`, `collapsed`, `expanded` * 当设置为`collapsed`时，所有Accordion都设置为在内容保存时关闭。 * 当设置为`expanded`时，所有Accordion都设置为在内容保存时打开。 * 【默认】当设置为`inherited`时，Accordion在内容保存时保留其各自的状态。 Example：**预览**时设置`

`的状态为关闭。初始状态设置为打开。 > 使用`preview`进行预览。 ```js 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: '

Accordion summary...

Accordion body...

', 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* ```js 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`的。 #### 2. Lists(列表) `列表`插件允许您添加编号和项目符号列表到TinyMCE。要启用高级列表（例如字母编号列表，方形项目符号），您还应该启用 `advlist`插件。该插件还规范了浏览器之间的列表行为。如果你在列表的一致性方面有问题，就启用它。 ##### 基础设置 ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'lists', toolbar: 'numlist bullist' }); ``` ##### 将`listprops`菜单项添加到Tools菜单的示例 `listprops`菜单项打开列表属性对话框。此对话框仅适用于编号列表(可以改变序号的类型)。除非所选内容或插入点位于编号列表中，否则菜单项处于非活动状态。 > 只对有序列表生效。上述标识符可以被以下情况使用：（具体菜单、右键、自定义按钮如何配置见配置说明文档） - [`menu`](https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#menu) 菜单配置 - [`contextmenu`](https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#contextmenu) 右键配置 - [自定义菜单按钮配置 ](https://www.tiny.cloud/docs/tinymce/6/custom-menu-toolbar-button/) Example：`menu`菜单配置 ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'lists', toolbar: 'bullist numlist', menu: { tools: { title: 'Tools', items: 'listprops' }}, }); ``` ##### 选项（Options） * lists_indent_on_tab 是否按tab键生成新的子列表。默认值是 `true`。设置 `false` 后再按tab键就是恢复浏览器的tab切换。 Example：使用 `lists_indent_on_tab` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'lists', toolbar: 'numlist bullist', lists_indent_on_tab: false // 此时按tab键就不会进行进入新的子列表 }); ``` ##### 工具栏按钮 | 工具栏按钮标识符 | 描述 | | ---------------- | -------- | | bullist | 无序列表 | | numlist | 有序列表 | 上述标识符可以被以下三种情况使用： 1. `toolbar`工具栏配置 2. `quickbars_insert_toolbar`快速插入工具栏配置，**新的行插入会提示** 3. `quickbars_selection_toolbar`快速选择工具栏配置，**选中文字会提示** 4. [自定义上下文配置](https://www.tiny.cloud/docs/tinymce/6/contexttoolbar/)【见下面例子】 Example: 2和3。需引入插件`quickbars` ```js 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`，会有冲突**。 ```js 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 ```js 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及更高版本。列表项目符号和列表编号现在可以采用内联格式。 #### 3. Advanced List(高级列表) `advlist`插件通过向控件添加CSS `list-style-type`，可以修改`toolbar`上无序列表和有序列表显示的序号类型。 ##### 基础设置 ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'lists advlist' }); ``` > !!必须激活`lists`插件才能使`advlist`插件工作。 ##### 选项（Options） * advlist_bullet_styles 控制工具栏的`bullist`（无序列表）的序号类型。默认值：`'default,circle,square'` 可选值： - `default`: 默认类型—实心圆 - `circle`: 空心圆 - `disc`: 实心圆 - `square`: 实心方块 Example： ```js 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, … z - `lower-greek`: 小写希腊字母, e.g. α, β, γ … - `lower-roman`: 小写罗马数字, e.g. i, ii, iii, iv, v … - `upper-alpha`: 大写英文字母, e.g. A, B, C, … Z - `upper-roman`: 大写罗马数字, e.g. I, II, III, IV, V … Example： ```js 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](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Values). *Examples* ```js 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及更高版本。列表项目符号和列表编号现在可以采用内联格式。 #### 4. Anchor(锚点) 此插件向工具栏添加一个锚/书签按钮，该按钮在编辑器的光标插入点插入一个锚。它还可以在`Insert`菜单(`quickbars_insert_toolbar`)下添加菜单项锚。当用户单击锚按钮或菜单项时，将通过对话框提示用户输入字符串。该字符串将作为锚id插入到HTML中光标所在的位置。例如，用户将光标放在“Hello World”的开头，单击锚按钮并在对话框中输入“start”。结果HTML将采用`

Hello，World！

This is a custom tab

', } ] }, { 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: '

This is another custom tab

', } ]} ); }); // 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: '

This is yet another custom tab

', } ] }); } }); } }); ``` #### 16. Image(图片) ##### 基础设置 ```js 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可用于执行客户端和服务器端攻击。 ##### 选项（Options） * `a11y_advanced_options` a11y是可访问性的缩写，一般面向残障人士。开启后，会在对话框中添加role="presentation"，该声明用于告诉浏览器这个图片仅作为装饰，无实际意义。 * ### `file_picker_callback` 用来添加自定义文件选择器。 > 缺点：不可以拖拽图片上传。拖拽图片上传请使用`images_upload_handler` ```js 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'` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML file_picker_types: 'image' }); ``` * ### `image_caption` 此选项允许用户为图像启用字幕。启用此选项后，图像对话框将有一个名为“标题”的额外复选框。当用户选中复选框时，图像将被包装在HTML5 `figure`元素中，其中包含`figcaption`。然后用户可以在编辑器中输入标题内容。类型：boolean 默认值：false 下面是当用户选择标题复选框时创建的HTML示例。 ```html

``` 请注意，`figure`元素需要添加一些自定义CSS才能正确呈现。以下是TinyMCE内部`content.css`中使用的内容，可以用您自己的自定义[`content_css`](https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_css)样式表覆盖。 ```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`。 ```js 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' } ] } ] }); ``` 自定义函数的示例: ```js 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` 此选项允许您指定要添加到图像的预定义类列表。它采用数组的形式，其中包含用于在链接上设置类的项。 ```js 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` 给图片地址增加前缀。 ```js 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`](https://www.tiny.cloud/docs/tinymce/latest/file-image-upload/#images_upload_url)。 * ### `images_upload_url` 指定上传图片的服务器地址。 * ### `images_upload_base_path` 此选项允许您指定一个`basepath`作为从配置的[`images_upload_url`](https://www.tiny.cloud/docs/tinymce/latest/file-image-upload/#images_upload_url)页面返回的URL的前缀。 ```js 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函数有两个参数： * `blobInfo` * 一个`progress`回调函数，取值范围在1到100之间。 ```js // 此处为自定义图片上传处理函数 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 #### 17. Import CSS(导入CSS) `importcss`插件增加了从[`content_css`](https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_css)配置中指定的CSS文件自动导入CSS类的功能。修改内容区域css样式。 > 引入的css文件中定义的类只能是：**.类名{样式}** 或 **.类名.类名{样式}** 或 **标签.类名{样式}** 这种形式，不支持其他选择器。 ##### 基础设置 ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'importcss', content_css: '/my-styles.css' }); ``` ##### 选项（Options） * ### `importcss_append` 如果设置为`true`，此选项将把导入的样式附加到`格式`菜单的末尾，并替换默认格式。默认值：false * ### `importcss_exclusive` 如果设置为`false`，则选择器将不是全局独占的，这意味着它们可以存在于两个单独的组中。这对于您希望将“.class”导入为段落选择器和跨度格式选择器的场景非常有用。 > 用于指定是否仅导入指定的 CSS 文件。如果设置为 true，则仅导入在 importcss_file_filter 中指定的 CSS 文件。如果设置为 false，则导入所有 CSS 文件。默认值：true 此示例将仅导入 css/style.css 文件。 ```js tinymce.init({ selector: 'textarea', plugins: 'importcss', importcss_exclusive: true, importcss_file_filter: 'css/style.css' }); ``` * ### `importcss_file_filter` 用于过滤引入的css文件，支持仅写URL部分字符串、正则或函数返回值。如果content_css引入了好几个css文件，可用此参数动态过滤。 ```js 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_groups` ```js tinymce.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`值，则选择器将从导入中忽略。 ```js 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中的多个类里再次筛选。该过滤器支持字符串、正则或函数返回值。 #### 18. Insert Date/Time(插入日期/时间) `insertdatetime`插件提供了一个工具栏控件和菜单项`Insert date/time`（在`Insert`菜单下），允许用户轻松地将当前日期和/或时间插入到光标插入点的可编辑区域中。 ##### 基础设置 ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'insertdatetime', toolbar: 'insertdatetime' }); ``` ##### 选项（Options） * ### `insertdatetime_dateformat` 此选项允许您覆盖由`mceInsertDate`命令插入的日期格式的默认格式设置规则。这默认为`%Y-%m-%d`，其中不同的`%`变量被各种[日期格式选项](https://www.tiny.cloud/docs/tinymce/latest/insertdatetime/#referencedatetimeformats)替换。默认值：`'%Y-%m-%d'` * ### `insertdatetime_formats` 允许您指定要在日期菜单或日期选择框中使用的日期/时间格式列表。完整的格式列表可在下面[的日期格式](https://www.tiny.cloud/docs/tinymce/latest/insertdatetime/#referencedatetimeformats)下找到。默认值：`[ '%H:%M:%S', '%Y-%m-%d', '%I:%M:%S %p', '%D' ]` * ### `insertdatetime_timeformat` 此选项允许您覆盖由`mceInsertTime`命令插入的时间的默认格式设置规则。这默认为`%H:%M:%S`，其中不同的`%`变量被各种[日期格式选项](https://www.tiny.cloud/docs/tinymce/latest/insertdatetime/#referencedatetimeformats)替换。默认值：`'%H:%M:%S'` * ### `insertdatetime_element` 启用此选项后，当您插入日期/时间时，将生成HTML5时间元素。默认值：false 启用此参数插入时间时，会生成例如下方这种代码： ```html 2019-04-02 ``` ##### 参考日期/时间格式 | 名称 | 总结 | | ---- | ----------------------------------------------- | | %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 | | %% | 用于显示%字符 | #### 19. Nonbreaking Space(不间断空格) 这个插件添加了一个按钮，用于在当前插入符号位置（光标插入点）插入不间断的空格实体` `。它还在`Nonbreaking space`菜单栏下添加了一个菜单项`Insert`和一个工具栏按钮。 ##### 基础设置 ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'nonbreaking', toolbar: 'nonbreaking' }); ``` ##### 选项（Options） * ### `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）时在外层包裹``。其目的是为了防止在不间断空格被其它环境过滤掉。虽然导致源码量增加，但对于某些环境还是值得的，具体看情况选择开启或关闭，关闭后，其会恢复到旧模式，即仅插入nbsp。默认值：true #### 20. Page Break(分页符) ##### 基础设置 ```js tinymce.init({ selector: 'textarea', // change this value according to your html plugins: 'pagebreak', toolbar: 'pagebreak' }); ``` ##### 选项（Options） * ### `pagebreak_separator` 自定义分页符内容，当使用的系统限制分页符必须为某个字段时非常有用。 > 针对于HTML源码。默认值：`''` * ### `pagebreak_split_block` 插入时拆分块元素，默认未开启此项，插入的分页符会如普通文本一样内联在内容区内。例如：`

一个demo

` 而开启此选项后，插件会将当前分页符所在的块元素拆分成两个。上例则变为： ```html

一个

demo