内容初始化
初始化 HTML 内容
通过设置 editor.root.innerHTML，可以初始化 HTML 内容。
vue
<script setup lang="ts">
import type FluentEditor from '@opentiny/fluent-editor'
import { onMounted } from 'vue'
let editor: FluentEditor
onMounted(() => {
// ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
import('@opentiny/fluent-editor').then((module) => {
const FluentEditor = module.default
editor = new FluentEditor('#editor-set-content-html', {
theme: 'snow',
})
const html = '<p>Hello <strong>TinyEditor</strong>!</p>'
editor.root.innerHTML = html
})
})
</script>
<template>
<div id="editor-set-content-html" />
</template>隐藏源代码
初始化 Delta 内容
配置调用 editor.setContents() 方法，可以初始化 Delta 内容。
vue
<script setup lang="ts">
import type FluentEditor from '@opentiny/fluent-editor'
import { onMounted } from 'vue'
let editor: FluentEditor
onMounted(() => {
// ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
import('@opentiny/fluent-editor').then((module) => {
const FluentEditor = module.default
editor = new FluentEditor('#editor-set-content-delta', {
theme: 'snow',
})
const ops = [{ insert: 'Hello ' }, { attributes: { bold: true }, insert: 'TinyEditor' }, { insert: '!\n' }]
editor.setContents(ops)
})
})
</script>
<template>
<div id="editor-set-content-delta" />
</template>隐藏源代码