我写过不少单页vue 2文件，但从未尝试过使用"组件";之前。有人能帮我找出代码的问题吗?我得到的错误是"编辑器未定义"。每个例子都有你导入vue模块，但我不使用构建器，所以我认为只是包括脚本(s)将工作。我已经删除了很多多余的代码，使它更容易阅读(我希望)。
<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>。
每个例子都有你导入vue模块，但我不使用构建器，所以我认为只是包括脚本(s)将工作。
导入.vue文件的示例使用构建系统自动编译vue-loader文件。在本例中，您使用的是来自CDN的预编译脚本，因此不需要加载器，但您确实需要引用tinymce-vue脚本定义的正确符号。
tinymce-vue脚本将其导出设置在window.TinymceVue上。预构建的Editor.vue组件恰好以与根导出相同的名称导出:window.TinymceVue.TinymceVue。
tinymce-vue的Editor组件为:
<script>
new Vue({
components: {
editor: window.TinymceVue.TinymceVue,
}
})
</script>