當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/8/1 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 UEditor 自定义input,复选框,弹窗，修改，删除，取值，存值小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

以加入復選框為例：
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('inserthtml','<input type="checkbox"/>');},}},

完整效果圖/html

6、彈窗形式加參數
6.1、ueditor.all.js找到dialogBtns，如果設置彈窗，在ok里面添加checkbox
6.2、在dialogs下面新建checkbox文件夾，在文件夾里面新建checkbox.html,內容自己定義，是彈框的內容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><style type="text/css">*{color: #838383;margin: 0;padding: 0}html,body {font-size: 12px;overflow: hidden; }input{width:210px;height:21px;line-height:21px;margin-left: 4px;padding: 0 4px;}.contentcheckbox{padding:5px 0 0 15px;}.contentcheckbox ul li{margin-bottom: 10px;display: flex;align-items: center;}.contentcheckbox ul li label{width: 55px;}</style></head><body><div class="contentcheckbox"><ul><li><label for="model">字段id</label><input class="txt" id="model" type="text" autocomplete="off"/></li><li><label for="lable">name</label><input class="txt" id="lable" type="text" autocomplete="off"/></li><li><label for="value">value</label><input class="txt" id="value" type="text" autocomplete="off"/></li><li><label for="checked">是否默認選中</label><input id="checked" type="checkbox" style="width: 20px;" autocomplete="off"/></li></ul><div id="msg"></div></div><script type="text/javascript" src="../internal.js"></script><script type="text/javascript">dialog.onok = function (){if($G("model").value !=''){var obj = {'id' : $G("model").value,'name' : $G("lable").value,'value' : $G("value").value,'checked':$G("checked").checked };// console.log(utils.clearEmptyAttrs(obj))//刪除空值editor.execCommand('checkbox',obj);dialog.close();return true;}else{$G("msg").innerHTML = "<span style='color: red'>字段id不為空</span>";return false;}};</script></body> </html>

6.3、ueditor.all.js找到iframeUrlMap，添加如下代碼

'checkbox': '~/dialogs/checkbox/checkbox.html',

6.4、在ueditor.css中添加彈窗樣式

/*checkbox-dialog*/ .edui-default .edui-for-checkbox .edui-dialog-content {width: 320px;height: 180px;overflow: hidden; }

6.5、參考上述第5步

UE.commands.checkbox = {execCommand: function(cmdname, obj) {//執行操作}, }

7、若想要加上修改屬性：

ueditor.all.js找到editor.addListener(‘mouseover’, function (t, evt) {})，添加如下代碼
參照iframe添加執行代碼

editor.addListener('mouseover', function (t, evt) {evt = evt || window.event;var el = evt.target || evt.srcElement;if(/input/ig.test(el.tagName ) && editor.ui._dialogs.checkboxDialog){ var e = popup.formatHtml('<nobr>復選框屬性: <span οnclick=$$._edittext() class="edui-clickable">修改</span>  <span οnclick=$$._delete() class="edui-clickable">刪除</span></nobr>'); e ? (popup.getDom("content").innerHTML = e, popup.anchorEl = el, popup.showAnchor(h.anchorEl)) : popup.hide() } });

事件寫在ueditor.all.js var popup = new baidu.editor.ui.Popup({})

總結

以上是生活随笔為你收集整理的UEditor 自定义input,复选框,弹窗，修改，删除，取值，存值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Java中级面试题及答案（120道Jav
下一篇： C++类库Pugixml与rapidxm