Applications

TinyMCE Placeholder

MIT - 1.0

A customizable placeholder plugin for TinyMCE 4. Released under the MIT license.

It can be used to put images as placeholders for tokens into the editor. Looking at the html code produced by TinyMCE, the tokens are visible in their textual form.

When the content of the editor is elaborated by, for example, a server-side script like php, then the tokens can be elaborated, substituted.
The tokens managed by this plugin are like this: [!name], where name is be defined into the configuration code of TinyMCE.

You can download it from GitHub: https://github.com/fisa/TinyMCE-Placeholder .

This is the link of a full working Placeholder demo with TinyMCE: tinymce_placeholder_demo.zip .

Configuration

Into the configuration of TineMCE 'placeholder_tokens' should be declared as an array of objects.
Each object can have the following properties:

token The token name.
title [optional] The text that will be used into the menus.
image [optional] The image url that will be used as placeholder.

Example of configuration

tinymce.init({ plugins: [ "placeholder" ], toolbar: "placeholder", placeholder_tokens: [ { token: "foo", title: "Foo example", image: "images/t_foo.gif" }, { token: "placeholder" }, { token: "project_path", image: "images/t_project_path.gif" } ] });

Demo

Try to insert some text and placeholders using the "Placeholder", then look at the preview and the source by clicking the last two buttons of the toolbar.
You can insert a placeholder also by typing it into the source code view.

Source code

To get the source code of the plugin or of the demo see the links above.