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

原本的集团里的老系统要重构，打算使用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++;}})})
}

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

vue3.0 引入Ueditor（百度编辑器）相关推荐

ueditor百度编辑器destoon的word图片转存功能
destoon6.0或destoon7.0整合ueditor百度编辑器后,需要把word中的图片直接复制到编辑器,然后点击转存按钮,即可批量保存上传,如下图新版的百度编辑器可能要修改ueditor. ...
Vue使用UEditor百度编辑器，上传图片服务配置问题，查看版本
文章目录 Vue使用UEditor百度编辑器,上传图片服务配置问题,查看版本 1.前言 2.环境配置 3.查看版本 4.配置demo 4-1.制作demo模块 4-2.配置后端服务 4-3.重启Tom ...
ueditor百度编辑器常见报错的解决方法
如果是第一次使用ueditor百度编辑器,或者对它不熟悉的情况下使用,会出现一些常见问题和报错.怎么使用建议参考ueditor官网,这里只谈一些常见错误. 问题:'UE' is not defind ...
百度在线编辑器显示html,UEditor百度编辑器中JS/html代码（script标签）被过滤的解决办法...
作为一名程序员,在文章中经常会插入各种代码,大部分代码都不会发生问题,但div和script标签是经常会被使用到的. 而在之前的文章编写过程中,插入JS代码后,第一次文章会显示正常,而之后在后台编辑器 ...
vue3.0引入ant-design-vue报错 export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘
vue3.0引入ant-design-vue报错 export 'default' (imported as 'Vue') was not found in 'vue' 报错如下解决办法根目录命令 ...
Vue3.0引入Jquery
Vue3.0引入Jquery 停掉vue服务 1.找到main.js加上一句话:import $ from 'jquery' 2. 输入下载指令:jquery npm install jquery - ...
Ueditor百度编辑器中的 setContent()方法的使用
百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容函数说明:setContent(string,boolean); 参数string ...
ueditor百度编辑器工具栏乱码
项目中使用的是百度编辑器1.4.3:我是从另外一个在使用的项目中复制过来的,但就很神奇的出现了工具栏乱码,百度了很多方法也没解决,后面终于解决了首先,需要检查一下开发工具的编码格式,还有就是调用u ...
ueditor抓取远程图片php版,Ueditor百度编辑器远程抓取图片的开启与关闭
前言这几天一直被百度编辑器自动抓取远程图片的功能困扰.因为这个功能吧,总是时灵时不灵的.有时候会抓取远程图片,有时候又不会抓取远程图片.相信各位都有遇到过.本人对编辑器没有太多的了解,下面如果有讲错 ...

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

1、下载百度编辑器

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

vue3.0 引入Ueditor（百度编辑器）相关推荐

最新文章

热门文章