给UMEditor 增加placeholder

工作中，遇到要使用富文本编辑器的场景，而UEditor(下称UE)又太庞大，于是采用UMEditor(下称UM)。
经过使用发现UE和UE均无placeholder功能，于是从网上找到UE的palceholder代码，经过查看UM源代码，发现也可移值到UM上。代码如下(适用UEditor时仅需将UM改为UE即可)：

UM.Editor.prototype.placeholder = function(justPlainText) {var _editor = this;_editor.addListener("focus", function() {var localHtml = _editor.getPlainTxt();if($.trim(localHtml) === $.trim(justPlainText)) {_editor.setContent(" ");}});_editor.addListener("blur", function() {var localHtml = _editor.getContent();if(!localHtml) {_editor.setContent(justPlainText);}});_editor.ready(function() {_editor.fireEvent("blur");});
};var um = UM.getEditor('myEditor');
um.placeholder("这里写你的初始化内容");

然而，在实际应用中，在拖拽图片到编辑器和上传图片时，placeholder也当作内容输入到编辑框里了，这显然不是我们想要的。

经过研究，在umeditor.js里修改如下两个地方，达到可用程度。
代码如下：

// line:5756
UM.commands['insertimage'] = {execCommand:function (cmd, opt) {//……//……//在这里添加这行代码if(me.getPlainTxt() == "这里写你的初始化内容\n") me.setContent(" ");me.execCommand('insertHtml', html.join(''), true);}
};// line:8020
UM.plugins['autoupload'] = function () {var me = this;me.setOpt('pasteImageEnabled', true);me.setOpt('dropFileEnabled', true);var sendAndInsertImage = function (file, editor) {//模拟数据var fd = new FormData();fd.append(editor.options.imageFieldName || 'upfile', file, file.name || ('blob.' + file.type.substr('image/'.length)));fd.append('type', 'ajax');var xhr = new XMLHttpRequest();xhr.open("post", me.options.imageUrl, true);xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");xhr.addEventListener('load', function (e) {try {var json = eval('('+e.target.response+')'),link = json.url,picLink = me.options.imagePath + link;//在这里添加这行代码if(editor.getPlainTxt() == "这里写你的初始化内容\n") editor.setContent(" ");editor.execCommand('insertimage', {src: picLink,_src: picLink});} catch (er) {}});xhr.send(fd);};//……//……//……
}

给UMEditor 增加placeholder相关推荐

html5下input的placeholder标签兼容ie9
if (!!window.ActiveXObject || "ActiveXObject" in window) { //判断在ie下执行 $(function(){ jQuer ...
占位隐藏 html,CSS设置输入框占位符placeholder点击隐藏
在HTML5中可以对文本输入框增加placeholder属性,英文placeholder意思是占位符,用在文本输入框的时候可以友好的显示提示文字,例如下面这个就是常见的文本框提示效果: 对于IE浏览器 ...
html5新增属性有哪些,HTML5 新增属性
一.新增与链接相关的属性 1.为a与area元素增加media属性.该属性有效的前提是href属性必须存在.media属性定义了目标URL是针对哪种类型的媒介设备进行优化的. 2. 为area元素增加 ...
layui动态添加input_layer.prompt添加多个输入框
我们都知道layer.prompt官网上的例子是一个弹出框,那么有没有可能出来多个呢,当然是可以的 1.首先增加需要的输入框源码不好改动,咱们可以直接js增加呀,$().append()方法还是很好 ...
Flutter快速上车之Widget
Flutter作为一种全新的响应式,跨平台,高性能的移动开发框架.从开源以来,已经得到越来越多开发者的喜爱.闲鱼是最早一批与谷歌展开合作,并在重要的商品详情页中使用上线的公司.一路走来,积累了大量的开 ...
layer.prompt添加多个输入框
原文链接:https://www.jianshu.com/p/65fea33e6750 我们都知道layer.prompt官网上的例子是一个弹出框,那么有没有可能出来多个呢,当然是可以的 1.首先增加 ...
一个基于vue和element-ui的树形穿梭框组件
el-tree-transfer 简介因为公司业务使用vue框架,ui库使用的element-ui.在市面上找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之 ...
Flutter快速上车之Widget 1
Flutter作为一种全新的响应式,跨平台,高性能的移动开发框架.从开源以来,已经得到越来越多开发者的喜爱.闲鱼是最早一批与谷歌展开合作,并在重要的商品详情页中使用上线的公司.一路走来,积累了大量的开 ...
视线估计算法的工程实践
视线估计算法ELG的工程实践,来源于 https://github.com/SpikeKing 算法: ELG:Eye region Landmarks based Gaze Estimation,基 ...

给UMEditor 增加placeholder

给UMEditor 增加placeholder相关推荐

最新文章

热门文章