快速开始
Umo-Editor 是一个基于 Vue3 的文档编辑器。 您可以访问 https://demo.umodoc.com/editor，体验和测试 Umo-Editor 的部分功能。
安装
使用 NPM 安装
npm config set "@tiptap-pro:registry" https://registry.tiptap.dev/
npm config set "//registry.tiptap.dev/:_authToken" 9fsQEgp8C8pbxpk8PFAjYn64BtBDq6HfXmI2qgpnI7XYr/OwHaMvOUIE5mfVR49y
npm install --save @umoteam/editor @umoteam/editor-externalUmo Editor 提供 ES 和 UMD 两种格式的文件，可按需使用，通常情况下，在工程化的项目中使用 ES 版本，在浏览器中使用 UMD 版本。
通过 浏览器引入 安装
<script src="https://unpkg.com/vue"></script>
<!-- 按需引入所需依赖 -->
<script src="https://unpkg.com/@umoteam/editor-external@latest/libs/mermaid.min.js"></script>
<script src="https://unpkg.com/@umoteam/editor-external@latest/libs/katex/katex.min.js"></script>
<script src="https://unpkg.com/@umoteam/editor-external@latest/libs/plyr.min.js"></script>
<script src="https://unpkg.com/@umoteam/editor-external@latest/libs/qrcode-svg.min.js"></script>
<script src="https://unpkg.com/@umoteam/editor-external@latest/libs/jsbarcode.all.min.js"></script>
<!-- 引入 Umo Editor -->
<script src="https://unpkg.com/@umoteam/editor/dist/umd/umo-editor.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@umoteam/editor/dist/umd/style.css" />
...
<script>
const app = Vue.createApp();
app.use(UmoEditor.useUmoEditor, {
// 配置项
// ...
});
app.mount('#app');
</script>以上文件路径可以使用 CDN 配置为本地资源，详见 CDN 配置 - 使用本地资源。
使用
以下使用方式任选一种即可：
全局安装
main.js
import { createApp } from 'vue';
import { useUmoEditor } from '@umoteam/editor';
const app = createApp(App);
app.use(useUmoEditor, {
// 配置项
// ...
});
app.mount('#app');直接引入
以下组合式 API 和选项式 API 的 JS 示例任选一种使用。
component.vue
<template>
<umo-editor v-bind="options" />
<!-- 或者 -->
<!--
<umo-editor
:editor-key="options.editorKey"
...
/> -->
</template>
// 使用组合式 API
<script setup>
import { ref } from 'vue'
import { UmoEditor } from '@umoteam/editor';
const options = ref({
// 配置项
// ...
});
</script>
// 或使用选项式 API
<script>
import { UmoEditor } from '@umoteam/editor';
export default {
components: {
UmoEditor
},
data() {
return {
options: {
// 配置项
// ...
}
}
}
}
</script>在 Nuxt3 中使用
Umo Editor 暂不支持 SSR，在 Nuxt3 中 SSR 模式下，可以使用 <client-only> 组件来保证 Umo Editor 在客户端渲染和使用。
component.vue
<template>
<client-only>
<umo-editor v-bind="options" />
</client-only>
</template>
<script setup>
import { UmoEditor } from '@umoteam/editor';
const options = ref({
// 配置项
// ...
});
</script>配置
见 配置项 章节。