时间戳

首页 > 解决方案 > 单页 TinyMCE VUE 配置问题

vue.js - 单页 TinyMCE VUE 配置问题

问题描述

我有 TinyMCE 在单页应用程序中工作，如下所示：

<script src="https://cdn.jsdelivr.net/npm/vue@2.X/dist/vue.js"></script>
<script src="https://cdn.tiny.cloud/1/XXXXXXXXXXX/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.jsdelivr.net/npm/tinymce-vue/dist/tinymce-vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tinymce-vue@1.0.0/dist/tinymce-vue.css">
<div id="vue_app">
  ...
  <section v-if="showeditor">
  ...
  <label for="description">Description:</label>
  <input style="font-family:arial;font-size:14px;height:600px;" class="detail_update form-control" id="description" name="description" type="text" v-model="editrow.description" />
  <div id="hideme" style="height:0;overflow:hidden;">
  <editor  name="description" style="width:500px;" apiKey="XXXXXXXX" v-model="editrow.description" id="description" init="{
  height: 600, menubar: true,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
  ...{more settings}
  }"> </editor>
  </div>
  ...
</section>
<script>
var app = new Vue({
el: '#vue_app',
    data() {
        return {
            rows: [],
            ...
    },
    components: {
        'editor': window.TinymceVue.TinymceVue
    },
...

运行应用程序时显示的内容除了 content_style 没有遵循之外，我强制它为 600px 的唯一方法是将其包含在上面的输入行中。而且我认为我什至不应该有上面的输入行，但是当我删除它时，编辑器会完全消失。下面的示例输出图像。

截屏

我猜我遗漏了一些关键的东西或者没有正确地做一些事情，但是在网上几乎没有这样的代码示例。任何帮助表示赞赏。

标签： vue.jsvuejs2tinymce

解决方案

推荐阅读