使用百度UEditor

百度UEditor展示

如上图所示，是一个百度UEditor富文本编辑器。这里就讲解一下：如何使用百度UEditor，添加toolbar以及如何实现上传本地图片，和将外部黏贴进来的图片进行地址替换。

使用百度UEditor前遇到的问题

大家知道，富文本编辑器有很多种。我一个星期前用了Vue2Editor发现，这个的封装存在很多问题。它是使用了quill的这个库，但是呢，利用的还是有很多问题。比如：toolbar无法进行自定义，外部复制来东西会格式化样式。

使用百度UEditor

(1) 引入+ 组建内注册：

import VueUeditorWrap from "vue-ueditor-wrap";
export default {components: {VueUeditorWrap,   },data(){return{data.pageContent = "";editorInstance: null,editorConfig: {// 如果需要上传功能,找后端小伙伴要服务器接口地址serverUrl: "/book/update/upload",// 你的UEditor资源存放的路径,相对于打包后的index.html(路由使用history模式注意使用绝对路径或者填写正确的相对路径)UEDITOR_HOME_URL: "/static/UEditor/",// 编辑器不自动被内容撑高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 600,// 初始容器宽度initialFrameWidth: "100%",// 关闭自动保存enableAutoSave: false}}}
}

(2) 在view中进行展示：

 <vue-ueditor-wrapref="ueditor"v-model="data.pageContent":config="editorConfig":destroy="true":init="initUeditor"@ready="ueditorReady" />

(3) methods:里面的方法（批量上传外部图片）

    ueditorReady(editorInstance) {this.editorInstance = editorInstance;},initUeditor() {// 注册富文本框按钮(这里讲解：第一张图中最后两个图片按钮：单张上传和批量上传的操作)const _this = this;window.UE.registerUI("上传外部图片", (editor, uiName) => {       /*----------上传外部图片按钮-----------*/// 注册按钮执行时的command命令，使用命令默认就会带有回退操作editor.registerCommand(uiName, {execCommand() {const doc = new DOMParser().parseFromString(_this.editorInstance.getContent(),"text/html");const imgs = doc.querySelectorAll("img");if (!imgs.length) return;editor.setDisabled();_this.uploadImg(imgs, doc, editor);}});// 创建一个buttonconst btn = new window.UE.ui.Button({// 按钮的名字name: uiName,// 提示title: uiName,// 需要添加的额外样式，指定icon图标，这里默认使用一个重复的iconcssRules: "background-position: -726px -76px;",// 点击时执行的命令onclick() {// 这里可以不用执行命令,做你自己的操作也可editor.execCommand(uiName);}});return btn;});window.UE.registerUI(                  /*----------上传内部图片按钮-----------*/"上传图片",(editor, uiName) => {editor.registerCommand(uiName, {execCommand() {_this.$refs.fileInputHidden.click();}});const btn = new window.UE.ui.Button({name: uiName,title: uiName,cssRules: "background-position: -380px 0px;",onclick() {editor.execCommand(uiName);}});return btn;},44);},// 获取图片地址uploadImg(imgs, doc, editor) {if (imgs) {if (imgs.length === 0) {this.$message({type: "warning",message: "请先放置图片！"});}this.uploadSingle(imgs, 0, doc, editor);}},// 批量上传外部图片uploadSingle(imgs, i, doc, editor) {if (imgs.length === i) {this.enableEditor(doc, editor);return;}const img = imgs[i];if (img.src.indexOf("你不想转换的图片地址片段") >= 0) {  this.uploadSingle(imgs, (i += 1), doc, editor);return;}DataResearch.getImageDataUrl({ url: img.src })   //  调用更改图片地址接口（你们公司的更改图片地址接口）.then(res => {this.imageChange(res, resolve => {    // 获得更改后的图片地址img.setAttribute("src", resolve);this.uploadSingle(imgs, (i += 1), doc, editor);   // 进行递归的上传图片});},resolve => {throw resolve;}).then(() => {this.$message({type: "success",message: "图片上传成功！"});});},// 将传外部图片地址修改为你们公司的地址imageChange(file, getdata) {const uploadData = getFormData({file,a_id: this.admin.admin_id,a_token: this.admin.app_token,prefix: "shop-manage/product",overwrite: 2});const imageTypes = ["image/jpeg", "image/png", "image/gif"];const validType = imageTypes.some(type => type === String(file.type).toLowerCase());const isLt5M = file.size / 1024 / 1024 < 5;if (!validType) {this.$message.error("上传图片格式错误!");return false;}if (!isLt5M) {this.$message.error("上传图片大小不能超过 5MB!");return false;}axios({method: "post",url: `${this.config.fs_url}/upload`,  // 你们公司的修改图片地址接口data: uploadData}).then(res => getdata(res.data.data.url)).catch(() => {this.$message.error("图片上传失败，请稍后重试");});},

(4) methods:里面的方法（单张上传内部图片）

原理：

写一个input输入框并将其type设置为文件类型，将其隐藏。
当点击上传内部图片按钮时，去调用该input框的change方法

view里面

<input  ref="fileInputHidden"  type="file"   style="display: none"   @change="uploadHiddenFile">

methods:里面的方法

    uploadHiddenFile() {const file = this.$refs.fileInputHidden.files[0];this.imageChange(file, url => {this.editorInstance.focus();this.editorInstance.execCommand("inserthtml", `<img src=${url}>`);});},// 将传外部图片地址修改为哒哒地址imageChange(file, getdata) {const uploadData = getFormData({file,a_id: this.admin.admin_id,a_token: this.admin.app_token,prefix: "shop-manage/product",overwrite: 2});const imageTypes = ["image/jpeg", "image/png", "image/gif"];const validType = imageTypes.some(type => type === String(file.type).toLowerCase());const isLt5M = file.size / 1024 / 1024 < 5;if (!validType) {this.$message.error("上传图片格式错误!");return false;}if (!isLt5M) {this.$message.error("上传图片大小不能超过 5MB!");return false;}axios({method: "post",url: `${this.config.fs_url}/upload`,data: uploadData}).then(res => getdata(res.data.data.url)).catch(() => {this.$message.error("图片上传失败，请稍后重试");});},

使用百度UEditor相关推荐

ueditor html显示图片,百度ueditor编辑器上传图片后img标签的title、alt属性优化简单方法...
<百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法>要点: 本文介绍了百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法,希望 ...
百度UEditor编辑器关闭抓取远程图片功能（默认开启）
2019独角兽企业重金招聘Python工程师标准>>> 这个坑娘的功能,开始时居然不知道如何触发,以为有个按钮,点击一下触发,翻阅了文档,没有发现,然后再网络上看到原来是复制粘贴非白 ...
django 与百度 ueditor 富文本编辑器集成
django 是基于 python 的一个很好的web开发框架.ueditor 是百度开源的一个富文本编辑器.有很好的用户体验,很适合中国人使用的一个编辑器. 在使用ueditor 之前,我集成过 f ...
html编辑器 br 被div,百度Ueditor编辑器DIV,html标签替换及代码被过滤问题解决方法...
解决"织梦DEDECMS使用百度Ueditor编辑器和代码高亮设置教程"中遗留的html标签过滤问题.前者资源盒子主要描述了如何在织梦CMS中使用百度Ueditor编辑器,但遗留了 ...
织梦html编辑器功能在哪,织梦dede自带编辑器替换百度ueditor编辑器
用过dedecms的朋友都知道dede自带的文本编辑器很不好用,且有些功能还需要我们自己手动去修改源码,才能完成我们想要的效果.现在广大用dedecms的朋友们,你们有福啦!我们可以利用百度的Uedi ...
百度ueditor编辑器注入漏洞修补查杀程序
百度ueditor编辑器注入查杀程序,用于对百度ueditor的漏洞补丁进行查杀,使用时需要保证本地正确部署了.net 4.0服务. 百度ueditor编辑器是目前网上比较流行的一个网站编辑器,但由于 ...
整合百度UEditor上传图片到阿里云OSS
前言将图片上传到阿里云OSS是一种趋势,一个必然.当你的项目图片过多,需要频繁上传和替换的时候,用阿里云OSS可以很方便的管理你的图片,节省服务器空间,大大提高了效率.阿里云OSS是阿里云提供的海量 ...
网站如何集成百度UEditor编辑器
在平时的网站维护使用过程中,富文本编辑器是网站必不可少的元素之一.现在市面上各种编辑器功能设计参差不齐,自己做了几个网站都是用蝉知建站系统做的,而蝉知默认内置的编辑器是KindEditor,功能简单, ...
ThinkPHP整合百度Ueditor图文教程
ThinkPHP整合百度Ueditor图文教程 ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HO ...

使用百度UEditor

百度UEditor展示

使用百度UEditor前遇到的问题

使用百度UEditor

(1) 引入+ 组建内注册：

(2) 在view中进行展示：

(3) methods:里面的方法（批量上传外部图片）

(4) methods:里面的方法（单张上传内部图片）

使用百度UEditor相关推荐

最新文章

热门文章

使用百度UEditor

百度UEditor展示

使用百度UEditor前遇到的问题

使用百度UEditor

(1) 引入+ 组建内注册：

(2) 在view中进行展示：

(3) methods:里面的方法 （批量上传外部图片）

(4) methods:里面的方法 （单张上传内部图片）

使用百度UEditor相关推荐

最新文章

热门文章

(3) methods:里面的方法（批量上传外部图片）

(4) methods:里面的方法（单张上传内部图片）