在CKEditor的自动完成列表 [英] Autocomplete lists in CKEditor
问题描述
我需要将功能添加到我的CKEditor给点建议用户，当他类型文件'＃'，建议可以根据页面上的一些其他领域的动态更改。请大家帮忙
I need to add a functionality to my CKEditor to give suggestions to user when he types '#' in document, the suggestions can change on the fly depending on some other fields on the page. please help
推荐答案
为了使一个意见箱，你必须让你的自定义插件使用上下文菜单意见箱，请查看链接的基本知识从这里制作的CKEditor插件的
In order to make a suggestion box, you will have to make your custom plugin to use context menu as suggestion box, please check out the link for the basic knowledge of making ckeditor plugin from here a link
添加到您的config.js，这里是自动完成的插件名称
Add this to your config.js, where autocomplete is name of the plugin
config.extraPlugins = 'autocomplete';
然后创建了CKEditor的文件夹下面的目录结构/文件
Then create a following directory structure/file in the ckeditor folder
ckeditor->plugins->autocomplete->plugin.js
把下面的内容你plugin.js文件
Put the following content in your plugin.js file
CKEDITOR.plugins.add('autocomplete',
{
init : function(editor) {
var autocompleteCommand = editor.addCommand('autocomplete', {
exec : function(editor) {
我们将需要在文档中创建一个虚拟跨度来计算菜单的当前位置中显示
We will need to create a dummy span in the document to calculate the current position of the menu to be shown
var dummyElement = editor.document
.createElement('span');
editor.insertElement(dummyElement);
var x = 0;
var y = 0;
var obj = dummyElement.$;
while (obj.offsetParent) {
x += obj.offsetLeft;
y += obj.offsetTop;
obj = obj.offsetParent;
}
x += obj.offsetLeft;
y += obj.offsetTop;
dummyElement.remove();
计算的位置后，我们删除元素，并调用显示的建议（放置在上下文菜单，这是在接下来的功能配置）方法
After calculation the position, we remove the element and call the method to show the suggestions (placed in the context menu, which are configured in next function)
editor.contextMenu.show(editor.document
.getBody(), null, x, y);
}
});
},
下面是编辑器监听绑定检查当前键是＃与否， CKEDITOR.SHIFT + 51是＃组合键
Here is the listener bind on editor to check whether the current key is a # or not, CKEDITOR.SHIFT + 51 is the key combination for #
afterInit : function(editor) {
editor.on('key', function(evt) {
if (evt.data.keyCode == CKEDITOR.SHIFT + 51) {
editor.execCommand('autocomplete');
}
});
reloadSuggetionBox 命令将来自外部的jQuery调用生成菜单刚过CKEditor的准备
reloadSuggetionBox command will be called from your external jquery to generate the menu just after the ckeditor is ready
var firstExecution = true;
var dataElement = {};
editor.addCommand('reloadSuggetionBox', {
exec : function(editor) {
if (editor.contextMenu) {
dataElement = {};
editor.addMenuGroup('suggestionBoxGroup');
$.each(Suggestions,function(i, suggestion)
{
var suggestionBoxItem = "suggestionBoxItem"+ i;
dataElement[suggestionBoxItem] = CKEDITOR.TRISTATE_OFF;
editor.addMenuItem(suggestionBoxItem,
{
id : suggestion.id,
label : suggestion.label,
group : 'suggestionBoxGroup',
icon : null,
onClick : function() {
var data = editor.getData();
var selection = editor.getSelection();
var element = selection.getStartElement();
var ranges = selection.getRanges();
ranges[0].setStart(element.getFirst(), 0);
ranges[0].setEnd(element.getFirst(),0);
editor.insertHtml(this.id + ' ');
},
});
});
if(firstExecution == true)
{
editor.contextMenu.addListener(function(element) {
return dataElement;
});
firstExecution = false;
}
}
}
});
delete editor._.menuItems.paste;
},
});
下面建议是变量present某处页面保存有一个'身份证'和'标签'对象的名单上显示的建议。
Here "Suggestions" is the variable present somewhere on your page with holds a list of object having a 'id' and 'label' to be shown in suggestion.
现在，为了配置这些建议，请执行以下的jQuery code，在此之后，每当'＃'是pressed，建议将显示
Now in order to configure these suggestions, please perform the following jquery code, after this, whenever '#' is pressed, suggestions will be shown
$('textarea').ckeditor();
CKEDITOR.on( 'instanceReady', function( evt ) {
CKEDITOR.instances.contractData.execCommand('reloadSuggetionBox');
});
这将加载CKEditor的（contractData是我CKEditor的实例的名称），并配置插件显示的建议目前present INT的建议的变量，任何时候你需要刷新/改变你只需要调用的建议重装建议后，此功能变量
This will load the ckeditor(contractData is name of my ckeditor instance) and configure the plugin to show suggestions currently present int the "Suggestions" variable, anytime you need to refresh/change the suggestions you just need to call this function after reloading "Suggestions" variable
CKEDITOR.instances.contractData.execCommand('reloadSuggetionBox');
让你得到得到这个工作的任何问题，我知道了。
Let me know if you get any problem on getting this working.
查找我的回购可下载的插件，在
Find the downloadable plugin at my repo at
<一个href=\"http://navalgandhi1989.github.io/ckeditor-autocomplete-suggestions-plugin/\">http://navalgandhi1989.github.io/ckeditor-autocomplete-suggestions-plugin/
这篇关于在CKEditor的自动完成列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
