javascript - 未捕获的类型错误：无法读取未定义的属性“autocomplete_commitKeystrokes”

Question

再会; 我的问题是 Ckeditor 上的一个错误：我有一个 laravel 项目。CKeditor 4.16 库已下载。并将其添加到项目中。我正在尝试执行自动完成功能，并且根据文档，必须下载一些插件。我已经添加了以下插件：

• 自动完成
• 文本观察器
• 文本匹配

但是，当按照此处的文档示例进行操作时。我无法让自动完成功能工作，因为它在控制台上引发以下错误： 错误 ckeditor 在 app.blade.php 文件中，我这样调用 ckeditor：

<script src="{{asset('assets/vendor/ckeditor/ckeditor.js')}}"></script>
    <script>
       // CKEDITOR.replace('taskEditor');
       // CKEDITOR.replace('input-firm');
        CKEDITOR.replace('body',{
            filebrowserUploadUrl: 'ckeditor/ck_upload.php',
            filebrowserUploadMethod: 'form'.anchor,
        })
    </script>

Y en mi vista donde debo mostrar los datos esta asi:

 @extends('layouts.app')
@section('content')
    <div class="form-group row">
                                        <label for="" class="col-sm-3 col-form-label">Cuerpo del email <span class="text-red">*</span></label>
                                        <div class="col-sm-12">
                                            <textarea type="text" class="form-control form-control-sm "
                                                id="body"
                                                >
                                                <strong>{{ auth()->user()->firm }}</strong>
                                            </textarea>
                                        </div>
                                    </div>

    @endsection
    <script>
       var config = {};
       // Called when the user types in the editor or moves the caret.
        // The range represents the caret position.
        function textTestCallback( range ) {
            // You do not want to autocomplete a non-empty selection.
            if ( !range.collapsed ) {
                return null;
            }
    
            // Use the text match plugin which does the tricky job of performing
            // a text search in the DOM. The matchCallback function should return
            // a matching fragment of the text.
            return CKEDITOR.plugins.textMatch.match( range, matchCallback );
        }
    
        // Returns the position of the matching text.
        // It matches a word starting from the '#' character
        // up to the caret position.
        function matchCallback( text, offset ) {
            // Get the text before the caret.
            var left = text.slice( 0, offset ),
                // Will look for a '#' character followed by a ticket number.
                match = left.match( /#\d*$/ );
    
            if ( !match ) {
                return null;
            }
            return { start: match.index, end: offset };
        }
    
        config.textTestCallback = textTestCallback;
    
        // The itemsArray variable is the example "database".
    var itemsArray = [
        // (...)
        { id: 1703, name: 'Mentions plugin', type: 'feature' },
        { id: 1751, name: 'Autocomplete plugin', type: 'feature' },
        { id: 1746, name: 'Emoji plugin', type: 'feature' },
        { id: 2062, name: 'Emoji list button', type: 'feature' }
        // (...)
    ];
    
    // Returns (through its callback) the suggestions for the current query.
    function dataCallback( matchInfo, callback ) {
        // Remove the '#' tag.
        var query = matchInfo.query.substring( 1 );
    
        // Simple search.
        // Filter the entire items array so only the items that start
        // with the query remain.
        var suggestions = itemsArray.filter( function( item ) {
            return String( item.id ).indexOf( query ) == 0;
        } );
    
        // Note: The callback function can also be executed asynchronously
        // so dataCallback can do an XHR request or use any other asynchronous API.
        callback( suggestions );
    }
    
    config.dataCallback = dataCallback;
    
    config.itemTemplate = '<li data-id="{id}" class="issue-{type}">#{id}: {name}</li>';
    //config.outputTemplate = '<a href="https://github.com/ckeditor/ckeditor4/issues/{id}">{name} (#{id})</a> ';
    config.throttle = 200;
    config.autocomplete_commitKeystrokes = [ 9, 13 ];
    
    new CKEDITOR.plugins.autocomplete( body, config );
    
    </script>

如果有人可以帮助我或告诉我如何解决此错误或有如何使用 ckeditor 实现自动完成的示例。谢谢

标签： javascriptlaravelautocompleteckeditor4.x