对于标准的文本区域,我使用这个plugin来创建一个占位符。我如何扩展tinymce,使它也能以这种方式工作呢?
例如,从textarea属性读取默认值,然后在用户关注iframe时清除该值。
与CKEditor类似:http://alfonsoml.blogspot.com.es/2012/04/placeholder-text-in-ckeditor.html
对于标准的文本区域,我使用这个plugin来创建一个占位符。我如何扩展tinymce,使它也能以这种方式工作呢?
例如,从textarea属性读取默认值,然后在用户关注iframe时清除该值。
与CKEditor类似:http://alfonsoml.blogspot.com.es/2012/04/placeholder-text-in-ckeditor.html
9条答案
按热度按时间cbjzeqam1#
我重构了Tom杜克的代码,以便使用其jquery插件处理TinyMCE4
li9yvcax2#
如果没有占位符属性,则会出现错误。
我把这个答案中的代码组合起来:jQuery hasAttr checking to see if there is an attribute on an element,以获取下面处理该场景的修改代码:
klsxnrf13#
上面的答案对我不起作用,但是下面是基于上面的答案并使用onchange_callback的我的(对我来说)工作代码。希望它能帮助别人!
rwqw0loc4#
请尝试以下代码:
为tinyMCE内联编辑器添加占位符文本:
视图中的HTML部件
最后是创建占位符文本的CSS(它从data-placeholder=“Content...”中获取,但您可以直接在css中完成
我在github上找到的:
https://github.com/angular-ui/ui-tinymce/issues/197
我尝试了很多占位符解决方案,发现这个解决方案非常有用,因为它满足了占位符的所有要求。我认为这是最好的解决方案,
kuhbmx9i5#
对于tinymce 4,我在没有定义艾德的情况下遇到了一些问题。tinymce 4使用ed.on('event ',callback)来代替。这是我的实现。我还使用了focus而不是mousedown作为清除编辑器时要监听的事件,因为mousdown由于某种原因不工作。
我希望这对那些对其他答案有疑问的人有所帮助
vwkv1x7d6#
我发现了另一种方法,它不会破坏文本区域的内容。我喜欢这种方法,这样我就不必设置特殊的条件来阻止用户提交只是占位符的内容。但我添加了onclick方法,以便标签是可单击的--如果没有这个方法,用户就必须在
<label>
的下面或旁边单击。这在TinyMCE 4中非常有效。样式
html文件
TinyMCE安装程序
nwsw7zdq7#
这个插件TinyMCE似乎是一个解决方案:
https://github.com/mohan/tinymce-placeholder
希望能有所帮助!
j8yoct9x8#
Gaurav的解决方案运行正常,但需要做一些修改。我使用了以下修改使其近乎完美:
klh5stk19#
我通过在
textarea
元素上添加data-mce-placeholder
属性,轻松地添加了占位符。data-mce-placeholder
在编辑器iframe中的body::before
文本css中引用