[英]How to use Autocomplete Plugin with vue-ckeditor2
如何在vue中与ckeditor一起使用自动完成插件。 如何在哪里配置显示其选项的键,以及如何将建议列表传递给自动完成功能,如https://docs.ckeditor.com/ckeditor4/latest/guide/dev_autocomplete.html所述 。
我一直在尝试这种方法,但无法使其正常工作。
这是我的模板:
<template>
<div class="content-w">
<div class="content-i">
<div class="content-box">
<div class="row">
<div class="col-sm-12">
<div class="element-wrapper">
<h6 class="element-header">Create Post</h6>
<div class="element-content">
<div class="element-wrapper">
<div class="">
<vue-ckeditor v-model="content" :config="config" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import VueCkeditor from 'vue-ckeditor2';
Vue.use(VueCkeditor);
export default {
data() {
return {
content: '',
config: {
toolbar: [
{ name: 'basicstyles', items: [ 'Bold', 'Italic','Underline'] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'document', items: [ 'Source', '-',] },
{ name: 'image', items: [ 'Image', '-',] },
{ name: 'links', items : [ 'Link','Unlink' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
{ name: 'styles', items : [ 'Styles','Format'] },
],
height: 300,
extraPlugins: ['autocomplete','textmatch'],
}
}
},
methods: {
},
created(){
}
}
</script>
我知道这已经晚了,但是如果有人遇到同样的问题。
vue-ckeditor支持instanceReadyCallback,我们可以添加您的ckeditor实例,然后使用该功能绑定自动完成功能。
<vue-ckeditor v-model="content" :config="config" :instanceReadyCallback="ckEditorReadyCallback"/>
然后编写如下函数:
ckEditorReadyCallback(readyEvent){
var config = {};
function textTestCallback( range ) {
if ( !range.collapsed ) {
return null;
}
return CKEDITOR.plugins.textMatch.match( range, matchCallback );
}
function matchCallback( text, offset ) {
var left = text.slice( 0, offset ),
match = left.match( /{\d*$/ );
if ( !match ) {
return null;
}
return {
start: match.index,
end: offset
};
}
config.textTestCallback = textTestCallback;
function dataCallback( matchInfo, callback ) {
var query = matchInfo.query;
var suggestions = itemsArray.filter( function( item ) {
return String( item.id ).indexOf( query ) == 0;
} );
callback( suggestions );
}
config.dataCallback = dataCallback;
config.itemTemplate = '<li class="myclass2" data-id="{id}" >{label}</li>';
config.outputTemplate = '{label}';
new CKEDITOR.plugins.autocomplete( readyEvent.editor, config );
},
其中itemsArray是具有您的选项的数组。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.