Невозможно связать YoastSEO.js с текстовой областью Ckeditor 5 - PullRequest
Новая
       7

Невозможно связать YoastSEO.js с текстовой областью Ckeditor 5

0 голосов
/ 20 ноября 2018

Поиск решения для привязки текстовой области Ckeditor к полю контента Yoast, чтобы он мог извлекать из него содержимое.

Код для 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 для yoast.Ошибка не отображается, но длина текста остается 0.

Попытка использовать editorinstance, но функция addEventListener не работает с ней.

Любая помощьоценили!

...