e起飞young
一个前端码农的技术博客
UEditor模拟placeholder效果
[ 2016/11/29, 7911阅, 4评 ]

QQ截图20161129180132.gif

通常,我们会给表单里的输入项一个引导提示,一般可以写到value,placeholder里面或者写到其他的标签里面,但是富文本编辑器可不怎么买账了,例如这个UEditor,给它提示到编辑器的上下左右方都不怎么好看,所以只好放在编辑器里头了,上网搜了下,已经有前辈们解决了这个问题,特意搬运过来使用收藏了。

UE.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");
	});
};
//实例化编辑器example
var editor = UE.getEditor(编辑器id);
//placeholder内容(只能是文本内容)
editor.placeholder("Please enter some text...");

有朋自远方来...评论一下呗O(∩_∩)O

  • 评论(4)

    Miss_Chocolate [ 回复 ] 3楼
    2019-12-15 13:12

    偶像之路 [ 回复 ] 2楼
    2017-10-05 10:45

    清问在这种情况下placeholder的内容会被写入到后台的数据库中如何处理,用了setcontent这个属性,就把内容写入了编辑器

    e起飞young 博主大人 [ 回复 ]
    2017-10-07 20:56

    @偶像之路:那么在提交的时候可以判断一下呀,如果和placeholder的内容相同了就不给提交呗。

    甜菜欣欣 [ 回复 ] 1楼
    2017-06-17 11:50

    有点酷喔

    搜索