CkEditor在vue js

时间:2017-10-06 12:20:15

标签: javascript vue.js ckeditor vuejs2

嗨我现在在我的.vue文件中使用ck编辑器

<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,
    } );
});

在我的home.blade.php中初始化我的ckeditor准备就绪文件...但是当我在使用路由器放置ckeditor的页面上时

<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意味着文本区域未被替换

screen shot of editor not being replaced

但是当我手动重新加载页面时,它会被替换为罚款..

screen shot of editor being replaced after reloading the page

我试过

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

位于我的文件顶部,但它给出了此错误...

未捕获的SyntaxError:意外的令牌&lt; app.js:72554 Uncaught TypeError:无法设置未定义的属性'dir'

我想从其中一位编辑的主... 如果我做错了,请帮助我......

我读到我称之为挂钩,但我不知道怎么做..

或围绕我可以做的工作是使用

重新加载页面
this.$router.go(this.$router.currentRoute)

但我找不到在哪里调用这个,如果我在挂钩中调用它,页面一直在重新加载也试过

window.location.href

但结果是相同的textarea没有被ckditor替换

1 个答案:

答案 0 :(得分:0)

我认为使用$(document).ready(function()...是原因。尝试使用Vue的mounted()方法。

<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>