CKEditor：具有预定义值的占位符答案

【问题标题】：CKEditor: Placeholder with pre-defined valuesCKEditor：具有预定义值的占位符
【发布时间】：2015-06-29 17:56:59
【问题描述】：

这是一个将占位符功能加载到 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>

第二：我正在尝试将预定义的值加载到 CKEditor 的占位符模式中。它应该看起来像这里问的Screenshot (http://ckeditor.com/forums/CKEditor-4-Add-Ons/Modifying-the-placeholder-plugin)

第三： CKEditor Docs 谈到了占位符自定义：

例如，您可以自定义对话窗口以显示带有可以选择填充的预定义选项的下拉列表占位符。

很遗憾，在他们的参考资料/文档中找不到任何内容。我想知道，在 Placeholder Modal 窗口中获取下拉菜单的“无破解”（例如通过编辑 placeholder/plugin/config.js）方法是什么。

任何帮助表示赞赏谢谢

【问题讨论】：

你已经尝试了什么？您拥有的唯一代码是初始化编辑器的代码。我建议您阅读CKEditor plugin SDK 和CKEditor Widgets SDK 等官方指南，然后根据您的需要更改占位符插件应该没有任何问题。
是的，提供的代码初始化了一个包含占位符插件的实例。我只是想知道，如果在 CKEditor 文档中提到它（“...带有预定义选项的下拉列表...”请参阅link），那么要么是因为这是一件常见的事情，要么他们忘记了添加一些示例 sn-p？我想我将不得不通过开发文档。谢谢
你找到答案了吗？我遇到了同样的问题，他们表示这是可能的，但没有关于如何做到这一点的文档......
刚刚添加了我在下面找到的解决方案。

标签： javascript drop-down-menu ckeditor placeholder

【解决方案1】：

使用 CKEditor 4，您可以扩展 placeholder 插件，而无需更改核心或自定义插件。下面的代码会将占位符输入更改为像您的屏幕截图一样的选择：

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');
    };
  }
});

来源：http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition.select

【讨论】：

您知道如何在 onClick 事件中提交 input.type = 'radio' 值吗？如果我尝试在通过单击确定按钮激活的提交事件上提交值，则您的示例工作正常，但如果我使用 onClick 事件则不起作用。
这应该作为一个新问题提出，但我可以帮助你。您可以监控收音机的点击并模拟点击 OK 按钮。如果您使用的是 jQuery，请在 input.setup 函数中添加以下内容：$('.cke_dialog_ui_radio_input').on('click', function(){ $('.cke_dialog_ui_button_ok')[0].click(); });

【解决方案2】：

Zachary Olson 的以下博客文章解释了如何做到这一点：https://zolson.wordpress.com/2011/04/19/ckeditor-placeholder-select/

您基本上编辑文件placholder/dialog/placeholder.js 并将类型从文本更改为选择，然后添加您想要的项目，如以下代码所示：

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

这是它的要点，但您可以在his blog post获得更多详细信息

【讨论】：

【解决方案3】：

从 Stephane 的回答开始，我得出了一个稍微不同的解决方案。我采用的基本思路是等到编辑器对象存在后再重新注册对话框。以这种方式行事，我不会冒险在更新插件代码时覆盖我的更改。

我使用 angular.js 实现了这个想法。在我的项目中，我借用了一个同事模块，其中 ckeditor 以这种方式包含在 modulename-index.html 中：

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

因此，当我进行黑客攻击时（如“hack'n'slash”，而不是“聪明的黑客攻击”），我通过转储插件占位符中包含的 CHECKEDITOR.dialog.add() 调用来定义 onReady() 函数.js 然后更改元素类型并添加项目数组。

【讨论】：

【解决方案4】：

知道这个线程有点老了，但我也有同样的需求，并创建了一个插件来完全满足您的需求。它没有使用 Angular，但它足够灵活，可以通过 Angular 进行配置。

我为 CKEditor 创建了“Placeholder Tokens From Dropdown”插件。它的工作方式与 Simon 所说的 strinsert 插件大致相同，但灵活性更高。

您可以传入包含“格式”的配置（以防您不想使用 pleceholder 插件格式）。它默认使用占位符格式 [[something]]，但可以使用其他任何内容（例如 {{something}}）。

占位符标记可以通过配置作为 JavaScript 数组传入。该插件将为您完成剩下的工作。

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

【讨论】：