vue3 使用 UEditorPlus

最新推荐文章于 2024-07-19 18:41:59 发布

魔众

最新推荐文章于 2024-07-19 18:41:59 发布

阅读量175

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_26450889/article/details/139651767

版权

① 安装插件支持

npm i --save vue-ueditor-wrap@3.x
# 或
yarn add --save vue-ueditor-wrap@3.x

② 解压 UEditorPlus 到静态资源目录

复制 dist-min 到项目 public/static/UEditorPlus/ 目录

③ 引入组件并使用

main.js

import {createApp} from 'vue'
import App from './App.vue'
import VueUeditorWrap from 'vue-ueditor-wrap';

createApp(App).use(VueUeditorWrap).mount('#app')

App.vue


<template>
    <div>
        <vue-ueditor-wrap v-model="content"
                          editor-id="editor"
                          :config="editorConfig"
                          :editorDependencies="['ueditor.config.js','ueditor.all.js']"
                          style="height:500px;"/>
    </div>
</template>

<script setup>
    import {ref} from 'vue';

    const content = ref('<p>Hello UEditorPlus</p>');
    const editorConfig = {
        // 后端服务地址，后端处理参考
        // https://open-doc.modstart.com/ueditor-plus/backend.html
        serverUrl: '/api/path/to/server',
        UEDITOR_HOME_URL: '/static/UEditorPlus/',
        UEDITOR_CORS_URL: '/static/UEditorPlus/',
    }
</script>