如何从tinymce-vue的包装中获取正确的内容?

时间:2018-11-01 09:51:33

标签: vue.js tinymce

我正在尝试围绕tinymce-vue包创建包装。但是,v模型的内容似乎总是比编辑器的实际内容落后一个字符。

我也尝试使用onKeyUp事件,但是例如当用户使用工具栏上的按钮添加粗体字时,这种情况会丢失。

<tinymce :id="'create_discussion_content'" v-model="form.content"></tinymce>    

<template>
    <editor :init="init" :plugins="plugins" :toolbar="toolbar" :id="id" :initial-value="value" @onSelectionChange="updateContent()" v-model="content"></editor>
</template>

<script>
    export default {
        props: ['id', 'value'],

        mounted()
        {
            this.content = this.value;
        },

        data()
        {
            return {
                content: null,
                init: 
                {
                    height: 200,
                    menubar: false,
                    statusbar: false,
                },
                plugins: 'hr, image, link, lists, textcolor',
                toolbar: [
                    'undo redo | removeformat forecolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | link image',
                ],
            }
        },

        methods:
        {
            updateContent()
            {
                this.$emit('input', this.content);
            }
        }
    }
</script>

0 个答案:

没有答案