TinyMCE에 자리 표시 자 텍스트를 추가하려면 어떻게해야합니까?

표준 텍스트 영역의 경우 placeholder=""을 사용합니다. 나는 어떻게 이런 식으로도 작동하도록 주석을 확장 할 수 있습니까? CKEditor이 유사TinyMCE에 자리 표시 자 텍스트를 추가하려면 어떻게해야합니까?

는 : http://alfonsoml.blogspot.com.es/2012/04/placeholder-text-in-ckeditor.html

출처

2014-12-01 Anonymous

github에서이 tinymce 플러그인을 사용해보세요. https://github.com/mohansandesh/tinymce-placeholder – Mohan

placeholder plugin 나를 위해 큰 일했습니다. 이 플러그인은 TinyMCE 편집기에 HTML5 자리 표시 자 속성 기능을 제공합니다. 여기

출처

2015-05-20 16:37:24

<html> 
<head> 
    <title>Bhanu Pratap, Tinymce with placeholder... </title> 
    <script src="http://cdn.tinymce.com/4/tinymce.min.js"></script> 
    <script type="text/javascript"> 
     tinymce.PluginManager.add('placeholder', function (editor) { 
      editor.on('init', function() { 
       var label = new Label; 
       onBlur(); 
       tinymce.DOM.bind(label.el, 'click', onFocus); 
       editor.on('focus', onFocus); 
       editor.on('blur', onBlur); 
       editor.on('change', onBlur); 
       editor.on('setContent', onBlur); 
       function onFocus() { if (!editor.settings.readonly === true) { label.hide(); } editor.execCommand('mceFocus', false); } 
       function onBlur() { if (editor.getContent() == '') { label.show(); } else { label.hide(); } } 
      }); 
      var Label = function() { 
       var placeholder_text = editor.getElement().getAttribute("placeholder") || editor.settings.placeholder; 
       var placeholder_attrs = editor.settings.placeholder_attrs || { style: { position: 'absolute', top: '2px', left: 0, color: '#aaaaaa', padding: '.25%', margin: '5px', width: '80%', 'font-size': '17px !important;', overflow: 'hidden', 'white-space': 'pre-wrap' } }; 
       var contentAreaContainer = editor.getContentAreaContainer(); 
       tinymce.DOM.setStyle(contentAreaContainer, 'position', 'relative'); 
       this.el = tinymce.DOM.add(contentAreaContainer, "label", placeholder_attrs, placeholder_text); 
      } 
      Label.prototype.hide = function() { tinymce.DOM.setStyle(this.el, 'display', 'none'); } 
      Label.prototype.show = function() { tinymce.DOM.setStyle(this.el, 'display', ''); } 
     }); 

     tinymce.init({selector: ".EditorControl",plugins: ["placeholder"]}); 

    </script> 
</head> 
<body> 
    <textarea class="EditorControl" placeholder="Bhanu Pratap welcomes you, please enter some text here...."></textarea> 
</body> 
</html>

우리는 "(onfocus 및 '클릭', label.el) tinymce.DOM.bind;"는 lable가 추가하고 TinyMCE에의 DOM 객체의 바인딩 Methos는에 전달된다
클릭 할 때 또는 편집기에 텍스트가있는 경우 자리 표시 자 숨기기.
자리 표시 자의 색을 #aaaaaa로 설정합니다. 요구 사항에 따라 변경할 수 있습니다.
여백을 .25 %로 설정하고 여백을 5px로 설정하고 자리 표시 자의 글꼴 크기를 17px로 설정하면 요구 사항에 따라이 설정을 변경할 수 있습니다.
우리는 자리 표시 자 메시지도 변경할 수 있으며 의미있는 맨아더로 설정할 수 있습니다.

덕분에 ... 아래 TinyMCE를 3으로 :

출처

2016-10-03 14:00:25

이 플러그인은 잘 작동합니다. 플러그인은 TinyMCE 4에서는 사용할 수 없지만 init에 자리 표시자를 추가 한 다음 포커스가 있으면 제거 할 수 있습니다. TinyMCE가 iframe을 사용한다는 것을 기억하십시오.

tinymce.init({ 
    //here all the rest of the options 
    //xxxxx 
    //Add the placeholder 
    setup: function (editor) { 
    editor.on('init', function(){ 
     if (tinymce.get('Text').getContent() == ''){ 
     tinymce.get('Text').setContent("<p id='#imThePlaceholder'>Your nice text here!</p>"); 
     } 
    }); 
    //and remove it on focus 
    editor.on('focus',function(){ 
     $('iframe').contents().find('#imThePlaceholder').remove(); 
    }); 
})

출처

2017-10-09 16:30:13 andyk

'tinymce.get ('Text'). getContent()'가 제대로 작동하려면 HTML을 어떻게 구조해야하는지 모르겠다. 나는 일을하는 구식 방식 이었지만, 이것을'tinyMCE.activeEditor.getContent()'로 바꿨을 때, 나는이 솔루션을 사용할 수 있었다. 이 andyk를 게시 해 주셔서 감사합니다. –

TinyMCE에 자리 표시 자 텍스트를 추가하려면 어떻게해야합니까?

답변

관련 문제