试图将占位符添加到CKeditor 4，但没有任何运气

Posted 2021-04-11

我只是试图为某些ckeditor配置某些设置，并且没有运气。首先，我有一个有效的views/assets/javascripts/ckeditor/config.js，但这是一个“全局”配置文件。

在我的rails应用程序中的某些视图中，我想要其他设置，例如占位符。我不确定版本4是否包含了一些与旧版本相比的大量更改，但这里是我使用的其他一些stackoverflow引用：

How do I add a placeholder attribute to an instance of CKEditor?

这个特别建议使用CKEDITOR.replace("myeditor" , config );来替换占位符，但这对我不起作用。当我用我的textarea元素的ID替换“myeditor”时，例如：CKEDITOR.replace("randomTextAreaID" , {placeholder: "Hello World"} );，我收到此错误：

未捕获编辑器实例“randomTextAreaID”已附加到提供的元素。

还有其他建议从2012年开始显示为“黑客”，但那是6年前。无法想象为文本编辑器设置占位符会很困难。

**编辑**

所以我让它像这样工作：

var editor = CKEDITOR.instances['randomTextAreaID'];
if (editor) { editor.destroy(true); }
CKEDITOR.replace( 'randomTextAreaID', {
height: 20, 
});

但仍然看起来像尝试设置占位符不起作用。

我还下载了占位符插件并将其放在这里：views/assets/javascripts/ckeditor/plugins/placeholder但仍然没有运气。没有javascript加载错误，只是根本无法正常工作。

答案

如果您想使用占位符，请将此plugin添加到您的CKEditor构建中。由于占位符需要也有几个依赖项的插件，我建议使用online builder。只需选择您的包（例如标准），添加占位符插件，构建器将处理依赖关系。接下来下载缩小版本。

一旦你有了工作，你需要在实例配置中添加占位符（config.js是全局配置，而replace方法中的配置是特定于实例的）：

CKEDITOR.replace( 'randomTextAreaID', {
height: 20, 
extraPlugins : 'placeholder'
});

可以使用占位符对话框插入占位符。它们还会自动更改（例如您的初始内容）文本，如[[any text]]到占位符。要使用更多技术术语 - 此文本将被添加到占位符widget。

另请参阅占位符演示：https://sdk.ckeditor.com/samples/placeholder.html