PHPackages ndm2/ckeditor-placeholder-elements - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. ndm2/ckeditor-placeholder-elements ActiveLibrary[Utility & Helpers](/categories/utility) ndm2/ckeditor-placeholder-elements ================================== A CKEditor plugin that adds support for predefined placeholder elements. 1.0.6(2y ago)75994MITJavaScript Since Apr 9Pushed 2y ago2 watchersCompare [ Source](https://github.com/ndm2/ckeditor-placeholder-elements)[ Packagist](https://packagist.org/packages/ndm2/ckeditor-placeholder-elements)[ Docs](https://github.com/ndm2/ckeditor-placeholder-elements)[ RSS](/packages/ndm2-ckeditor-placeholder-elements/feed)WikiDiscussions master Synced 2mo ago READMEChangelogDependenciesVersions (9)Used By (0) CKEditor Placeholder Elements Plugin ==================================== [](#ckeditor-placeholder-elements-plugin) [![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.txt)[![Build Status](https://camo.githubusercontent.com/5f51088aa230b1c7e2418cc09e1bc157ec30bc17478446f9273546789c8bbb31/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6e646d322f636b656469746f722d706c616365686f6c6465722d656c656d656e74732f63692e796d6c3f6272616e63683d6d6173746572267374796c653d666c61742d737175617265)](https://github.com/ndm2/ckeditor-placeholder-elements/actions/workflows/ci.yml?query=branch%3Amaster) This is a [CKEditor](http://ckeditor.com/) plugin that adds support for predefined placeholder elements. What's it good for? ------------------- [](#whats-it-good-for) Well, in case you want the user to be able to use placeholders from a predefined collection, there you go... actually it's pretty much for my own specific use, but if it fits your needs, have fun with it. Requirements ------------ [](#requirements) This plugins requires CKEditor 4.3+ and the following plugins: - [Rich Combo](http://ckeditor.com/addon/richcombo) - [Widget](http://ckeditor.com/addon/widget) How to use? ----------- [](#how-to-use) ### Installation [](#installation) You can either - use [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) (and copy the files into `ckeditor/plugins/placeholder_elements/`) ``` $ npm i @ndm2/ckeditor-placeholder-elements ``` - [Bower](http://bower.io) ``` $ bower install ndm2-ckeditor-placeholder-elements ``` - clone or download and unpack the repository into `ckeditor/plugins/placeholder_elements/` ``` $ git clone --depth=1 https://github.com/ndm2/ckeditor-placeholder-elements ./ckeditor/plugins/placeholder_elements/ ``` - or use [Composer](https://getcomposer.org) (optionally in combination with a custom directory installer like for example [mnsami/composer-installer-plugin](https://github.com/mnsami/composer-installer-plugin)) ``` $ composer require ndm2/ckeditor-placeholder-elements ``` If you can't install the plugin directly in the CKEditor plugin folder, use [`CKEDITOR.plugins.addExternal()`](http://docs.ckeditor.com/#!/api/CKEDITOR.resourceManager-method-addExternal) to point the editor to the directory where you've placed the plugin. ### Configuration [](#configuration) Include the name of the plugin in the ckeditor `extraPlugins` option: ``` config.extraPlugins = 'placeholder_elements'; ``` By default the UI element is appended to the [`insert` toolbar](http://docs.ckeditor.com/#!/guide/dev_toolbar). In case you want to [place it manually](http://docs.ckeditor.com/#!/guide/dev_toolbar-section-%22item-by-item%22-configuration), use `PlaceholderElements` as the identifier. The following options are available for configuration: ``` config.placeholder_elements = { // The CSS applied to the placeholder elements. css: '.cke_placeholder_element { background: #ffff00; }' + 'a .cke_placeholder_element { text-decoration: underline }', // Defines whether the placeholders should be draggable. draggable: false, /** * A list of placeholders, defined as objects with `label` and `value` * properties, where the label is being displayed in the menu, and value * is used as the placeholder text. * * Note that delimiters are added automatically, so the value should be * defined without! * * [ * {label: 'Placeholder 1', value: 'PLACEHOLDER_1'}, * {label: 'Placeholder 2', value: 'PLACEHOLDER_2'}, * {label: 'Placeholder 3', value: 'PLACEHOLDER_3'}, * // ... * ] * * When using the `combo` UI type, it's also possible to define groups * using the `group` and `placeholders` keys, where `group` defines the * title of group that is displayed in the menu, and `placeholders` is an * array that holds the groups placeholders. * * Note that grouping is only a visual thing, placeholder values must still * be unique! * * [ * { * group: 'Group 1', * placeholders: [ * {label: 'Placeholder 1', value: 'PLACEHOLDER_1'}, * {label: 'Placeholder 2', value: 'PLACEHOLDER_2'} * ] * }, * { * group: 'Group 2', * placeholders: [ * {label: 'Placeholder 3', value: 'PLACEHOLDER_4'}, * {label: 'Placeholder 4', value: 'PLACEHOLDER_5'} * ] * }, * // ... * ] */ placeholders: [], // Defines the delimiter that indicates the start of a placeholder startDelimiter: '{', // Defines the delimiter that indicates the end of a placeholder endDelimiter: '}', /** * Defines the type of UI element that holds the placeholders. Either * `button` or `combo`. */ uiType: 'button' }; ``` ### Modifying the list of placeholders at runtime [](#modifying-the-list-of-placeholders-at-runtime) The available placeholders can be modified at runtime using the instance of the `PlaceholdersCollection` class associated with the corresponding plugin instance. Changes made to this collection are automatically being applied to the editor UI and content. ``` var editorIdentifier = 'editor1'; // in most cases this is the ID or // name of the DOM element replaced // by the editor var editor = CKEDITOR.instances[editorIdentifier]; var plugin = editor.plugins.placeholder_elements.instances[editor.id]; /** @type {PlaceholdersCollection} */ var placeholders = plugin.placeholders; ``` Add a new placeholder ``` var placeholder = {label: 'Foo', value: 'FOO'}; placeholders.add(placeholder); ``` Add a new placeholder to an existing group (or append a new group in case it doesn't exist yet) ``` var placeholder = {label: 'Foo', value: 'FOO', group: 'Bar'}; placeholders.addToGroup(placeholder); ``` Remove the third placeholder ``` placeholders.removeAt(2); ``` Modify an existing placeholder ``` var placeholder = placeholders.getAt(2); placeholder.label = 'New Label'; placeholders.replaceAt(2, placeholder); ``` For more check out the [`PlaceholdersCollection` class](https://github.com/ndm2/ckeditor-placeholder-elements/blob/master/plugin.js)source. **Note** that applying multiple consecutive changes can lead to flickering, due to the nature of `change` events causing UI and content updates. Make use of the `PlaceholdersCollection.batchChanges()` method to avoid this, changes made from the callback passed to this method will cause only a single `change` event to be fired afterwards. ``` placeholders.batchChanges(function() { this.replaceAt(2, {label: 'Foo', value: 'FOO'}); this.add({label: 'Bar', value: 'BAR'}); }); ``` Issues ------ [](#issues) Please use the [issue tracker](https://github.com/ndm2/ckeditor-placeholder-elements/issues) to report problems. License ------- [](#license) Licensed under [The MIT License](http://www.opensource.org/licenses/mit-license.php). ### Health Score 33 — LowBetter than 75% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity21 Limited adoption so far Community10 Small or concentrated contributor base Maturity68 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~608 days Recently: every ~822 days Total 7 Last Release 765d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/f0a4de55b3128733c4c0250c70b241f3d7446dd18ce44060974507bce40b62ee?d=identicon)[ndm2](/maintainers/ndm2) --- Top Contributors [![ndm2](https://avatars.githubusercontent.com/u/5031606?v=4)](https://github.com/ndm2 "ndm2 (27 commits)") --- Tags ckeditorckeditor-pluginplaceholderpluginCKEditorplaceholder ### Embed Badge ![Health badge](/badges/ndm2-ckeditor-placeholder-elements/health.svg) ``` [![Health](https://phpackages.com/badges/ndm2-ckeditor-placeholder-elements/health.svg)](https://phpackages.com/packages/ndm2-ckeditor-placeholder-elements) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)