爲tinymce增長placeholder功能

話很少說，先看下要實現的效果，如圖所示，爲tinymce增長一個默認提示文字，光標移入，文字消失

 

 

1.  須要藉助tinymce的一個插件plugin.js，如下爲plugin.js的源碼，能夠直接複製到本身的文件夾中

tinymce.PluginManager.add('placeholder', function(editor) { editor.on('init', function() { let 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); editor.on('keydown', onKeydown); function onFocus() { if (!editor.settings.readonly === true) { label.hide(); } editor.execCommand('mceFocus', false); } function onBlur() { if (editor.getContent() == '') { label.show(); } else { label.hide(); } } function onKeydown(){ label.hide(); } }); let Label = function(){ let placeholder_text = editor.getElement().getAttribute("placeholder") || editor.settings.placeholder; let placeholder_attrs = editor.settings.placeholder_attrs || {style: {position: 'absolute', top:'5px', left:0, color: '#888', padding: '1%', width:'98%', overflow: 'hidden', 'white-space': 'pre-wrap'} }; let contentAreaContainer = editor.getContentAreaContainer(); tinymce.DOM.setStyle(contentAreaContainer, 'position', 'relative'); // Create label el
        this.el = tinymce.DOM.add( contentAreaContainer, editor.settings.placeholder_tag || "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', '' ); } });

 

 

2. 接下來，在頁面中引入js，以及html，此處的tinymce爲一個cdn地址，使用時直接換成你是用的版本就好

 

 

3. 默認的label標籤樣式以下，能夠自定義lable樣式

{ style: { position: 'absolute', top:'5px', left:0, color: '#888', padding: '1%', width:'98%', overflow: 'hidden', 'white-space': 'pre-wrap' } }

 

 

4. 自定義lable樣式

.mce-edit-area { label { color: #A9A9A9 !important; /* Override text color */ left: 5px !important; /* Override left positioning */ } }

 

結束啦

 

參考文獻：https://github.com/mohan/tinymce-placeholder