【问题标题】:(VueJS) TinyMCE Error : Cannot read property 'getContent' of null(VueJS) TinyMCE 错误:无法读取 null 的属性“getContent”
【发布时间】:2021-06-08 05:43:05
【问题描述】:

好的,所以我正在 vuejs 中使用 tinymce 开发所见即所得的编辑器。在我将 v-model 放在 tinymce html 标记上之前,一切工作正常。 v-model 的值是从 loadData 方法(来自 api)获取的,所以当从 api 加载数据时它会更新值。它总是显示错误“无法读取 null 的属性 'getContent'”,但是,即使它总是出错,有时 loadData 方法的值会在 tinyMCE 编辑器中加载,但有时不会加载。那么,这里发生了什么?我的代码有问题吗?

(下面是html代码)

<div v-show="sideMenuIndex == 11">
<h1>Descriptions (Bio)</h1>
<div class="columns">
    <div class="column col-10">
            <tinymce :toolbar1="'undo redo | bold italic'" v-model="form.bio"></tinymce>
    </div>
</div>

(下面是vue.js的初始代码)

var app = new Vue({
el: '#form-place',
data: {
    sideMenuIndex: 0,
    search: '',
    bio: 'Ini adalah testing',
    form: {
        _id: null,
        name: '',
        slug: '',
        city: 'bandung',
        address: '',
        categories: [],
        menu_categories: [],
        parkir: '',
        bio: '',
        is_draft: true,
        is_partner: false,
        is_halal: true,
        is_sticker: false,
        photo: null,
        cuisines: [],
        payments: [],
        facilities: [],
        covid: [],
        galleries: [],
        operational_times: [
            {day: 'Senin', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
            {day: 'Selasa', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
            {day: 'Rabu', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
            {day: 'Kamis', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
            {day: 'Jumat', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
            {day: 'Sabtu', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
            {day: 'Minggu', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
        ],
        call_to_actions: [
            {type: "gmaps", value: '', draft: false},
            {type: "whatsapp", value: '', draft: false},
            {type: "instagram", value: '', draft: false},
            {type: "web", value: '', draft: false},
            {type: "grabfood", value: '', draft: false},
            {type: "gofood", value: '', draft: false},
            {type: "checkin", value: '', draft: false},
            {type: "linkmenu", value: '', draft: false},
        ],
        payment_detail: []
    },

(下面是loadData方法代码)

 loadPlace: async function () {
        if (!placeId) return;
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('nav'))
            this.sideMenuIndex = urlParams.get('nav')
        try {
            const res = await fetch(`/api/v1/places/${placeId}`);
            const data = await res.json();
            this.form = data.data;
            this.options.data = 'https://emam.id/qr/' + this.form.slug;
            this.form.categories = this.form.categories.map(e => ({id: e.id, text: e.name}));
            this.form.payments = this.form.payments.map(e => ({code: e.code, text: e.name}));
            if (this.form.parkir)
                this.form.parkir = this.form.parkir.id;
            this.formFieldValues.payments = this.form.payments;
            this.loadGalleriesFromData();
            this.loadPhotoFromData();
        } catch (error) {
            console.log(error);
        }
    },

(未加载 v-model 值时的图片) Picture1

加载 v-model 值时的图片 Picture2

【问题讨论】:

    标签: vue.js tinymce wysiwyg


    【解决方案1】:

    看起来这是您使用的vue-easy-tinymce 代码的问题:

    https://github.com/m3esma/vue-easy-tinymce/issues/3

    ...但我会注意到代码在 3 年内没有收到更新,因此可能不再维护。

    TinyMCE 提供了自己的 Vue 包装器,该包装器得到积极维护,因此我建议改用该组件:

    https://github.com/tinymce/tinymce-vue https://www.tiny.cloud/docs/integrations/vue/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-05-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-11-02
      • 2016-02-12
      • 2021-11-07
      • 1970-01-01
      相关资源
      最近更新 更多