带有 vuejs 的 trumbowyg 编辑器答案

【问题标题】：trumbowyg editor with vuejs带有 vuejs 的 trumbowyg 编辑器
【发布时间】：2016-12-21 19:32:08
【问题描述】：

我在我的 vuejs spa 中使用trumbowyg 编辑器控件。从the documentation知道可以使用下面的代码来设置编辑器的内容。

$('#editor').trumbowyg('html','<p>Your content here</p>'); 
$('#editor').trigger('tbwchange');

但是，它不适用于我的 VueJs 应用程序。我有一个定义了描述键的对象。我可以console.log 描述，但是当我尝试将它分配给上面提到的编辑器控件时，它失败了。我在console 中看不到任何错误，但文本不会显示在编辑器中。

这就是我现在要做的事情。

<template>
    <div class="modal fade"  data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span v-if="anouncement">Edit Anouncement</span>
                        <span v-else>New Anouncement</span>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="text" placeholder="enter anouncement summary here" class="form-control" v-model="anouncementObj.summary">
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="enter location here" class="form-control" v-model="anouncementObj.location">
                    </div>
                    <textarea class="note-view__body" id="anonDescription" v-model="description" placeholder="enter event description"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" v-on:click="clear()" class="btn btn-link" data-dismiss="modal">Close</button>
                    <button type="button" v-on:click="performSave()" class="btn btn-link">Save</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props : {
            anouncement : Object
        },
        data() {
            return {
                anouncementObj :{}
            }
        },
        mounted () {
            this.makeTextBoxReady();
            this.anouncementObj = Object.assign({},this.anouncementObj, this.anouncement || {});
                $('#anonDescription').trumbowyg('html',this.anouncement.description); 
                $('#anonDescription').trigger('tbwchange');
                console.log(this.anouncement.description);
        },
        methods : {
            makeTextBoxReady: function() {
                $(document).ready(function() {
                    if (!$('html').is('.ie9')) {
                        if ($('.note-view__body')[0]) {
                            $('.note-view__body').trumbowyg({
                                autogrow: true,
                                btns: [
                                    'btnGrp-semantic', ['formatting'],
                                    'btnGrp-justify',
                                    'btnGrp-lists', ['removeformat']
                                ]
                            });
                        }
                    }
                });
            },
            performSave : function() {
                let description = $('#anonDescription').trumbowyg('html');

                let formData = new FormData();
                for (name in this.anouncementObj) {
                    formData.append(name, this.anouncementObj[name]);
                }

                if( !this.anouncementObj.id) {
                    this.anouncementObj.id = 0;
                }

                formData.append('description',description);

                this.$http.post('/admin/anouncement/createOrUpdate', formData).then(response => {
                    // console.log(response);
                    if(response.data.status==200) {
                        alert(response.data.message);
                        this.$emit('getAnouncements');
                    }
                })
            },
            clear: function() {
                this.anouncementObj= {};
            }

        }
    }
</script>

你能告诉我我在这里做错了什么吗？我也尝试过nexttick 方法，但即使这样也行不通。

【问题讨论】：

我建议进入$('#anonDescription').trumbowyg('html',this.anouncement.description); 以查看执行了哪些代码并制作另一个更简单的示例，其中相同的方法有效，也进入它，找出这两个对我们关键方法的调用之间的不同之处.

标签： vue-component vue.js vuejs2

【解决方案1】：

我让它工作了。我没有使用正确的引导模式 ID。请参阅此related question 了解更多信息。

这是正确的代码。

if(this.anouncementObj && this.anouncementObj.description && this.anouncementObj.id) {
   $('#'+this.anouncementObj.id+' #anonDescription').trumbowyg('html',this.anouncementObj.description); 
   $('#'+this.anouncementObj.id+' #anonDescription').trigger('tbwchange');
}

【讨论】：