CODEWITHSUNDEEP
javascriptdrop-down-menuckeditorplaceholder
DingDong
DingDong

Reputation: 75

CKEditor: Placeholder with pre-defined values

This is a regular script to load the placeholder facility into your CKEditor:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
    <!-- CK Editor -->
    <script src="//cdn.ckeditor.com/4.4.7/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea id="email_message_new"></textarea>
<script language="javascript">
	var ck_edit_new = CKEDITOR.replace('email_message_new', {
		extraPlugins: 'placeholder',
		height: 220
	});
</script>
</body>
</html>

Second: I am trying to load pre-defined values into CKEditor's Placeholder modal. It should look somehow like this Screenshot which was asked here (http://ckeditor.com/forums/CKEditor-4-Add-Ons/Modifying-the-placeholder-plugin)

Third: CKEditor Docs says about the Placeholder customization:

You could, for example, customize the dialog window to show a drop-down list with pre-defined options that can be selected to fill the placeholder.

Unfortunately nothing can be found in their reference/docs. I would like to know, what would be a "no-hack" (for instance by editing placeholder/plugin/config.js) approach to get a dropdown menu into the Placeholder Modal window.

Any help is appreciated Thanks

Upvotes: 3

Views: 7190

Answers (4)

Troyka
Troyka

Reputation: 111

know that this thread is a bit old, but I had the same need and created a plugin to do exactly what you're after. It's not using Angular but it's flexible enough to be configured via Angular.

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.

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

Upvotes: 1

M4tini
M4tini

Reputation: 446

With CKEditor 4 you can extend the placeholder plugin without core changes or custom addons. The code below will change the placeholder input to a select like your screenshot:

CKEDITOR.on('dialogDefinition', function(event) {
  if ('placeholder' == event.data.name) {
    var input = event.data.definition.getContents('info').get('name');
    input.type = 'select';
    input.items = [ ['Company'], ['Email'], ['First Name'], ['Last Name'] ];
    input.setup = function() {
      this.setValue('Company');
    };
  }
});

Source: http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition.select

Upvotes: 4

saint
saint

Reputation: 64

Starting from Stephane answers, I arrived to a slightly different solution. The basic idea I adopted is to wait until the editor object exist and then re-register the dialog. Acting this way I do not risk to have my changes overwritten when the plugin code is updated.

I implemented this idea working with angular.js . In my project I borrowed a co-worker module where the the ckeditor was included this way in the modulename-index.html:

<div ckeditor="editorOptions" ng-model="obj.editorModel" ready="onReady()" />

Therefore when i hacked (as in "hack'n'slash", not as in "clever hacking") i defined the onReady() function by dumping in the CHECKEDITOR.dialog.add() call contained in the plugin placeholder.js and then changed the element type and added the array of items.

Upvotes: 0

Stephane Grenier
Stephane Grenier

Reputation: 15925

The following blog post by Zachary Olson explains how to do it: https://zolson.wordpress.com/2011/04/19/ckeditor-placeholder-select/

You basically edit the file placholder/dialog/placeholder.js and change the type from text to select and then add the items you want as shown in the following code:

type : 'select',
items : [ [ 'meetingTime' ], [ 'meetingLocation' ] ],
'default' : 'meetingTime',

That's the gist of it, but you can get more details on his blog post

Upvotes: 0

Related Questions