ankurk91 / vue-trumbowyg

Vue.js component for Trumbowyg WYSIWYG editor :memo:
https://ankurk91.github.io/vue-trumbowyg/
MIT License
236 stars 35 forks source link

Editor content gets wrapped with " #13

Closed burzum closed 6 years ago

burzum commented 6 years ago

I'm submitting a ... (check one with "x")

[x] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ ] Other, please describe

Tell about your platform

Current behavior When sending the content I see that for some reason the content of the editor gets wrapped in ". So if I simply enter test it ends up as "test" when the request is send. Next time I reload the page it ends up with the " inside the editor.

image

I've even tried to use a computed property and to strip the " but it always ends up with the ".

    methods: {
        // Helper method to workaround
        // https://github.com/ankurk91/vue-trumbowyg/issues/13
        trim: (s, c) => {
            if (c === "]") c = "\\]";
            if (c === "\\") c = "\\\\";
            return s.replace(new RegExp(
                "^[" + c + "]+|[" + c + "]+$", "g"
            ), "");
        }
    },

    computed: {
        // Workaround for
        // https://github.com/ankurk91/vue-trumbowyg/issues/13
        editorContent: {
            get: () => {
                return this.trim(this.content.body, '"');
            },
            set: (value) => {
                this.content.body = this.trim(value, '"');
            }
        }
    },

Expected behavior

That only test is going out without the ".

Minimal reproduction of the problem with instructions

<template>
    <div class="cell medium-12">
        <label>
            Intro Text
        </label>

        <trumbowyg v-validate="'required'" v-model="content.body" :config="editorConfig" name="body"></trumbowyg>
        <validation-error field-name="body"></validation-error>

        <save-content :content="content"></save-content>
    </div>
</template>

<script>
import ValidateEventMixing from './ValidateEventMixin';
import ValidationError from './ValidationError.vue';
import SaveContent from './SaveContent.vue';
import Trumbowyg from 'vue-trumbowyg';

import 'trumbowyg/dist/ui/trumbowyg.css';

export default {
    name: 'PsaNewslettersIntroText',

    components: {
        SaveContent,
        ValidationError,
        Trumbowyg
    },

    mixins: [
        ValidateEventMixing
    ],

    props: {
        content: {
            body: ''
        },
    },

    data() {
        return {
            editorConfig: {
                svgPath: '/psa/newsletters/js/icons.svg',
                btns: [
                    ['undo', 'redo'], // Only supported in Blink browsers
                    ['strong', 'em'],
                    ['link'],
                    ['removeformat'],
                    ['fullscreen']
                ]
            }
        }
    }
}
</script>

<style scoped>
    textarea {
        min-height: 200px;
    }
</style>
burzum commented 6 years ago

Forget it, same issue with a regular input field. :(