快速开始
本指南将帮助你在 5 分钟内开始使用 Elegant Editor。
选择你的框架
Elegant Editor 支持多种使用方式：
vue
<template>
<RichTextEditor v-model="content" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { RichTextEditor } from '@frame-flex/vue';
import '@frame-flex/vue/styles';
const content = ref({
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{ type: 'text', text: 'Hello World!' }
]
}
]
});
</script>typescript
import { Editor } from '@frame-flex/core';
import '@frame-flex/core/styles';
const editor = new Editor(document.getElementById('editor'), {
content: '<p>Hello World!</p>',
editable: true,
onUpdate: (content) => {
console.log('Content updated:', content);
}
});Vue 3 快速开始
1. 安装依赖
bash
pnpm add @frame-flex/vue @frame-flex/exporters2. 引入组件
vue
<template>
<div class="editor-container">
<RichTextEditor
v-model="content"
:editable="true"
@update="handleUpdate"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { RichTextEditor } from '@frame-flex/vue';
import '@frame-flex/vue/styles';
const content = ref({
type: 'doc',
content: []
});
function handleUpdate(newContent: any) {
console.log('Content updated:', newContent);
}
</script>
<style>
.editor-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
</style>3. 添加导出功能
vue
<template>
<div>
<RichTextEditor v-model="content" />
<div class="actions">
<button @click="exportHTML">导出 HTML</button>
<button @click="exportDOCX">导出 DOCX</button>
<button @click="exportJSON">导出 JSON</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { RichTextEditor, useEditor } from '@frame-flex/vue';
import { downloadHTML, downloadDOCX, downloadJSON } from '@frame-flex/exporters';
import '@frame-flex/vue/styles';
const content = ref({ type: 'doc', content: [] });
const { editor } = useEditor();
function exportHTML() {
if (editor.value) {
downloadHTML(editor.value, 'document.html', {
includeStyles: true,
title: '我的文档'
});
}
}
async function exportDOCX() {
if (editor.value) {
await downloadDOCX(editor.value, 'document.docx');
}
}
function exportJSON() {
if (editor.value) {
downloadJSON(editor.value, 'document.json');
}
}
</script>原生 JavaScript 快速开始
1. 安装依赖
bash
pnpm add @frame-flex/core @frame-flex/exporters2. HTML 结构
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Elegant Editor</title>
</head>
<body>
<div id="app">
<div id="editor"></div>
<div class="actions">
<button id="export-html">导出 HTML</button>
<button id="export-docx">导出 DOCX</button>
<button id="export-json">导出 JSON</button>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>3. JavaScript 代码
typescript
import { Editor } from '@frame-flex/core';
import { downloadHTML, downloadDOCX, downloadJSON } from '@frame-flex/exporters';
import '@frame-flex/core/styles';
// 创建编辑器实例
const editorElement = document.getElementById('editor');
const editor = new Editor(editorElement, {
content: `
<h1>欢迎使用 Elegant Editor</h1>
<p>这是一个功能强大的富文本编辑器。</p>
`,
editable: true,
autofocus: 'end',
onUpdate: (content) => {
console.log('Content updated:', content);
}
});
// 绑定导出按钮
document.getElementById('export-html')?.addEventListener('click', () => {
downloadHTML(editor, 'document.html', {
includeStyles: true,
title: '我的文档'
});
});
document.getElementById('export-docx')?.addEventListener('click', async () => {
await downloadDOCX(editor, 'document.docx');
});
document.getElementById('export-json')?.addEventListener('click', () => {
downloadJSON(editor, 'document.json');
});下一步
现在你已经成功创建了第一个富文本编辑器！接下来可以：