vue3.0 引入Ueditor（百度编辑器）

最新推荐文章于 2024-07-25 08:00:00 发布

像小强一样坚强！

最新推荐文章于 2024-07-25 08:00:00 发布

阅读量4.2k

点赞数 3

分类专栏：工具类文章标签：编辑器 vue

本文链接：https://blog.csdn.net/qq_20820295/article/details/122127249

版权

工具类专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原本的集团里的老系统要重构，打算使用vue3.0开发（内心慌的一批），因为是一个涉及七八百个页面的业务系统，担心会翻车。先剥离里面的功能单独调研开发。以后有其他功能迭代也会陆续更新。

Ueditor的功能比较强大，老系统里也是用了这个编辑器，还有考虑到用户使用习惯，保持继续使用。

1、下载百度编辑器

百度编辑器地址：https://github.com/fex-team/ueditor

把上述地址的包下载到本地之后，在终端执行grunt default 之后，会生成一个dist包，包含以下文件。

2、引入编辑器到vue3.0的项目中

把dist下的内容丢到vue-cli3.0创建的public目录下，我是又在该目录下建了lib/editor,

editor.vue 下的代码

<!--
 * @Autor: zhyp
 * @Date: 2021-12-24 10:13:26
 * @LastEditTime: 2021-12-24 14:17:58
 * @LastEditors: zhyp
 * @Description: 
 * @FilePath: /media_cloud/src/components/ueditor.vue
-->
<template>
    <div class="editor-container">
        <button @click="getContent">获取编辑器内容</button>
        <div ref="editorContainer" class="editor"></div>
    </div>
</template>
<script>
import { ref, onMounted }  from 'vue'
import { loadJsResource } from '@/service/util'
export default {
    setup() {
        const editorContainer = ref(null);
        let editorInstance = null;
        onMounted(()=>{
            if(!window.UE) {
                const scripts = ['lib/ueditor/ueditor.config.js','lib/ueditor/ueditor.all.js'];
                loadJsResource(scripts, process.env.BASE_URL).then(()=>{
                    if(window.UE) {
                        editorInstance = window.UE.getEditor(editorContainer.value);
                    }
                })
            } else {
                if(!editorInstance) {
                    editorInstance = window.UE.getEditor(editorContainer.value);
                }
            }
            
        })
        const getContent = () => {
            console.log(editorInstance.getContent())
        }
        return {
            editorContainer,
            getContent
        }
    }
}
</script>
<style scoped>
.editor {
    width: 100%;
    height: 600px;
}
</style>

util.js下的代码

export function loadJsResource(arr=[], baseUrl=''){
    return new Promise((resolve) => {
        let index = 0;
        arr.map(path=>{
            let $script = document.createElement('script');
            $script.src = baseUrl + path;
            document.body.appendChild($script);
            $script.onload = ()=>{
                if(index == (arr.length-1)) {
                    resolve();
                }
                index++;
            }
        })
    })
}

暂时更新到这边，之后可能还会添加拖拽添加素材、图说、图片视频编辑等功能，任重道远。。。