CKEditor in vue js

Question

hallo i ck-Editor für jetzt in meiner .vue Datei verwende ich bin

<script> 
$(document).ready(function() { 
    CKEDITOR.replace('content', { 
     extraPlugins: 'mathjax', 
     mathJaxLib: 'http://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js? 
     config=TeX-AMS_HTML', 
     height: 320, 
    }); 
}); 

meinen ckeditor in meinem home.blade.php in Dokument bereit Initialisieren ... aber wenn ich auf einer Seite werde, wo ckeditor verwendet Router platziert

<router-link to="/question/create"> 
    <a class="btn btn-primary"> 
     <i class="fa fa-plus" aria-hidden="true"></i> 
     <span class="nav-label">New Question</span> 
    </a> 
</router-link> 

ckeditor wird nicht der Textbereich geladen Mittel wird nicht ersetzt

screen shot of editor not being replaced

, aber wenn ich die Seite manuell am Nachladen wird es ersetzt fein ..

screen shot of editor being replaced after reloading the page

ich versuchte

import './../../txt/ckeditor.js 

an der Spitze meiner Datei aber die diesen Fehler geben ...

Uncaught SyntaxError: Unerwartetes Token < app.js: 72554 Uncaught Typeerror: Kann nicht gesetzt Eigenschaft ‚dir‘ undefinierter

denke ich, von einem der DIR-Editor ... mir bitte helfen, wenn ich es falsch mache ...

ich habe gelesen, dass ich es habe nenne es angebracht Haken, aber ich weiß nicht, wie ..

oder in der Arbeit um, was ich tun kann, ist die Seite mit

this.$router.go(this.$router.currentRoute) 

neu zu laden, aber ich kann nicht herausfinden, wo um dies anzurufen, wenn ich es in eingehängter Hook die Seite k rufe eeps Nachladen auch versucht

window.location.href 

aber das Ergebnis ist das gleiche das Textfeld nicht mit ckditor

Answer 1

ersetzt wird denke ich, dass die Verwendung von $(document).ready(function()... die Ursache ist. Verwenden Sie stattdessen die mounted() - Methode von Vue.

<script> 
    mounted() { 
    CKEDITOR.replace('content', { 
     extraPlugins: 'mathjax', 
     mathJaxLib: 'http://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js? 
     config=TeX-AMS_HTML', 
     height: 320, 
    }); 
} 
</script>