CKEditor 4 button for dropdown
I found two separate plugins: StrInsert
and Placeholder
. The first plugin creates a dropdown menu where strings are inserted and the second plugin placeholder.
here is a screenshot for the plugin StrInsert
:
and for the Placeholder
plugin:
There have been so many questions on the web asking for a similar feature (To create a dropdown inserting a placeholder) , but there is no solution / plugin out there that provides this feature. Here's the link for the plugins: StrInsert and Placeholder
I asked this question on the forum ckeditor
. But, just in case someone else has done this before, I need your help.
===================== EDIT =============================== ============
Here's what StrInsert
it does,
When you click on one of the dropdown menu, it will paste text
into the editor. However, instead of pasting text
, I want it to insert Placeholder
.
Placeholder
can be inserted using another plugin called Placeholder
, how is it different from text
? It has a yellow background color and most importantly, the user cannot erase the letter
source to share
Yes, it can and can be done with what you already have.
In conclusion, the Placeholder plugin does a good job of representing placeholders as standalone yellow elements, and the StrInsert plugin offers a convenient way to insert predefined strings from a dropdown list rather than being entered by the user in a dialog box.
Hence a simple solution to get the best out of both is StrInsert to insert placeholder strings. It works when you describe and use the standard functionality of each plugin.
Steps:
-
Start with both plugins installed as standard. I don't think I need to describe this bit here.
-
The StrInsert plugin allows you to define its string values in a plugin script file. Instead of putting regular lines in there, add your lines in placeholder format.
eg. Change the default lines below ...
// array of strings to choose from, which will be inserted into the editor var strings = []; strings.push (['@@ FAQ :: displayList () @@', 'FAQs', 'FAQs']); strings.push (['@@ Glossary :: displayList () @@', 'Glossary', 'Glossary']); strings.push (['@@ CareerCourse :: displayList () @@', 'Career Courses', 'Career Courses']); strings.push (['@@ CareerProfile :: displayList () @@', 'Career Profiles', 'Career Profiles']);
to make them the desired placeholders ...
// array of strings to choose from, which will be inserted into the editor var strings = []; strings.push (['[[Something]]', 'Something', 'Something']); ...
-
Finally, if you don't need a Placeholder button, you can remove it (just a button) using the normal config.js entry in the ckeditor folder. There may already be a removeButtons line where you can add CreatePlaceholder, but it will look something like this anyway:
config.removeButtons = 'CreatePlaceholder';
source to share
I know this is a bit outdated, but I created a plugin to do exactly this task.
I have created a Subscriber Dropdown Tokens Plugin for CKEditor. It works in much the same way as the strinsert plugin Simon talks about, albeit with more flexibility.
You can pass config including "format" (in case you don't want to use pleceholder plugin format). It uses the default placeholder format [[something]], but it can use something else (like {{something}}).
Placeholder tokens can be passed as a JavaScript array via configuration. The plugin will do everything for you.
I hope this helps
source to share
Try the Token Insertion plugin . It creates a dropdown list with pre-configured values. You can customize the value, its name in the dropdown and insert prefix / postfix characters of the value
source to share