正文 

当前位置： 首页 > 程序 > java教程

百度编辑器ueditor使用记录

gwf93 gwf93     2022-12-03     169

关键词：

Ueditor官网： http://fex.baidu.com/ueditor/#dev-bale_width_grunt

UeditorAPI文档： https://ueditor.baidu.com/doc/#COMMAND.LIST

Ueditor下载网址：https://ueditor.baidu.com/website/download.html

一、项目引用

因为Ueditor不支持模块化引入，最简单的方式就是把ueditor直接下载到项目里，这样不存在跨域问题，因为Ueditor里的表格操作弹窗，这些都是用iframe嵌入，而我们项目所处的环境是不允许跨域的，所以我是把ueditor直接放在前端项目里。后面二次开发完成之后，将文件打包压缩，放在发布项目里。还有另外一种方式，就是把Ueditor模块化，使用import 引用，但是由于时间有限，资料也比较少，没有过深的了解。

二、二次开发

　　1、在工具栏新增操作按钮 插入布局

　　　 插入布局是在ueditor.all.js里直接修改源码的，这个功能其实是和表格一样，只是边框是虚线，需要和表格共存。新增命令  UE.commands[‘insertlayout‘]，直接把table的命令拷下来，把命令的名称修改一下，生成的html样式修改一下就可以了。

　　技术图片

　　然后在ui这块生成一个按钮

　　技术图片

　　最后在commands 里加上insertlayout，在自定义 config.js里 toolbars加上这个命令，就可以在工具栏看到了，对应的图标替换，是直接在ueditor.css里修改的，最直接。

　　技术图片

　　2、自定义工具栏：插入动态表格

　　这个虽然和插入布局都是添加工具栏按钮，但是不同于插入布局，动态表格需要对接项目的接口，及自定义弹窗，所以这个功能采用了ueditor提供的二次开发方法：

UE.registerUI(‘insertdtablebtn‘, function(editor, uiName) 
    var dialog = new UE.ui.Dialog(
		//指定弹出层中页面的路径，这里只能支持页面
		iframeUrl:  ‘/ueditor/dialogs/dtable/dtable.html‘
		//需要指定当前的编辑器实例
		editor:editor,
		//指定dialog的名字
		name:uiName,
		//dialog的标题
		title:"插入动态表格",
		//指定dialog的外围样式
		cssRules:"width:420px;height:165px;",
		//如果给出了buttons就代表dialog有确定和取消
		buttons:[
			className:‘edui-okbutton‘,
			label:‘确定‘,
			onclick:function () 
                        // 执行你的操作
			// 获取弹窗里的iframe 的 document
			let targetDocument = this.target.offsetParent.offsetParent.offsetParent.children[2].children[1].contentWindow.document;
			// 执行插入动态表格 
			editor.execCommand(‘insertdtable‘, numCols:cols, border:1, source: source, ifIncrement);
	　　　　　　　　　 dialog.close(false);
		       ,
		       
			className:‘edui-cancelbutton‘,
			label:‘取消‘,
			onclick:function () 
			　　dialog.close(false);
			
		       
		]);
var btn = new UE.ui.Button(
          　　　　name:‘dialogbutton‘ + uiName,
         　　　　 title:‘插入动态表格‘,
          　　　　//需要添加的额外样式，指定icon图标
          　　　　cssRules :‘background-image: url("https://dingtalkcdn.superboss.cc/dingcrm/yunyin/huodong/[email protected]")!important; background-size: 15px 15px !important;background-position: center;background-repeat: no-repeat;‘,
          　　　　onclick:function () 
            　　　　　//执行你的代码
         　　　　 
      　　　　);
      　　　　//因为是添加button,所以需要返回这个button
      　　　　return btn;
)

　

弹窗内部是引用了一个html, 这个是一个自定义的页面，写在dialogs里。源码里只需要添加命令 UE.commands[‘insertdtable‘]，类似于表格，生成你需要的HTML就可以了，不需要再添加ui了。

　　3、动态表格里的操作 禁止删除行，插入行等操作

　　ueditor.all.js 重定义 UE.commands["insertrow"] UE.commands["deleterow"]

　　可以在你生成的html里添加自定义属性，然后在重定义方法的时候进行判断，其他地方的禁用操作类似这种操作，注意的是自定义的属性需要在配置js里xss过滤白名单里加上自定义属性的名称，否则是加不上去的。

if($(ut.table).attr("data-type") == "dtable")
	return

　　几个主要的功能实现说完了，一些细节的操作就不多说了。其实中间最重要的是看懂ueditor.all.js里的源码。在实现自己的功能时，用他们提供的API会方便很多，二次开发之前可以多看看 源码和API文档。看好了再动手，事半功倍。

　　

　　

　　

 

　　

 

 

 

　　

　　　　

　　　　

vue中使用百度编辑器ueditor

 已有前辈整理，记录URL:http://www.cnblogs.com/ocean-sky/p/7132319.htmlhttp://blog.csdn.net/psd_html/article/details/73312859需注意的代码：子组件：config接收父组件传来的配置mounted(){//初始化UEconst_this=this;_this.editor=UE.getE 查看详情

百度富文本编辑器ueditor

前言　　配置.netmvc4项目使用ueditor编辑器，在配置过程中遇见了好几个问题，以此来记录解决办法。编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net的开发包，如下图，我下载的是1.2.6.1net版本的开发包。配置：1... 查看详情

百度在线编辑器ueditor的使用

1、引入ueditor文件包到项目中（官网下载，分为utf-8还有gbk等好多版本，自己看着下）2、把ueditor引入到jsp页面中，可参考百度提供的示例<scripttype="text/javascript"charset="utf-8"src="${basePath}js/ueditor/ueditor.config.js"></script><scrip... 查看详情

怎么使用百度编辑器

我们在做网站的时候，网站后台系统一般都会用到web编辑器，今天笔者就给大家推荐一款百度UEditor编辑器。关于这款百度UEditor编辑器官网上也有简单的教程，不过看着比较费劲，今天笔者就跟大家分享一下百度UEditor编辑器使用... 查看详情

页面插入百度ueditor编辑器

 工作中用到了百度的富文本。以下总结记录一下，UEditor嵌入网页的方法。 第一步到百度UEditor官网下载所需版本：http://ueditor.baidu.com/website本次下载的是utf-8的jsp版：ueditor1_4_3_2-utf8-jsp.zip。 第二步解压得到如图文件结... 查看详情

百度富文本ueditor编辑器的使用(代码片段)

...其是在网站开发后台管理系统的时候经常会使用到富文本编辑器，这里我们来使用百度提供的富文本编辑器UEditor，以提高我们的开发效率UEditor官网下载地址：https://ueditor.baidu.com/website/download.html 这里我下载的是jsp版本中的UT... 查看详情

百度编辑器ueditor插件的基本使用

...后进入后台进行安装即可Ueditor插件的使用：在你想要用编辑器的模板页面加如下代码即可：:Core::hook(‘ueditor‘,[‘name‘=>‘content‘,‘w 查看详情

ueditor百度编辑器中的setcontent()方法的使用

百度编辑器Ueditor所提供的setContent()方法作用是：设置或者改变编辑器里面的文字内容或html内容函数说明：setContent(string,boolean);参数string是需要设置到编辑器里面的内容，可以含有HTML代码，最后插入到编辑器中的内容是经过编辑... 查看详情

ueditor百度网页编辑器开发者版javautf-8的使用

index.jsp主要代码：<html><head><title>网页编辑器</title><scripttype="text/javascript"charset="utf-8"src="./ueditor/ueditor.config.js"></script><scripttype="text/javascript 查看详情

springmvc怎么使用百度富文本编辑器

参考技术A上网查询了很多相关资料，此处简要记录下，防止以后遇到类似问题。一种方式是直接修改源码，步骤如下：1、编写controller如下（该接口是ueditor前后台交互的统一路径）：packagecom.test.dcdp.controller;importjava.io.IOException;i... 查看详情

百度编辑器（ueditor），粘贴多张图片时显示转存无法使用

从word粘贴一张图是可以的但是多张图就不行了有请大神帮忙参考技术A这编辑器，最傻瓜了，文字，图片集中不了 查看详情

百度编辑器-ueditor

作者：LiondenLionden‘sLionDen.又一编辑神器-百度编辑器-Ueditor（Lionden<[email protected]>转载说明）　　　　前段时间发表过一篇关于“KindEditor在JSP中使用”的博文。这几天在沈阳东软进行JavaWeb方面的实习工作，在一个CM... 查看详情

百度编辑器（ueditor）踩坑，图片转存无法使用

在使用百度编辑器的过程中碰到了一些问题，图片转存功能无法使用，即便是疯狂地在官方Demo、文档、论坛甚至是GitHub上也没找到理想的答案。(┗|｀O′|┛)(真是日了狗)问题描述默认情况下，从Word中复制的内容粘贴在编辑... 查看详情

vue项目中使用百度编辑器(代码片段)

vue中使用百度编辑器1、yarnaddvue-ueditor-wrap//下载此包可实现双向绑定功能2、将去官网下载百度编辑器包(jsp版本),将名字改为UEditor放在项目的static文件夹下3、在components文件夹下新建文件Ueditor.vue并写入以下代码（提醒：注意下方... 查看详情

百度编辑器ueditor光标位置的坐标(代码片段)

 项目需求：输入某个字符时，弹出一个弹框弹框位置跟随光标处经查找，并测试下面记录一下代码：//下面计算坐标letdomUtils=UE.dom.domUtilsletbk_start=instance.selection.getRange().createBookmark().start//创建一个临时dom，用于获取当前光标... 查看详情

如何用百度ueditor编辑器替换wordpress编辑器

为WordPress更换百度Ueditor编辑器先声明，我现在在使用的wp为3.9版本。Ueditor插件为1.30。在网上找过很多富文本插件，感觉国产的这个用起来最强大，最舒服。而且还内置baidu地图，google地图。为什么不去用呢？这个插件的几个重... 查看详情

网站如何集成百度ueditor编辑器

在平时的网站维护使用过程中，富文本编辑器是网站必不可少的元素之一。现在市面上各种编辑器功能设计参差不齐，自己做了几个网站都是用蝉知建站系统做的，而蝉知默认内置的编辑器是KindEditor，功能简单，已经满足不了... 查看详情

百度编辑器之使用与常见问题(代码片段)

　　最近,我们后台使用的编辑器用于需求的变更换成了百度编辑器,在使用的时候碰到了一些问题,总结在此　　参考完档: http://fex.baidu.com/ueditor/　　一.初始化　　二.使用    　　问题:　　1. ueditor多图片上... 查看详情