无法将YoastSEO.js与Ckeditor 5 textarea绑定

时间:2018-11-20 08:54:34

标签: javascript ckeditor yoast

寻找将Ckeditor文本区域绑定到Yoast的contentfield的解决方案,以便它可以从其中获取内容。

Ckeditor 5的代码。

var editorinstance;
    ClassicEditor.create(document.querySelector('#editor'), {

        ckfinder: {
            uploadUrl: '{{ url("article-image-upload") }}?_token={{ csrf_token() }}'
        },
        mediaEmbed: {
            // configuration...
        }
    }).then(editor => {
        editorinstance = editor;

        editor.model.document.on('change', () => {

            document.querySelector('#counter').innerText = 'Length of the text in the document: ' + countCharacters(editor.model.document);
        });
        //    editor.model.document.on( 'keyup', () => {
        //          document.querySelector('#counter').innerText = 'Length of the text in the document: ' + countCharacters( editor.model.document );
        //              } );
        // Update the counter when editor is ready.
        document.querySelector('#counter').innerText = 'Length of the text in the document: ' + countCharacters(editor.model.document);
        //editor.isReadOnly = true;
        //   var dataaaa = editor.getData();
        //  console.log(dataaaa)


    })
        .catch(error => {
            console.error(error);
        });

YoastSEO.js的代码

    var focusKeywordField = document.getElementById( "focusKeyword" );
    var contentField = document.getElementById( "editor" );

    var snippetPreview = new YoastSnippetPreview({
        targetElement: document.getElementById( "snippet" ),
        baseURL: "{{url('/')}}/",
        placeholder:{
            urlPath:"slug goes here"
        }
    });

    var app = new YoastApp({
        snippetPreview: snippetPreview,
        targets: {
            output: "output"
        },

        callbacks: {
            getData: function() {
                return {
                    keyword: focusKeywordField.value,
                    text: contentField.value
                };
            }
        }
    });

    app.refresh();

    focusKeywordField.addEventListener( 'change', app.refresh.bind( app ) );
    contentField.addEventListener( 'change', app.refresh.bind( app ) );

现在,问题出在这行,

var contentField = document.getElementById( "editor" );

它不会绑定CKEditor5文本区域。它没有显示任何错误,但文本长度仍为0。

试图使用editorinstance,但是addEventListener函数无法使用。

感谢您的帮助!

0 个答案:

没有答案