tinymce-placeholder-master

Placeholder text plugin for TinyMCE ===================================

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
tinymce-placeholder-master
1.0.04 years ago4 years agoMinified + gzip package size for tinymce-placeholder-master in KB

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 */
  }
}