Question

请尝试使用代码段。

我在Vue Router中有很多组件，每个组件都有自己的TinyMCE编辑器来编辑内容。但是，TinyMCE仅针对第一个加载的路由器显示。控制台中出现错误：Permission denied to access property "document"只有在我一起使用TinyMCE和Vue时才会出现，我不知道这是否是我问题的原因。

如果有人有解决方案我会批评！

我在jsfillde上有另一个版本的问题：http://jsfiddle.net/tranduyhung/NF2jz/5105/。我在jsfiddle没有收到错误Permission denied to access property "document"。

＆＃13;

var Foo = Vue.extend({
    template: '#foo',
  	ready: function() {
      // This doesn't help
      //tinyMCE.remove()

      tinyMCE.init({selector: "#tinymcefoo"})

      // This is not working
      //tinyMCE.execCommand('mceAddControl', false, '#tinymcefoo');
      //tinyMCE.execCommand('mceAddEditor', false, '#tinymcefoo');
    }
})

var Bar = Vue.extend({
    template: '#bar',
  	ready: function() {
      // This doesn't help
      //tinyMCE.remove()

      tinyMCE.init({selector: "#tinymcebar"})

      // This is not working
      //tinyMCE.execCommand('mceAddControl', false, '#tinymcefoo');
      //tinyMCE.execCommand('mceAddEditor', false, '#tinymcefoo');
    }
})

var App = Vue.extend({})
var router = new VueRouter()

router.map({
    '/foo': {
        component: Foo
    },
    '/bar': {
        component: Bar
    }
})

router.redirect({
  '*': '/foo'
})

router.start(App, '#app')

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.7/vue-router.min.js"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>


<div id="app">
  <p>Menu: <a v-link="{ path: '/foo' }">Working</a> | <a v-link="{ path: '/bar' }">Not working</a></p>
  <hr>
  <router-view></router-view>
  
<script type="text/x-template" id="foo">
  <p>Working</p>
  <textarea id="tinymcefoo"></textarea>
</script>

<script type="text/x-template" id="bar">
  <p>Not working</p>
  <textarea id="tinymcebar"></textarea>
</script>
</div>

＆＃13;

Answer 1

只需将tinyMCE初始化一次，就可以在应用程序开始时进行

tinceMCE.init({
  mode: 'none'
});

使用Vue的 ready 和 beforeDestroy 事件在每次初始化时重新加载编辑器

var Foo = Vue.extend({
  // ...
  ready: function() {
    tinyMCE.execCommand('mceAddEditor', true, 'tinymcebar'); // id without '#'
  },
  beforeDestroy: function() {
    tinyMCE.execCommand('mceRemoveEditor', true, 'tinymcebar');
  }
}

链接到updated jsfiddle

Answer 2

是的我找到了这样的解决方案：

// load tinymce placeholder plugin from from local static file
tinymce.PluginManager.load('placeholder', '/static/js/tinymce/plugins/tinymce-placeholder.plugin.js');

以下是我的TinyMceComponent的完整来源： https://github.com/Doogiemuc/liquido-vue-frontend/blob/master/src/components/TinyMceComponent.vue

Answer 3

尝试为textareas提供相同的类，并选择该类作为选择器：

<textarea id="tinymcefoo" class="my_editor"></textarea>
<textarea id="tinymcebar" class="my_editor"></textarea>

准备使用

tinyMCE.init({selector: ".my_editor"});

VueJS + TinyMCE：TinyMCE只显示一次

3 个答案: