CODEWITHSUNDEEP
jqueryckeditor
Edwin
Edwin

Reputation: 825

CKEditor 4 Dropdown Button to Insert Placeholder

I found two separated plugins: StrInsert and Placeholder. The first plugin create dropdown menu that insert string and the second plugin insert placeholder.

here's the screenshot for StrInsert plugin: strinsert

and for Placeholderplugin: enter image description here

There has been so many questions on the Internet asking for similar function (To make a dropdown that insert a placeholder), yet there's no solution/ plugin that provides this functionality. Here's the link for the plugins: StrInsert and Placeholder

I have asked this question on ckeditor forum too. But, just in case somebody else here has done this before, I need your help.

============================EDIT =========================================

Here's what StrInsert does, enter image description here when one of the dropdown menu is clicked, it will insert a text into the editor. However, instead of inserting a text, I want it to insert a placeholder.

Placeholder can be inserted using another plugin called PlaceHolder, how is it differ from text? It has yellow background color and most importantly, the user can't erase the letter enter image description here

Upvotes: 3

Views: 2992

Answers (3)

Aliaksei Vinahradau
Aliaksei Vinahradau

Reputation: 1335

Try Token Insertion plugin. It creates select dropdown with preconfigured values. You can config value, it's name in dropdown list and inserted value prefix/postfix symbols

Upvotes: 0

Troyka
Troyka

Reputation: 111

I know that this is a bit old, but I created a plugin to do exactly this task.

I've created the "Placeholder Tokens From Dropdown" plugin for CKEditor. It works in much the same way as the strinsert plugin that Simon is talking about, although with more flexibility.

You can pass in a config including a 'format' (in case you don't want to use the pleceholder plugins format). It uses the placeholder format by default [[something]], but can use anything else (For example {{something}}).

The placeholder tokens can be passed in as a JavaScript array via the config. The plugin will do the rest for you.

I hope that this helps

https://ckeditor.com/cke4/addon/placeholder_select

Upvotes: 1

S__
S__

Reputation: 513

Yes this can be done, and can be done with what you already have.

In summary - the Placeholder plugin does a nice job of representing the placeholders as self contained yellow elements, and the StrInsert plugin offers a convenient method of inserting pre-defined strings from a drop-down list rather than having the user type them into a dialog.

Therefore, a simple solution to get the best of both is to use both - StrInsert to insert placeholder strings. It works as you describe and uses the standard functionality of each plugin.

Steps as follows:

  1. Start with both plugins installed as standard. I don't think I need to describe that bit here.

  2. The StrInsert plugin allows you to define its string values within its plugin script file. Instead of putting regular strings in there, add your strings in placeholder format.

    e.g. Change the default strings below...

    // array of strings to choose from that'll 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 your desired placeholders...

    // array of strings to choose from that'll be inserted into the editor var strings = []; strings.push(['[[Something]]', 'Something', 'Something']); ...

  3. Finally, if you don't need the Placeholder button as well then you can remove it (just the button) by using the entry in the normal config.js in the ckeditor folder. There may already be a removeButtons line in there that you can add CreatePlaceholder to, but in any case it'll look something like this:

    config.removeButtons = 'CreatePlaceholder';

Upvotes: 4

Related Questions