Question

如何在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>

Answer 1

我知道这很晚了，但是如果有人遇到相同的问题。

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是带有选项的数组。

如何在vue-ckeditor2中使用自动完成插件

1 个答案: