目录
3.Enhanced Image Editing (formerly Image Tools)
内容持续更新中......
这里先贴上官网链接，如果觉得我这边不够详细（https://www.tiny.cloud/docs/tinymce/6/vue-pm/）
前提：vue3项目自己创建一个
一.安装
安装方式：
1.命令：
npm install --save tinymce "@tinymce/tinymce-vue@^5"
2.vue-cli
直接上依赖功能去搜索 tinymce-vue 下载即可
二.使用
在你任一组件的script标签内导入即可，参考下面代码：
<template>
<div class="about">
<h1>This is an about page</h1>
<Editor></Editor>
</div>
</template>
<script setup>
import Editor from '@tinymce/tinymce-vue'
</script>效果如下：
三.基本设置
TinyMCE最常见的四个配置选项是:
但是最关心的应该是编辑器的配置，这是它最基本的属性。
编辑器配置
api-key
微小的云API键。对于使用微型云提供TinyMCE编辑器的部署是必需的。需要你自己注册一个tinymce的账户，注册完后进入个人界面就可以拿到一个免费的API密钥，也就是api-key。
类型: String
默认值: 'no-api-key'
示例:使用api-key
<editor
api-key="your-api-key"
/>如果没有使用密钥的话就会提示，不过无伤大雅
cloud-channel
版本号，使用默认即可
类型: String
默认值: '6'
可能的值: '6', '6-testing', '6-dev', '6.6'
将用于编辑器的TinyMCE版本更改为以下微型云通道之一:
-
6(默认):TinyMCE的当前企业版。 -
6-testing:TinyMCE下一个企业版的当前候选版本。 -
6-dev:TinyMCE的每夜构建版本。 -
版本号，如
6.6:TinyMCE的特定企业发布版本。
示例：
<editor
api-key="your-api-key"
cloud-channel="6-dev"
:init="{ /* your other settings */ }"
/> disabled
这disabled属性可以在“禁用”(只读)模式(true)和标准的可编辑模式(false).
类型: Boolean
默认值: false
可能的值: true, false
示例:使用disabled
<editor
:disabled=true
/>id
编辑的id。用于使用检索编辑器实例tinymce.get('ID')方法。
类型: String
默认值:自动生成UUID
示例:使用id
<editor
id="uuid"
/>init
对象发送到tinymce.init用于初始化编辑器的方法。
有关TinyMCE选择器的信息(tinymce.init)，参见:基本设置.
类型: Object
默认值: '{ }'
示例:使用init
<editor
:init="{
plugins: 'lists link image paste help wordcount',
toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
}"
/>initial-value
编辑器初始化时编辑器的初始内容。
类型: String
默认值: ' '
示例:使用initial-value
<editor
initial-value="Once upon a time..."
/>
inline
用于将编辑器设置为内联模式。使用<editor :inline=true />与设置相同{inline: true}在TinyMCE选择器(tinymce.init).
有关内联模式的信息，请参见:用户界面选项-inline和设置内嵌编辑模式.
类型: Boolean
默认值: false
可能的值: true, false
示例:使用inline
<editor
:inline=true
/> model-events
设置的触发事件虚拟模型事件.
有关可用TinyMCE事件的列表，请参见:可用事件-编辑器事件.
类型: String
默认值: 'change keyup undo redo'.
示例:使用model-events
<editor
model-events="change keydown blur focus paste"
/> output-format
用于指定通过发出的内容的格式input事件。这将影响与数据绑定结合使用的内容格式。
类型: String
默认值: 'html'
可能的值: 'html', 'text'
示例:使用output-format
<editor
output-format="text"
/> plugins
用于包含编辑器的插件。使用<editor plugins="lists code" />与设置相同{plugins: 'lists code'}在TinyMCE选择器(tinymce.init).
有关向TinyMCE添加插件的信息，请参见:向TinyMCE添加插件.
类型: String或者Array
示例:使用plugins
<editor
plugins="lists code"
/>然后就可以在insert（插入）里面使用了，比如：
我再这里面添加了一个 emoticons 插件，它是一个emoji表情插件，通过plugins声明
在你声明了这个插件之后，你就可以把它添加到工具栏里面了，和之前的一样
同时说一个，这个emoji插件里面的表情也是非常的丰富，相比较其他的富文本插件，这个tinymce实现了非常多的内容。
tag-name
仅在以下情况下有效<editor :inline=true />。用于在内联模式下定义编辑器的HTML元素。
类型: String
默认值: 'div'
示例:使用tag-name
<editor
:inline=true
tag-name="my-custom-tag"
/>toolbar
用于设置编辑器的工具栏。使用<editor toolbar="bold italic" />与设置相同{toolbar: 'bold italic'}在TinyMCE选择器(tinymce.init).
此选项允许您指定按钮以及它们出现在TinyMCE工具栏上的顺序。
有关为TinyMCE设置工具栏的信息，请参见:用户界面选项-工具栏.
类型: String
可能的值:看见TinyMCE可用的工具栏按钮.
示例:使用toolbar
<editor
plugins="code"
toolbar="bold italic underline code"
/>直接在属性toolbar内添加以空格分隔的功能名称即可，覆盖默认功能样式
tinymce-script-src
使用tinymce-script-srcprop指定TinyMCE的外部版本进行延迟加载。
类型: String
示例:使用tinymce-script-src
<editor
tinymce-script-src="/path/to/tinymce.min.js"
/> 表单输入绑定:v-model
这v-model指令可用于创建双向数据绑定。例如:
<editor v-model="content" />事件绑定
函数可以绑定到编辑器事件，例如:
<editor @selectionChange="handlerFunction" />对于v3.x支持的旧版本Vue (Vue 2 ),事件绑定的语法为:
<editor v-on:selectionChange="handlerFunction">
或者
<editor @onSelectionChange="handlerFunction">.
当处理程序被调用时(handler函数在本例中)，它是用两个参数调用的:
-
eventTinyMCE事件对象。 -
editor-对编辑的引用。
具体方法会在后面介绍，大家或可以自行查看文档。
四.有趣的插件
1.Emoticons plugin
颜文字插件，在上面讲插件使用的时候，在示例里面说过，它可以使用很多的emoji表里来丰富我们的文本内容。（来源于Twitter在github的表情库）
浏览器表情符号支持
默认情况下，表情插件会插入Unicode字符代码，例如\ud83d\ude03给笑脸表情符号。表情符号的呈现方式取决于用户的web浏览器和操作系统。因此，一些表情符号可能以黑白方式呈现，也可能不呈现。为了确保表情符号在各种浏览器和操作系统中呈现的一致性，Tiny建议使用content_css.
2.insertdatetime
日期和时间插件，提供了一个工具栏控件和菜单项Insert date/time(在Insert菜单)，其允许用户容易地将当前日期和/或时间插入到光标插入点处的可编辑区域中。
它也可以自定义日期格式，详情参考文档就可以了(https://www.tiny.cloud/docs/tinymce/6/insertdatetime/)
3.Accordion plugin
Accordion（手风琴）插件允许在文档中创建可以展开或折叠的部分，以显示或隐藏附加内容。
此功能仅适用于TinyMCE 6.5及更高版本。
4.Full Screen plugin
全面插件，重在实用
5.table plugin
表格插件
6.wordcount plugin
字符数插件
更多有趣的插件还请自行探索https://www.tiny.cloud/docs/tinymce/6/plugins/
五.高级插件
1.Advanced Tables plugin
高级表格插件Advanced Tables plugin | TinyMCE Documentation
要启用高级表格插件，请添加advtable添加到插件列表。
对表格行和列进行排序
可以使用以下方法按行或列值对表进行排序:
-
这分类中的选项table菜单。
-
这分类表格上下文菜单中的选项。
-
这分类中的选项table工具栏菜单按钮。
例如:
| 基于选定的列对行进行排序 | 高级排序对话框 |
|---|---|
|
|
|
该插件能够排序:
-
数据
-
文本数据
| 名字 | 价值 | 要求 | 描述 |
|---|---|---|---|
| 标题 |
| 需要 | 用户界面中显示的系列文本。 |
| 更新 |
| 可选择的 | 默认值: |
| 可调整大小的 |
| 可选择的 | 默认值: |
| 发电机 |
| 需要 | 有关创建值序列生成器的详细信息，请参见:创建价值系列生成器. |
2.Checklist plugin
清单插件，这清单插件允许用户添加复选框列表到他们的内容来创建清单。
创建清单
执行以下步骤创建清单:
-
将光标放在TinyMCE编辑器中所需的位置。
-
单击(清单图标)或清单菜单项上。将在所需位置添加一个复选框。
-
输入第一项，然后按键
Enter在列表中添加另一个项目。 -
要通过添加复选标记来检查项目，请单击列表中所需项目旁边的复选框。
结果
将创建一份清单。如果选择了某些项目，旁边的复选框中将出现一个复选标记。
为了使清单看起来正确，请确保在您的页面上包含此css:
.tox-checklist > li:not(.tox-checklist--hidden) {
list-style: none;
margin: 0.25em 0;
position: relative;
}
.tox-checklist > li:not(.tox-checklist--hidden)::before {
content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
cursor: pointer;
height: 1em;
margin-left: -1.5em;
margin-top: 0.125em;
position: absolute;
width: 1em;
}
.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
}3.Enhanced Image Editing (formerly Image Tools)
增强的图像编辑(以前称为图像工具)
可以对图片进行一定操作
4.Export plugin
导出插件提供了对的所有订阅微小的云，包括自动配置的图像代理。要将导出插件添加到编辑器中，添加export到plugins编辑器配置中的选项。
使用微型云的基本设置
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'export',
toolbar: 'export'
});5.Format Painter（格式刷）
格式刷插件允许用户将格式从一个位置复制并粘贴到另一个位置，例如字体样式和大小。格式刷能够处理多种格式，如内嵌和块格式，以及表格样式等样式。
格式刷在应用后保留格式，从而可以通过使用Ctrl+Alt+V键盘快捷键。
基本设置
要将格式刷插件添加到编辑器中，请添加formatpainter到plugins编辑器配置中的选项。
例如:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'formatpainter',
toolbar: 'formatpainter'
});使用格式刷
使用键盘快捷键或工具栏按钮可以访问格式刷。
格式刷以两种模式运行，一种用于检索，另一种用于应用格式。键盘的用法与工具栏按钮的用法略有不同。
工具栏按钮的用法
-
将光标定位在源内容上以检索格式。
-
启用格式刷按钮复制格式。这格式刷工具栏按钮背景颜色更改为灰色
-
选择要应用格式的目标内容。
结果:将源内容的格式应用于目标内容。
使用键盘
-
将光标定位在源内容上以检索格式。
-
按下
Ctrl+Alt+C读取格式的键。 -
选择要应用格式的目标内容。
-
按下
Ctrl+Alt+V应用格式的键。
1610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
