本节内容涵盖：
配置 TinyMCE Svelte 集成
apiKey
licenseKey
channel
id
inline
disabled
readonly
scriptsrc
conf
组件绑定
事件绑定
配置 TinyMCE Svelte 集成
tinymce-svelte Editor 组件支持以下属性：
<Editor
apiKey="no-api-key"
channel="8"
id="uuid"
inline=false
disabled=false
readonly=false
scriptSrc=undefined
conf={}
modelEvents="input change undo redo"
value="value"
text="readonly-text-output"
/>apiKey
Tiny Cloud API 密钥。对于使用 Tiny Cloud 部署的 TinyMCE 编辑器，该密钥为必填项。
要注册 Tiny Cloud API 密钥，请访问 Tiny 账户注册页面。要获取现有 Tiny 账户的 Tiny Cloud API 密钥，请登录后访问 Tiny 账户控制台。
类型：String
默认值：'no-api-key'
apiKey 使用示例
<Editor apiKey="no-api-key" />
licenseKey
指定 TinyMCE 许可证密钥。对于 TinyMCE 自托管部署，该密钥为必填项。对于仅使用 Tiny Cloud 的云部署，此属性非必填项，因为您的云订阅已自动包含商业许可证。如需更多信息，请参阅：许可证密钥。
类型：String
默认值：undefined
可能的值：* undefined - 使用 API 密钥从 Tiny Cloud 加载时使用* 'gpl' - 适用于使用 GPL 许可证的开源项目* 'T8LK:…' - 适用于商业版 TinyMCE 安装（版本 8+ 必须使用该前缀）* 'GPL+T8LK:' - 适用于需要高级功能且需保持 GPL 合规性的开源项目。
在混合部署（同时使用云服务和自托管功能）中：
可同时提供 API 密钥和许可证密钥
编辑器将在云服务可用时使用云服务
若无法连接云服务，将自动回退到本地许可证密钥
示例：商业许可证
<Editor licenseKey="T8LK:..." />
示例：结合 GPL 使用 licenseKey
<Editor licenseKey="gpl" />
channel
指定要使用的 Tiny Cloud 通道。有关 Tiny Cloud 部署通道的信息，请参阅：指定从云端部署的 TinyMCE 编辑器版本。
类型：String
默认值：'8'
可能的值：'8'、'8-testing'、'8-dev'、'8.10'
channel 使用示例
<Editor channel="8-dev" />
id
为编辑器指定 ID。用于通过 tinymce.get('ID') 方法获取编辑器实例。
类型：String
默认值：自动生成的 UUID
id 使用示例
<Editor id="my-unique-identifier" />
inline
将编辑器设置为使用内联模式。
类型：Boolean
默认值：false
inline 使用示例
<Editor inline=true />
disabled
将编辑器设置为禁用状态。
类型：Boolean
默认值：false
disabled 使用示例
<Editor disabled=true />
readonly
将编辑器设置为只读模式。
类型：Boolean
默认值：false
readonly 使用示例
<Editor readonly=true />
scriptSrc
当应用程序不使用 Tiny Cloud 时，使用 scriptSrc 属性指定 TinyMCE 的加载路径以实现懒加载。如果应用程序使用自托管版本的 TinyMCE（如 TinyMCE NPM 包或 TinyMCE 的 .zip 包），则此设置为必填项。
类型：String
scriptSrc 使用示例
<Editor scriptSrc="/path/to/tinymce.min.js" />
conf
为 Tinymce.init 方法指定一组属性，用于初始化编辑器。
类型：Object
默认值：{}
conf 使用示例
<script>
let conf = {
toolbar: 'undo redo',
menubar: false
}
</script>
<main>
<Editor
{conf}
/>
</main>组件绑定
输入绑定
编辑器组件允许开发者将编辑器内容绑定到一个变量。通过指定bind:value，开发者可以在所选变量上创建双向绑定。
输入绑定示例
<script>
let value = 'some content';
</script>
<main>
<Editor bind:value={value} />
<div>{@html value}</div>
<textarea bind:value={value}></textarea>
</main>绑定文本输出
编辑器暴露了text属性，开发者可以bind该属性以获取编辑器内容作为文本的只读值。如果text绑定的变量发生变化，则不会向上传播到编辑器。它只会传播来自编辑器的更改。
文本绑定示例
<script>
let text = '';
</script>
<main>
<Editor bind:text={text} />
<div>{text}</div>
</main>事件绑定
函数可以绑定到编辑器事件，例如：
<Editor resizeeditor={handlerFunction} />当处理程序被调用时（本例中为handlerFunction），它将接收两个参数：
eventTinyMCE 事件对象。
editor编辑器的引用。
事件绑定示例
<script>
import Editor from '@tinymce/tinymce-svelte';
function eventHandler(event, editor) {
console.log('Editor event:', event);
console.log('Editor instance:', editor);
}
</script>
<main>
<Editor resizeeditor={this.eventHandler} />
</main>指定小写的事件名称（事件名称区分大小写）。
以下事件可用：
activateaddundobeforeaddundobeforeexeccommandbeforegetcontentbeforerenderuibeforesetcontentbeforepasteblurchangeclearundosclickcommentchangecompositionendcompositionstartcompositionupdatecontextmenucopycutdblclickdeactivatedirtydragdragdropdragenddraggesturedragoverdropexeccommandfocusfocusinfocusoutgetcontenthideinitinputkeydownkeypresskeyuploadcontentmousedownmouseentermouseleavemousemovemouseoutmouseovermouseupnodechangeobjectresizestartobjectresizedobjectselectedpastepostprocesspostrenderpreprocessprogressstateredoremoveresetresizeeditorsavecontentselectionchangesetattribsetcontentshowsubmitundovisualaid