原本的集团里的老系统要重构,打算使用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++;
}
})
})
}
暂时更新到这边,之后可能还会添加拖拽添加素材、图说、图片视频编辑等功能,任重道远。。。