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/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>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./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./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
Share Improve this question asked Apr 22, 2015 at 8:10 DingDongDingDong 751 silver badge14 bronze badges 4- What have you tried already? The only code you have is a code that initialises an editor. I advise you to read official guides like CKEditor plugin SDK and CKEditor Widgets SDK after which you should not have any problems in changing the placeholder plugins according to your needs. – Reinmar Commented Apr 22, 2015 at 12:51
- 1 Yes, the code provided initializes an instance including the Placeholder plugin. I was just wondering, if it is mentioned on the CKEditor docs ("...drop-down list with pre-defined options..." see link) then either because it is a mon thing to do or they forgot to add some sample snippet? I guess I will have to go through the dev docs. Thanks – DingDong Commented Apr 23, 2015 at 5:25
- Did you ever find an answer? I'm running into the same issue, they indicate that it's possible but there's no documentation on how to do this... – Stephane Grenier Commented Jun 30, 2015 at 17:13
- Just added the solution I found below. – Stephane Grenier Commented Jul 3, 2015 at 18:27
4 Answers
Reset to default 4With 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./#!/api/CKEDITOR.dialog.definition.select
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./cke4/addon/placeholder_select
The following blog post by Zachary Olson explains how to do it: https://zolson.wordpress./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
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.