manuelgeek / vuejs-medium-editor

A medium like text editor for vue js WYSIWYG
https://manuelgeek.github.io/vuejs-medium-editor/
MIT License
135 stars 36 forks source link

Nice wrapper, but it seems to be broken. #69

Closed hebertlima closed 1 year ago

hebertlima commented 1 year ago

After following all the installation steps, it seems to be working, but in the console, I got a lot of strange errors.

Right after loading the page: image

Lead to this part: image

When I type something inside the editor, I get another error. image

This one leads me to this: image

Inside this component, I have a button with this code:

back() {
    Inertia.get(route('articles.index'))
}

If I click, another error: image

Leads to this: image

here is the code:

import MediumEditor from 'vuejs-medium-editor'
import 'medium-editor/dist/css/medium-editor.css'
import 'vuejs-medium-editor/src/themes/default.css'

# template
<MediumEditor :options='options' v-model="form.content" :prefill='form.defaultValue' :hide-gist="false" :hideImage="false" :onChange="onChange" />
<button @click="back">Back</button>
# inside data(){}
coverPreview: null,
form: {
    content: null,
    defaultValue: `<h1><br /></h1>`,
},
options: {
    uploadUrl: "https://api.imgur.com/3/image",
    uploadUrlHeader: { 'Authorization': 'Client-ID a3tw6ve4wss3c' },
    file_input_name: "image",
    file_size: 1024 * 1024 * 10,
    imgur: true,
    buttonLabels: 'fontawesome',
    targetBlank: true,
    placeholder: {
        hideOnClick: false,
    },
    toolbar: {
        buttons: ["bold", "italic", "underline", "strikethrough", "h1", "h2", 'unorderedlist', 'orderedlist', "indent", "outdent", 'anchor', {
            name: 'image',
            action: 'image',
            aria: 'insert image from url',
            tagNames: ['img'],
            contentDefault: '<b>image</b>',
            contentFA: '<i class="fa fa-picture-o"></i>'
        }]
    },
}
I am using Laravel 8 with Inertia and Vue 3:

"vue-loader": "^17.0.1",
"@vue/compiler-sfc": "^3.2.45",
"@vuelidate/core": "^2.0.0",
"@inertiajs/inertia": "^0.11.0",
"@inertiajs/inertia-vue3": "^0.6.0",
"vue": "^3.2.31"
"vuejs-medium-editor": "^1.2.6"

Did anyone manage to use it? Every help is welcome 🧑🏾‍💻

manuelgeek commented 1 year ago

@hebertlima I've not tried any Vue 3 support for this, I can check it out, if you do a fix, a PR is welcome

manuelgeek commented 1 year ago

@hebertlima I just did a release to support version 3 check at README.md file for instructions

https://www.npmjs.com/package/vuejs-medium-editor