tinymce-placeholder-master
v1.0.0
Published
Placeholder text plugin for TinyMCE ===================================
Downloads
932
Maintainers
Readme
Placeholder text plugin for TinyMCE
This plugin brings HTML5 placeholder attribute functionality for the TinyMCE editor.
Usage
- Add the plugin script to the page
- Add "placeholder" to tinymce config plugins array.
- Add a placeholder attribute to the textarea as usual or set placeholder property in editor settings.
Note: This plugin is not compatible with TinyMCE inline mode. It only works in classic mode.
Installation with bower
To install plugin using bower use command bower install tinymce-placeholder-attribute
Example
Tinymce Plugins Array: plugins: "fullscreen placeholder"
Textarea:
<textarea class="tinymce" placeholder="Hello World!"></textarea>
Styling the placeholder label
By default, this plugin styles the placeholder with the following attributes:
{
style: {
position: 'absolute',
top:'5px',
left:0,
color: '#888',
padding: '1%',
width:'98%',
overflow: 'hidden',
'white-space': 'pre-wrap'
}
}
You can replace this styling by providing a placeholder_attrs
section in your TinyMCE config...
tinyMCE.init({
plugins: 'placeholder',
placeholder_attrs: // (new value for the above object...)
});
Or alternatively, you can override specific properties of the default CSS by providing the !important
directive along in your CSS property for the label...
.mce-edit-area {
label {
color: #A9A9A9 !important; /* Override text color */
left: 5px !important; /* Override left positioning */
}
}