Integration for VueJs

[makenskiy]

Hi, this example for VueJS. May be need for community. I's work for me.

Componet editor

<template>
    <article>
        <textarea :id="id"></textarea>
    </article>
</template>

<script>
    import SirTrevor from 'sir-trevor/build/sir-trevor';
    import icon from 'sir-trevor/build/sir-trevor-icons.svg';

    export default {
        name: 'c-editor',
        props: {
            id: {
                type: String,
                default: 'js-st-instance'
            }
        },
        data() {
            return {
                el: null,
                editor: null
            };
        },
        methods: {
            save() {
                this.editor.onFormSubmit();
            },
            update(value) {
                this.el.value = value;
                this.editor.reinitialize();
            }
        },
        mounted() {
            this.el = document.getElementById(this.id);
            if (!this.el) return false;
            this.editor = new SirTrevor.Editor({
                el: this.el,
                defaultType: ['Text', 'Image'],
                 iconUrl: icon
            });
        }
    };
</script>

Page

<template>
    <div>
        ....................... other form ......................
        <c-editor ref="editor"></c-editor>
        <b-button @click="bSave()">
            Save
        </b-button>
    </div>
</template>

<script>
    export default {
        data() {
            return {};
        },
        methods: {
            bSave() {
                if (this.$refs.editor) {
                    this.$refs.editor.save();
                    this.model._data.text.ru = JSON.stringify(this.$refs.editor.editor.store.retrieve());
                }
            }
        },
        updated() {
            if (this.$refs.editor) this.$refs.editor.update(this.model._data.text);
        }
    };
</script>

I not found event "watch live data" to make this.$emit() simple code.

[raffij]

This is the correct way to get and restore data for now.

[raffij]

I also saw someone had submitted a couple of prs:

editor.restore(data) and editor.getData() which does what you are looking for so i'll merge those into the next release.

[makenskiy]

Thank. It will be wonderful.