【发布时间】：2021-08-05 08:08:30
【问题描述】：
我正在使用 tinymce 作为组件来创建和编辑文章
https://www.tiny.cloud/docs/integrations/vue/
我也在使用 vuetify 和组件 v-dialog，我所有的表单都在这个模式中
但是，每次我更改 tinymce 组件的实例时，我都必须通过更改 key 属性来重新加载组件
我认为一个例子更相关
我在开发环境中有一个 Web 服务
https://service-dev.alexisgatuingt.fr/
id：test@stackoverflow.com
通过：p@ssw0rd！
复制：
- 转到“文章”部分
- 打开模态“Créer unarticles”（编辑器位于底部）
- 关闭对话框
- 并用
mdi-pencil图标打开编辑模式
编辑器里终于没有内容了，我得点击“Relancer l'éditeur”来加载内容
“投资组合”部分也是如此
你可以创建、编辑、删除任何你想要的，这是一个开发环境
这是我的代码（简化）：
modal.vue (modal 的根组件)
<template>
<div :style="`z-index:${index} !important; display: inherit`">
<!-- scroll bar = 15px -->
<v-dialog v-model="dialog" persistent transition="dialog-top-transition" :hide-overlay="hideOverlay"
:max-width="maxWidth" overlay-color="primary">
<v-form v-model="formValidation" ref="form" lazy-validation enctype='multipart/form-data'
:retain-focus="false">
<slot name="content"></slot>
</v-form>
</v-dialog>
<div style="display: inherit" @click="dialog = true">
<slot></slot>
</div>
</div>
</template>
创建.vue
<template>
<modal title="Créer un article" description="Pour créer un article, renseigner les champs ci-dessous : "
v-on:submit="submit" ref="modal" show-cancel label="Enregistrer">
<slot></slot>
<template v-slot:content>
<v-btn @click="reload">Relancer l'éditeur</v-btn>
<v-col cols="12" @focusin.stop>
<editor id="create-article" :key="key" :api-key="apiKey" v-model="request.content"
:init="editorOptions"></editor>
</v-col>
</template>
</modal>
</template>
<script>
import {editorOptions, apiKey} from "&/plugins/editor";
import {generateRandomKey} from "@/utils";
export default {
name: "create",
data() {
return {
key: '',
apiKey,
editorOptions,
request: {
content: '',
},
}
},
methods: {
submit() {
},
reload() {
this.key = generateRandomKey();
},
}
}
</script>
edit.vue
<template>
<modal title="Modifier l'article" description="Pour modifier cet article, renseigner les champs ci-dessous : "
v-on:submit="submit" ref="modal" show-cancel label="Enregistrer">
<slot></slot>
<template v-slot:content>
<v-btn @click="reload">Relancer l'éditeur</v-btn>
<v-col cols="12" @focusin.stop>
<editor :id="item.slug" :api-key="apiKey" :key="key" v-model="request.content"
:init="editorOptions"></editor>
</v-col>
</template>
</modal>
</template>
<script>
import {editorOptions, apiKey} from "&/plugins/editor";
import {generateRandomKey} from "@/utils";
export default {
name: "edit",
props: {
item: {
type: Object,
required: true,
}
},
data() {
return {
key: '',
apiKey,
editorOptions,
request: {
content: '',
},
}
},
mounted() {
this.request.content = this.$props.item.content ?? '';
},
methods: {
reload() {
this.key = generateRandomKey();
},
submit() {
},
}
}
</script>
<style scoped>
</style>
editor.js
import store from '&/store';
import {mixin} from '@/store/mixin';
import Crud from "&/api/crud";
const MediaController = new Crud('media');
let imagesList = [];
MediaController.list({
perPage: 999,
search: 'image',
page: 1,
}).then((r) => {
r.data.forEach(e => imagesList.push({
title: e?.oldName,
value: e?.url
}));
})
let method = mixin(store).methods;
const toolbar = ['searchreplace h1 h2 h3 h4 h5 h6 bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo', 'removeformat subscript superscript code codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'];
const plugins = ['advlist anchor autolink autosave code codesample directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textpattern visualblocks visualchars wordcount'];
const editorOptions = {
//selector: "textarea",
height: 500,
image_uploadtab: true,
menubar: true,
relative_urls: false,
remove_script_host: false,
convert_urls: true,
images_upload_credentials: true,
image_list: imagesList,
images_upload_handler: (blobInfo, success, failure, progress) => {
let form = new FormData();
form.append('file', blobInfo.blob(), blobInfo.filename());
form.append('type', "image/*");
form.append('old_name', blobInfo.filename());
MediaController.add(form).then((r) => {
success(r.data.url);
}).catch((e) => {
method.showError(e);
failure("Un problème est survenu");
})
},
plugins,
toolbar,
}
const apiKey = '#######################';
export {editorOptions, apiKey}
模态激活器
<component is="edit"> // can be create
<v-btn color="primary">
Modifier
</v-btn>
</component>
更新：
我也试过
mounted() {
this.$nextTick(() => {
this.$watch(
() => this.$refs.modal.dialog,
(v) => v ? this.reload() : null,
)
});
},
提前谢谢你
【问题讨论】：
标签： javascript vue.js vuejs2 tinymce vuetify.js