Tinymce html5占位符通过从textarea读取属性

对于标准textareas，我使用此插件来创建占位符。 我怎样才能扩展tinymce以便这也能以这种方式工作。

例如，从textarea属性读取默认值，然后在用户关注iframe时清除。

与CKEditor类似： http ： //alfonsoml.blogspot.com.es/2012/04/placeholder-text-in-ckeditor.html

Answer 1

如果没有占位符属性，我收到错误。

我结合了这个答案中的代码： jQuery hasAttr检查一个元素是否有一个属性来获取下面修改的代码来处理这个场景：

setup: function(ed) { // Set placeholder var tinymce_placeholder = $('#'+ed.id); var attr = tinymce_placeholder.attr('placeholder'); // For some browsers, `attr` is undefined; for others, // `attr` is false. Check for both. if (typeof attr !== 'undefined' && attr !== false) { var is_default = false; ed.onInit.add(function(ed) { // get the current content var cont = ed.getContent(); // If its empty and we have a placeholder set the value if(cont.length == 0){ ed.setContent(tinymce_placeholder.attr("placeholder")); // Get updated content cont = tinymce_placeholder.attr("placeholder"); } // convert to plain text and compare strings is_default = (cont == tinymce_placeholder.attr("placeholder")); // nothing to do if (!is_default){ return; } }); ed.onMouseDown.add(function(ed,e) { // replace the default content on focus if the same as original placeholder if (is_default){ ed.setContent(''); } }); } } 

Answer 2

我重构了Tom Duke的代码，用它的jquery插件来处理TinyMCE4

 $('textarea.tinymce').tinymce({ script_url: _base + '/assets/js/tinymce/tinymce.min.js', theme: "modern", setup: function(editor) { // Set placeholder var placeholder = $('#' + editor.id).attr('placeholder'); if (typeof placeholder !== 'undefined' && placeholder !== false) { var is_default = false; editor.on('init', function() { // get the current content var cont = editor.getContent(); // If its empty and we have a placeholder set the value if (cont.length === 0) { editor.setContent(placeholder); // Get updated content cont = placeholder; } // convert to plain text and compare strings is_default = (cont == placeholder); // nothing to do if (!is_default) { return; } }) .on('focus', function() { // replace the default content on focus if the same as original placeholder if (is_default) { editor.setContent(''); } }) .on('blur', function() { if (editor.getContent().length === 0) { editor.setContent(placeholder); } }); } } }); 

Answer 3

上面的答案对我来说不起作用，但这里是我的（对我来说）工作代码基于上面的答案并使用onchange_callback。 希望它可以帮到某人！

 onchange_callback : function(ed){ var tinymce_placeholder = $('#' + ed.id).attr("placeholder"); setTimeout(function () { var content = ed.getContent().replace(/
|<\/p>/g, ''); if (content == '') { ed.setContent(tinymce_placeholder); } }, 200); }, setup: function (ed) { // Set placeholder var tinymce_placeholder = $('#' + ed.id); if (tinymce_placeholder.length) { ed.onInit.add(function (ed) { var cont = ed.getContent(); if (cont.length == 0) { ed.setContent(tinymce_placeholder.attr("placeholder")); } }); ed.onMouseDown.add(function (ed, e) { var content = ed.getContent().replace(/
|<\/p>/g, ''); if (content == tinymce_placeholder.attr("placeholder")) { ed.setContent(''); } }); } } 

Answer 4

试试这段代码：

为tinyMCE内联编辑器添加占位符文本：

  $scope.ContentOptions = { setup: function(editor) { editor.on('init', function () { // Default classes of tinyMCE are a bit weird // I add my own class on init // this also sets the empty class on the editor on init tinymce.DOM.addClass( editor.bodyElement, 'content-editor' ); }); // You CAN do it on 'change' event, but tinyMCE sets debouncing on that event // so for a tiny moment you would see the placeholder text and the text you you typed in the editor // the selectionchange event happens a lot more and with no debouncing, so in some situations // you might have to go back to the change event instead. editor.on('selectionchange', function () { if ( editor.getContent() === "" ) { tinymce.DOM.addClass( editor.bodyElement, 'empty' ); } else { tinymce.DOM.removeClass( editor.bodyElement, 'empty' ); } }); }} 

视图中的HTML部分

最后用CSS创建占位符文本（它从data-placeholder =“Content …”获取它，但你可以直接在css中完成它

  .content-editorr:before { display: none; } .content-editor.empty:before { display: block; position: absolute; content: attr(data-placeholder); } 

我在github上找到了它：

https://github.com/angular-ui/ui-tinymce/issues/197

我尝试了很多针对tinymce的占位符解决方案，并发现这个解决方案非常有用，因为它满足占位符的所有要求。 我认为这是最好的解决方案，

Answer 5

对于tinymce 4，我没有定义ed.onInit的事件。 tinymce 4使用ed.on（’event’，callback）代替。 这是我的实施。 我还使用焦点而不是mousedown作为清除编辑器时要监听的事件，因为mousdown由于某种原因不起作用。

 setup : function(ed) { // Set placeholder var tinymce_placeholder = $('#'+ed.id); var attr = tinymce_placeholder.attr('placeholder'); // For some browsers, `attr` is undefined; for others, // `attr` is false. Check for both. if (typeof attr !== 'undefined' && attr !== false) { var is_default = false; ed.on('init' , function(ed) { // get the current content var cont = ed.target.getContent(); // If its empty and we have a placeholder set the value if(cont.length == 0){ ed.target.setContent(tinymce_placeholder.attr("placeholder")); // Get updated content cont = tinymce_placeholder.attr("placeholder"); } // convert to plain text and compare strings is_default = (cont == tinymce_placeholder.attr("placeholder")); // nothing to do if (!is_default){ return; } }); ed.on('focus', function(ed,e) { // replace the default content on focus if the same as original placeholder if (is_default){ ed.target.setContent(''); } }); } } 

希望这有助于任何有其他答案问题的人

Answer 6

我找到了另一种方法，它不会弄乱textarea的内容。 我喜欢这样，所以我不必具有阻止用户提交仅占位符的内容的特殊条件。 这里有一篇文章，但我添加了onclick方法，以便标签可以点击 – 如果没有这个，用户必须点击下面或它的侧面。 这对TinyMCE 4很有用。

样式

 .tinyMCEPlaceholder { top: 45px; left: 9px; z-index: 1; color: #bbbbbb; position: absolute; cursor:text; } 

HTML

 
 Type your article  
  
 Type your article   

TinyMCE设置

  // setup setup : function(ed) { /* toggle all labels that have the attr 'tinymce' */ ed.on('init', function() { if(ed.getContent() != '') { $('label[for="tinymce"]').hide(); } $(ed.getDoc()).contents().find('body').focus(function(){ $('label[for="tinymce"]').hide(); }); $(ed.getDoc()).contents().find('body').blur(function(){ if(ed.getContent() == '') { $('label[for="tinymce"]').show(); } }); }); }, 

Answer 7

来自tinymce的例子：

 tinyMCE.init({ mode : "textareas", theme : "advanced", setup : function(ed) { var is_default = false; ed.onInit.add(function(ed) { ed.focus(); // set the focus var cont = ed.getContent(); // get the current content slen = cont.length; cont = cont.substring(3,slen-4); // cut off 
 and 
 to comply with XHTML strict // these can't be part of the default_value is_default = (cont == tiny_mce_default_value); // compare those strings if (!is_default) return; // nothing to do ed.selection.select(ed.dom.select('p')[0]); // select the first (and in this case only) paragraph }); ed.onMouseDown.add(function(ed,e) { if (!is_default) return; // nothing to do ed.selection.setContent(''); // replace the default content with nothing }); // The onload-event in IE fires before TinyMCE has created the Editors, // so it is no good solution here. } }); 

http://www.tinymce.com/wiki.php/TinyMCE_FAQ#Select_if_default_text.2C_then_delete_when_typing_starts.3F

更新以使用更好的jquery

 setup: function(ed) { // Set placeholder var tinymce_placeholder = $('#'+ed.id); if(tinymce_placeholder.length){ var is_default = false; ed.onInit.add(function(ed) { // get the current content var cont = ed.getContent(); // If its empty and we have a placeholder set the value if(cont.length == 0){ ed.setContent(tinymce_placeholder.attr("placeholder")); // Get updated content cont = tinymce_placeholder.attr("placeholder"); //cont = ed.getContent(); - too slow } // convert to plain text and compare strings is_default = (cont == tinymce_placeholder.attr("placeholder")); // nothing to do if (!is_default){ return; } }); ed.onMouseDown.add(function(ed,e) { // replace the default content on focus if the same as original placeholder if (is_default){ ed.setContent(''); } }); } 

Answer 8

这个TinyMCE插件似乎是一个解决方案：

https://github.com/mohan/tinymce-placeholder

希望能帮助到你！