Vue 2 + TinyMCE 单页混乱

Vue 2 + TinyMCE Single Page Confusion

我写了很多单页 vue 2 文件,但以前从未尝试过使用“组件”。有人可以帮助发现我的代码的问题吗?我收到的错误是“未定义编辑器”。那里的每个示例都让您导入 vue 模块,但我没有使用构建器,所以我认为只包含脚本就可以了。我删除了很多无关的代码以使其更易于阅读(我希望如此)。

<script src="https://cdn.jsdelivr.net/npm/vue@2.X/dist/vue.js"></script>
...
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.jsdelivr.net/npm/tinymce-vue/dist/tinymce-vue.min.js"></script>


<div id="vue_app">
...
        <div v-show="showtable">
            ...
            <table class="tbdesign">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    ...
                    <th>Func</th>
                </tr>
                <tr v-for='row in filteredRows' :key="row.property_id">
                    <td :id="row.property_id">{{row.property_id}}</td>
                    <td>{{ row.name }}</td>
                    ...
                    <td><div v-on:click="editRow(row.property_id)" href="#">Edit</div>
                    </td>
                </tr>
            </table>
        </div>
    </section>
    <section v-if="showeditor">
        <div >
          ...
          <form>
                <div>
                    
                        <div>
                            <label for="name">Name:</label> <input class="detail_update  id="name" type="text" v-model="editrow.name" />
                        </div>
            
                        ...
                    
                        <div class="form-group col">
                            Description:<br>
                             <editor
                               apiKey="no-api-key"
                              v-model="editrow.description"
                              :init="{
                                height: 500,
                                menubar: true,
                                plugins: [
                                  'advlist autolink lists link image charmap',
                                  'searchreplace visualblocks code fullscreen',
                                  'print preview anchor insertdatetime media',
                                  'paste code help wordcount table'
                                ],
                                toolbar:
                                  'undo redo | formatselect | bold italic | \
                                  alignleft aligncenter alignright | \
                                  bullist numlist outdent indent | help'
                              }"
                            >
                            </editor>
                        </div>
                    
                        <div class="form-group col">
                            <button v-on:click="submitData" type="button">Save</button> 
                        </div>
                   
                </div>
            </form>
       </div>
...
</div>
<script type="module">
    var app = new Vue({
        el: '#vue_app',
        data() {
            return {
                rows: [],
                row: [],
                ...
                editrow: [],
                ...
                errors: []               
            }
        },
        components: {
           'editor': Editor 
        },
        mounted() {
            this.init();
        },
        computed: {
            ...
        },
        methods: {
            init() {
                this.loading = true;
                axios.get('/dap/api/?/functions/get_properties/')
                .then(response => {
                    this.rows = response.data;
                    console.log(response.data);
                    this.showtable = true;
                })
                .catch(function(error) {
                    this.errored = true;
                    alert(error);
                })
                .finally(() => this.loading = false)
            },
            
            ...
            checkData() {
                ...
            },
            submitData() {
                ...
            },
            editRow(rowID) {
                for (var i = 0; i < this.rows.length; i++) {
                    if (this.rows[i]['property_id'] == rowID) {
                        this.editrow = this.rows[i];
                        this.showeditor = true;
                        this.showtable = false;
                        break;
                    }
                }
            }
        }
    });
</script>

Editor 实际上并没有在您的代码中的任何地方定义,并且 <script type="module"> 使用严格模式,要求预先声明所有引用的变量。由于 Editor 变量不存在,脚本立即失败并显示您观察到的错误。但是,这里看起来您实际上并不需要 <script type="module">,因此您可以使用常规的 <script>.

Every example out there has you importing the vue module but I'm not using a builder so I thought just including the script(s) would work.

导入 .vue 文件的示例使用构建系统自动编译带有 vue-loader 的导入。在这种情况下,您使用的是来自 CDN 的预编译脚本,因此不需要加载程序,但您需要引用 tinymce-vue 脚本定义的正确符号。

tinymce-vue 脚本将其导出设置为 window.TinymceVue。预先构建的 Editor.vue 组件恰好被导出为与根导出相同的名称:window.TinymceVue.TinymceVue.

所以你应该在本地注册 tinymce-vueEditor 组件为:

<script>
new Vue({
  components: {
    editor: window.TinymceVue.TinymceVue,
  }
})
</script>

demo