manuelgeek / vuejs-medium-editor Goto Github PK

prefill for default data is difference with v-model and i think this is very bad idea that v-model is not two way data binding specially when bind data on api calling
is any way to use v-model to two way binding?

Hi,
It would be great to have the ones (un-minified CSS) in place, not only production version.
Thank you.

Whenever an image is inserted as the first item, I get this error:

TypeError: Cannot read property 'getBoundingClientRect' of null
    at VueComponent.addImage (InsertImage.vue?8e1b:83)
    at VueComponent.inputFile (InsertImage.vue?8e1b:133)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
    at VueComponent.emitFile (vue-upload-component.js?8019:1343)
    at VueComponent.update (vue-upload-component.js?8019:1323)
    at eval (vue-upload-component.js?8019:1355)

It looks like this line is the issue:

It would be great if there was an option to hide the gist icon for the insert embed!

Hi, thank you for providing this package.

I have set up all the configurations, but when running the app, I encountered an error that says
runtime-dom.esm-bundler.js:36 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nextSibling')
along with many warnings.

Is there any specific configuration that needs to be set up for using this package with Vue3?

Also, do you have any sandbox or example that uses this package with Vue3?

If you add an image and then delete the image, the image description box does not go away:

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:

Lead to this part:

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

This one leads me to this:

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

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

If I click, another error:

Leads to this:

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 🧑🏾‍💻

Hi i have trouble when i click in the writing section i have to double click to write inside and i get an error

BTW my prefill content is rtl blocked how can i solve this ?

It would be great if inputFilter could be provided as its own prop. I'd like to use this so that I could have images post to s3:

https://stackoverflow.com/questions/58426265/upload-file-to-s3-bucket-vue-upload-component

It would be great if there was a way to have a callback function that could handle uploading the images instead of just a URL to post to. This way you could handle custom upload scenarios, like uploading to S3, where you can't just give a url to post to.

Apparently tui2tone/gist-embed (aka pure-gist-embed) hasn't been updated for several years now.
It pulls axios with a known security vulnerability:

Maybe it's time to replace it (?)

If I click once, then "Write something great!!" goes away, but then I need to click again to have the cursor show up and to be able to begin typing.

When you start a new document, the image/gist buttons are hard to see and are over the preview text, and don't work if you click them:

All of the props for vue-upload-component are fixed (such as the max file size being 10 MB). It would be great if these could be customized!

I attempted to play around with the the demo at https://manuelgeek.github.io/vuejs-medium-editor/

However, when I type fast or press delete/control-delete in freezes and starts cranking up my processor (fan turns on immidiately).

Also, following the setup example doesn't guide in the readme produces something vastly different to what's in the demo. Could you provide the code for the demo as an example?

Thanks for making this!

Hi there,

Is it possible to disable the insert-image-container?
(the plus sign infront of the line that your typing in that allows for image/video upload and code snippets)

Could this support Markdown or plan to support? Thanks!

I wanted to suggest a feature request for the plugin: the ability to embed videos, whether embedded from YouTube or from a public folder. Right now, we can embed images, but I think having the ability to embed videos would be a great addition.

This feature would make the editor more versatile and user-friendly, allowing users to easily include video content in their text, regardless of the source. It would be a big win for anyone looking to create content-rich experiences with your plugin,

Thanks for your work on this plugin!

Hello
The package is heavy and slows down the rendering of the sites.

Could this be improved by minifying css and js in some way?

Result in https://bundlephobia.com/

Thanks

First of all i would to thank the team for the great job,
So the question is there a way to add a color option

Hey

Am I misunderstanding the instructions?
when I click the image icon here

I choose a picture from my local directory but nothing is rendered and the uploaded call back isn't triggered?

<template>
    <div>
        <medium-editor 
            v-model="content" 
            :options="options" 
            :onChange="onChange" 
            @uploaded="uploadCallback"
            :hideGist ="true"
             />
    </div>
</template>

<script>
import Editor from 'vuejs-medium-editor'

export default {
    name: 'ArticleWrite',
    data() {
        return {
            content: '',
            options: {
                toolbar: {
                    buttons: [
                        'bold',
                        'italic',
                        'underline',
                        'quote',
                        'h1',
                        'h2',
                        'h3',
                        //'pre',
                        'unorderedlist',
                        'orderedlist',
                        'justifyLeft',
                        'justifyCenter',
                        'justifyRight',
                        'anchor',
                        {
                                name: "image",
                                action: "image",
                                aria: "insert image from url",
                                tagNames: ["img"],
                                contentDefault: "<b>image</b>",
                                contentFA: '<i class="fa fa-picture-o"></i>'
                            }
                    ]
                },
            }
        }
    },
    components: {
        'medium-editor': Editor,
    },
    methods: {
        onChange() {
            console.log(this.content)
        },
        uploadCallback(url) {
            console.log('uploaded url', url)
        },
    },
}
</script>

<style scoped></style>

thanks in advance for any guidance

Hi,

I use this plugin in Nuxt.js, and it works. But the problem I met is content binding is not correct.

<script>
export default {
  data() {
    return {
      content: "Hello, world!",
      editorOptions: {
        toolbar: {
          buttons: [
            "bold",
            "italic",
            "underline",
            "quote",
            "h1",
            "h2",
            "h3",
            "h4",
            "h5",
            "unorderedlist",
          ],
        },
      },
    };
  },
};
</script>

<template>
  <medium-editor
    :content="content"
    :options="editorOptions"
  />
</template>

According to the official sample, if I use :content="content" to bind, it doesn't work, which means Hello, world! won't show up on the web page, and content won't be changed according to my input. I tried :value="content", it's the same. So I have to try v-modal="content", a little better, content could be changed according to my input, but Hello, world! still won't show up when this page is just loaded.

I use medium editor in vue2 component.
<medium-editor :prefill="text2"
v-model="content"
:options="options"
:hideImage="true"
:hideGist ="true"
:hideVideo ="true"
:onChange="onChange"/>
where:
text = props,
text2 = text.

I need to cleaer and restore text by button click to 'text'.
When I try to make this.content = this.text or this.content = '' the 'content' still not refresh.
How can I do this.

Whenever I upload a large image, no request goes out to imgur and nothing ever happens-- it seems to fail silently.

I think it would be great if a preview of an image showed while uploading, maybe with a spinner to indicate that it was uploading?

Hello
When you delete all content there are always these html tags left <p><br></p>.
Is there any way that when you delete everything, the content is completely empty?
Thanks