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-vue
的 Editor
组件为:
<script>
new Vue({
components: {
editor: window.TinymceVue.TinymceVue,
}
})
</script>
我写了很多单页 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-vue
的 Editor
组件为:
<script>
new Vue({
components: {
editor: window.TinymceVue.TinymceVue,
}
})
</script>