devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Activiti研究】百度富文本编辑器扩展（为自定义表单扩展做铺垫）_富文本编辑器 扩展功能

作者：AllinToyou | 2024-06-01 14:56:14

赞

踩

富文本编辑器 扩展功能
自定义表单扩展

1.修复ueditor1.4.3版本禁用自动保存功能（据说1.5版本后会修复）

UE.plugin.register('autosave', function (){
  ......
  return {
  ......
  'contentchange': function () {
      //新增加的代码
      if (!me.getOpt('enableAutoSave')) {return;}
  ......
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

2.禁用自动保存与字数统计功能ueditor.config.js

enableAutoSave: false
wordCount: false 

  • 1
  • 2

3.添加指字html元素节点的白名单（默认开启了xssfilter）

span:   [...,'name','title','yjtkey'],
input: ['width','height','name','value','title','yjtkey','checked','type','style','orghide','orgtype','orgfontsize','orgalign','orgwidth','orgheight'],
textarea: ['width','height','name','value','title','yjtkey','type','style','orghide','orgtype','orgfontsize','orgalign','orgwidth','orgheight']

  • 1
  • 2
  • 3

4.为编辑器实例添加自定义UI（button,dialog）formdesigner.js

  • 加载自定义css样式文件formdesigner.css
  • *向编辑器实例
editor.ui.buttons,editor.ui._dialog添加组建

  • 1

5.扩展百度编辑器插件formdesigner.js

  • 定义执行命名（使用内置 insertHtml命令插入html内容）

  • 原来每一个组件添加一个弹出层，用于编辑与删除操作

最后附上formdesigner.css,formdesigner.js源码

.edui-default  .edui-for-text .edui-icon {
    background-position: -500px 0;
    background-image:none!important;
    background-color:red;
}
.edui-default .edui-for-text .edui-dialog-content {
    width: 600px;
    height: 310px;
    overflow: hidden;
}

.edui-default  .edui-for-textarea .edui-icon {
    background-position: -500px 0;
    background-image:none!important;
    background-color:yellow;
}
.edui-default .edui-for-textarea .edui-dialog-content {
    width: 600px;
    height: 310px;
    overflow: hidden;
}

.edui-default  .edui-for-select .edui-icon {
    background-position: -500px 0;
    background-image:none!important;
    background-color:black;
}
.edui-default .edui-for-select .edui-dialog-content {
    width: 600px;
    height: 310px;
    overflow: hidden;
}

.edui-default  .edui-for-radios .edui-icon {
    background-position: -500px 0;
    background-image:none!important;
    background-color:orange;
}
.edui-default .edui-for-radios .edui-dialog-content {
    width: 600px;
    height: 310px;
    overflow: hidden;
}

.edui-default  .edui-for-checkboxs .edui-icon {
    background-position: -500px 0;
    background-image:none!important;
    background-color:green;
}
.edui-default .edui-for-checkboxs .edui-dialog-content {
    width: 600px;
    height: 310px;
    overflow: hidden;
}
!function() {
	
	var utils = UE.utils;
	utils.loadFile(document, {
        href:window.UEDITOR_CONFIG.UEDITOR_HOME_URL + "third-party/formdesigner/" + "formdesigner.css",
        tag:"link",
        type:"text/css",
        rel:"stylesheet"
    });
	var dialogBtns={
            'text':{'title':'文本框','html':'~/third-party/formdesigner/dialogs/text/text.html','el':'input','name':'文本框','width':'600','height':'310'},
            'textarea':{'title':'多行文本框','html':'~/third-party/formdesigner/dialogs/textarea/textarea.html','el':'textarea','name':'多行文本框','width':'600','height':'310'},
            'select':{'title':'下拉选择框','html':'~/third-party/formdesigner/dialogs/select/select.html','el':'select|span','name':'下拉选择框','width':'600','height':'310'},
            'radios':{'title':'单选按钮','html':'~/third-party/formdesigner/dialogs/radio/radios.html','el':'span','name':'单选按钮组','width':'600','height':'310'},
            'checkboxs':{'title':'复选按钮','html':'~/third-party/formdesigner/dialogs/checkbox/checkboxs.html','el':'span','name':'多选按钮组','width':'600','height':'310'},
            
	};
	//添加工具类按钮与对话框实例
	for ( var p in dialogBtns) {
		(function(cmd,opt){
			UE.ui[cmd] = function(editor, iframeUrl, title) {
				iframeUrl = opt['html'];
				title = opt['title'];

				var dialog = new UE.ui.Dialog(utils.extend({
				iframeUrl : editor.ui.mapUrl(iframeUrl),
				editor : editor,
				className : 'edui-for-' + cmd,
				//cssRules:"width:"+opt['width']+"px;height:"+opt['height']+"px;",
				title : title,
				holdScroll : false,
				fullscreen : false,
				closeDialog : editor.getLang("closeDialog")
			},{
				buttons : [ {
					className : 'edui-okbutton',
					label : editor.getLang("ok"),
					editor : editor,
					onclick : function() {
						dialog.close(true);
					}
				}, {
					className : 'edui-cancelbutton',
					label : editor.getLang("cancel"),
					editor : editor,
					onclick : function() {
						dialog.close(false);
					}
				} ]
			}));

			editor.ui._dialogs[cmd + "Dialog"] = dialog;
		

				var ui = new UE.ui.Button(
						{
							className : 'edui-for-' + cmd,
							title : title,
							onclick : function() {
								if (dialog) {
										dialog.render();
										dialog.open();
								}
							},
							theme : editor.options.theme,
							disabled : false
						});
				UE.ui.buttons[cmd] = ui;
				editor.addListener('selectionchange', function() {
					var state = editor.queryCommandState(cmd);
					if (ui.getDom()) {
						ui.setDisabled(state == -1);
						ui.setChecked(state);
					}
				});
				return ui;
			};
			
			//添加自定义插件
			UE.plugins[cmd] = function () {
				var me = this;
				me.commands[cmd] = {
						execCommand:function (cmdx,html) {
							me.execCommand('insertHtml',html);
						}
				}
				var popup = new UE.ui.Popup( {//弹出框
			        editor:this,
			        content: '',
			        className: 'edui-bubble',
			        _edittext: function () {
			              baidu.editor.plugins[cmd].editdom = popup.anchorEl;
			             // me.execCommand(cmd);
			              UE.ui.buttons[cmd].onclick()
			              this.hide();
			        },
			        _delete:function(){
			            if( window.confirm('确认删除该控件吗？') ) {
			                UE.dom.domUtils.remove(this.anchorEl,false);
			            }
			            this.hide();
			        }
			    } );
			    popup.render();
			    me.addListener( 'mouseover', function( t, evt ) {
			        evt = evt || window.event;
			        var el = evt.target || evt.srcElement;
			        var leipiPlugins = el.getAttribute('plugins');
			        var arr = opt['el'].split('|');
			        var flag = false;
			        for(i in arr){
			        	if(arr[i]===el.tagName.toLowerCase()){flag=true;break;}
			        }
			        if ( flag  && leipiPlugins==cmd) {
			            var html = popup.formatHtml(
			                '<nobr>'+opt['name']+': <span onclick=$$._edittext() class="edui-clickable">编辑</span>  <span onclick=$$._delete() class="edui-clickable">删除</span></nobr>' );
			            if ( html ) {
			            	if(cmd==='select'&&el.tagName==='SPAN'){
		                         var elInput = el.getElementsByTagName("select");
		                         el = elInput.length>0 ? elInput[0] : el;
		                         popup.getDom( 'content' ).innerHTML = html;
		                         popup.anchorEl = el;
		                         popup.showAnchor( popup.anchorEl );
			            	}else{
			            		var elInput = el.getElementsByTagName("input");
				                var rEl = elInput.length>0 ? elInput[0] : el;
				                popup.getDom( 'content' ).innerHTML = html;
				                popup.anchorEl = el;
				                popup.showAnchor( rEl);
			            	}
			                
			            } else {
			                popup.hide();
			            }
			        }
			    });
			    
			}
			
		})(p,dialogBtns[p])
		
	}
}()

​```

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/658156
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号