UEditor 自定义input,复选框,弹窗，修改，删除，取值，存值

最新推荐文章于 2022-11-08 23:32:07 发布

ThisShe

最新推荐文章于 2022-11-08 23:32:07 发布

阅读量2k

点赞数 1

分类专栏： UEditor 文章标签： ueditor

本文链接：https://blog.csdn.net/qq_33871182/article/details/118601171

版权

这篇博客详细介绍了如何在UEditor中自定义添加input、复选框功能，包括点击按钮插入复选框、自定义图标样式、创建弹窗进行参数设置以及实现复选框属性的修改。步骤涵盖ueditor.config.js、ueditor.all.js和ueditor.css的修改，以及弹窗内容的定义和事件监听。

摘要由CSDN通过智能技术生成

以加入复选框为例：
1.在ueditor.config.js中找到toolbars的数组，并在数组中添加一个你需要新增的功能名称

toolbars: [.......,checkbox]

2.在zh-cn.js 中找到labelMap,主要是用于鼠标放置上去显示的文字提示内容

 //当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置，否则以配置值为准
    labelMap:{
   
       'checkbox':'复选框'
    },

3.在ueditor.all.js 中找到"btnCmds" ,在数组的最后添加"checkbox"

 //为工具栏添加按钮，以下都是统一的按钮触发命令，所以写在一起
    var btnCmds = [......,'checkbox'];

4.这是该图标的样式是默认的B，可以修改为自己想要的样式，在ueditor.css中添加样式

.edui-default  .edui-for-checkbox .edui-icon {
   
  background-image: url(../images/checkbox.png) !important;
      background-size: 92%;
      background-repeat: no-repeat;
      padding: 9px;
}

完成以上4步后的效果图：
在这里插入图片描述

5.点击按钮加入复选框，在ueditor.all.js中添加如下代码，并加入你需要的功能

UE.plugins.checkbox = function() {
   
		var me = this;
		me.addListener("contentchange", function () {
   utils.each(domUtils.getElementsByTagName(me.document, 'input'), function (input) {
   
				input.onclick = function (evt) {
   
					  if(evt.target.checked){
   //选中效果
						  domUtils.setAttributes(this,{
   'checked':'checked'});
					  }else{
   //取消选中效果
						  domUtils.removeAttributes(this,'checked');
					  }
				}
			})
		}),
		 UE.commands.checkbox =  {
   
		 	// execCommand //执行各种操作命令
		      execCommand: function(cmdName,ci) {
   
		 		var me= this;
		 		me.focus();
		 		me.execCommand