Hey, thanks for your work.

I'd like to have a 'direction' option in the toolbar which
I easily added in the toolbar options, BUT I'd like to have
it ON by default (direction 'rtl')...
I think with Quill I could use the Quill.format('direction', 'rtl') method..
Could you expose the format method in your plugin or explain how I would
set a default value to a formatting option?

thanks!

how to insert tag a have attribute tel, mailto in custom toolbar?

I use two editor in one page, but only the second equal the first in end. In fact the two model is not same

I have this string defined in the vue data:

<p><strong>Lorem Ipsum</strong></p>
 <p>This is a test blah blah blah</p>
 <ul>
 <li>LIst item 1</li>
 <li>List item 2</li>
 <li>List item 3</li>
 </ul>

when I do @editor-updated="handleContent"
//method
handleContent = funcion(value){this.content = value}

The returned value doesn't have the list in it:

<p><strong>Lorem Ipsum</strong></p><p>
</p><p>This is a test blah blah blah</p><p>
</p><p>



</p>

Is it the plugin that's stripping the list out?

Using fastclick to get no focus, cancel fastclick can be done

VueEditor.vue.zip
ImageResize.js.zip

...
modules: {
toolbar: this.toolbar,
imageResize: {
displaySize: true
}
},
.....

sorry for my language but i'm trying to describe it as clearly as i could.
this is it, after I input the content and added to database and i use Vue.js and axios to get this content from database, the blank simble at the first line was all gone. how could i transfer my blank simble to   before i add them into database?
Thanks,bro

ReferenceError: window is not defined
at vue_ssr_bundle:2872:3582
at vue_ssr_bundle:2872:3514
at t.exports (vue_ssr_bundle:2872:3800)
at Object. (vue_ssr_bundle:2872:994)
at e (vue_ssr_bundle:2872:308)
at Object. (vue_ssr_bundle:2872:620)
at e (vue_ssr_bundle:2872:308)
at Object.i (vue_ssr_bundle:2872:556)
at e (vue_ssr_bundle:2872:308)

at t.__esModule.default (__vue_ssr_bundle__:2872:395)

I added one editor for summary and an other one for content. But while I type summary the editor for content also get that data.

http://imgur.com/a/06G71

If I try to do this -

<vue-editor   :editor-content="textvalue"   @editor-updated="textvalue" :use-save-button="false"  ></vue-editor>

the mouse allays goes to beginning of the text area , and if I type
abcdf

It will type
fdcba

the only way to solve that , is to make in differents data , one data to recive , and one data to send the new value . like this -

<vue-editor   :editor-content="textvalue1"   @editor-updated="textvalue2" :use-save-button="false"  ></vue-editor>

does have any how to solve that ?
Thanks

To use this version

            <vue-editor
              v-model="cidade.sobre"
              id_editor='sobre'
              css_style="height:200px"
              :use-save-button="false"
              :editor-toolbar="customToolbar"
              @editor-updated="handleUpdatedSobre">
            </vue-editor>

Code

<template>
  <div id="quillWrapper">
      <div :style=css_style :ref=id_editor :id=id_editor></div>
      <div v-if="showPreview" ref="livePreview" class="ql-editor"></div>
  </div>
</template>

<script>
import Quill from 'quill'
require('quill/dist/quill.core.css')
require('quill/dist/quill.snow.css')
var defaultToolbar = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'indent': '-1'}, { 'indent': '+1' }],
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  [{ 'color': [] }, { 'background': [] }],
  [{ 'font': [] }],
  [{ 'align': [] }],
  ['clean']
]
export default {
  name: 'vue-editor',
  props: {
    value: String,
    css_style: String,
    id_editor: String,
    placeholder: String,
    editorToolbar: Array,
    showPreview: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  data: function () {
    return {
      quill: null,
      editor: null,
      toolbar: this.editorToolbar ? this.editorToolbar : defaultToolbar
    }
  },
  mounted: function() {
    const vm = this
    let edt = "vm.$refs.".concat(this.id_editor);
    vm.quill = new Quill(eval(edt), {
      modules: {
        toolbar: this.toolbar
      },
      placeholder: this.placeholder ? this.placeholder : '',
      theme: 'snow'
    });

    let edt_css = "#"+this.id_editor+"> div ";
    vm.editor = document.querySelector(edt_css);
    if (vm.editorContent) {
      vm.editor.innerHTML = vm.editorContent
    }
    if ( vm.$refs.livePreview !== undefined || false ) {
      vm.quill.on('text-change', function() {
        vm.$refs.livePreview.innerHTML = vm.editor.innerHTML
        vm.$emit('input', vm.editor.innerHTML)
      });
    } else {
      vm.quill.on('text-change', function() {
        vm.$emit('input', vm.editor.innerHTML)
      });
    }
  },
  watch: {
    editorContent: function () {
      this.editor.innerHTML = this.editorContent
    }
  }
}
</script>

<style scoped>
#quill-container {
  height: 400px;
}
</style>

hello my friend . very nice code . Thanks for sharing with us .
I wold like to know how could I update like v-model="" , the data from the
I saw that have this code @editor-updated="" .
Bit is not updating the data .

{{ description }}
 <vue-editor  :editor-content="description"  @editor-updated="description"  :use-save-button="false" > </vue-editor> 

I wold like to update the description , while I typing in the text area .
Am I making something wrong ?

Thanks

How to import additional fonts to the toolbar? I read on this page that we need to use Quill object. How to do this using vue2-editor?

I use this editor with firebase, I use custom image handler when image uploaded and it will upload to firebase storage. But when the user remove the image, the image uploaded on firebase cannot be deleted.

How can I edit toolbar like this?

editorOption: {
        modules: {
          toolbar: [
            // [{ header: [1, 2, false] }],
            [ { header: 1 }, { header: 2 } ],
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [ { 'list': 'ordered' }, { 'list': 'bullet' } ],
            [ 'link', 'image' ]
          ]
        }
      }

ReferenceError: document is not defined

I am using this editor in CMS I am building and it kills the page and crashes the tab, page has to be reloaded.

It happens in one specific circumstance, when the editor is used with this component:

https://github.com/SortableJS/Vue.Draggable

This is the only wysisyg editor that crashes in my vue app when being used with draggable. If needed I can provide more information and video of it crashing.

Would love if developer would like to look into this.

After user remove everything from the editor, there is <p><br></p> left.

Should it be empty? Or you have some reasons for this?

hello,please list all the menus for toolbar ,,and can't it change fontsize?

how to set the style of the editor.
For example: set the width or height of container. Hide the toolbar.....

it can full screen ??
I need full screen editor，i do not know how full screen .
Could you tell me how to set it full screen .

--from China

thank you ....

Hi,

I am trying to use v-validate with following rules v-validate="{ rules: { required: true, min: 2 } }", on the vue-editor component but i get the error

TypeError: Cannot read property 'instance' of undefined at update (vee-validate.js:3569)

Anyone knows why? I am new to vue, so i hope it wont be something silly.

Thanks

I want to insert an image from an outside click button. How can I know the location of the cursor?

I used to using QuillJS.
I love that because I can custom editor by my self.
But I can I access Quill core? Can I apply hightlightjs styles into editor?

I would like to upload the image to server then editor only render the uploaded image.

Thanks for the component.

I try to create two independent component but it looks like the second one overwrites the another.

How can use this component several times in the same page but in a independent way?

Greetings

First of all, fantastic job on this component! It was seamless to integrate into my application.

The main issue I am running into is that the editor wraps each line in a paragraph tag, which is fine in most situations. However, when I insert a <ul>, <ol> list, I am unable to select them to apply my desired styling to the lists, because a nesting a list inside a paragraph tag is invalid html.

Could you add an ability to set the default html element used to wrap lines?

For example: set the default wrapper element to be <div>

<div>
<ul>
    <li>
    <li>
</ul>
</div>

instead of

<p>
<ul>
    <li>
    <li>
</ul>
</p>

Hi,

Is there an easyway to use the default toolbar but without the image function?

After pulling the latest version, the html content defined in data is rendering fine. However, after the vue data is updated, it can't be edited again because the cursor doesn't appear when I click on the text area.

The edit box can't get the focus, but the keyboard can be popped out. the question only come out on ios, it's normal on Android

Hi I can't get the custom image handler to trigger currently;

Template (inline)
<vue-editor id="os-answer-textarea-new" useCustomImageHandler @imageAdded="handleImageAdded" v-model="answer"> </vue-editor>

JS (i removed some of the other stuff and note that axios is already added to the project

`

import { VueEditor } from 'vue2-editor'

Vue.component('os-help', {

props: ['user' , 'currentTeam'],

components: {
    VueEditor
},

data() {
    
    return {

      answer: '',
      
    };
},

created() {
    //
},

mounted() {
    //
},

computed: {
  
},


filters: {
},

watch: {      

},

methods : {
  
 handleImageAdded: function(file, Editor, cursorLocation) {
    // An example of using FormData
    // NOTE: Your key could be different such as:
    // formData.append('file', file)
   
    alert('we got an image!');
  },

}

});
`
Any help would be great

or text add

Cannot read property 'TYPED_ARRAY_SUPPORT' of undefined

?d41d:6 Uncaught TypeError: Cannot read property 'TYPED_ARRAY_SUPPORT' of undefined
at Object.eval (eval at (app.js:3692), :29:6101)
at Object.e (eval at (app.js:3692), :59:738)
at e (eval at (app.js:3692), :1:2715)
at Object.eval (eval at (app.js:3692), :22:125141)
at e (eval at (app.js:3692), :1:2715)
at Object.eval (eval at (app.js:3692), :5:3080)
at e (eval at (app.js:3692), :1:2715)
at Object.eval (eval at (app.js:3692), :1:3038)
at e (eval at (app.js:3692), :1:2715)
at Object.i (eval at (app.js:3692), :1:2966)

Is there someway to prevent the editor to add inline styles to html tags?

When I set a placeholder, and then click 'B'(add bold), the content will become placeholder content

There is bound editor-content, but the editor does not show the value.
Vue.js devtools also shows that editorContent has a value.
I was calling like this:
<VueEditor :editor-content="htmlForEditor" :use-save-button="false" @editor-updated="handleUpdatedContent"> </VueEditor>
And in the created hook to get the data, set the value of htmlForEditor.

Just try to use the click event to assign.
If the assignment is displayed (like this: this.htmlForEditor = 'Html For Editor') it succeeds, but if the value is dynamic (like this: this.htmlForEditor = this.content), it will not display successfully .

when i copy words and img from office word and paste them in the vue2-editor, the img is failed as in the follwing picture. It looks like the img just has a placeholder, but no painting.

So I have this component:

<template>
  <div class="page">
  	<h2>Homepage</h2>
  	<vue-editor
      :editor-content="content" @editor-updated="handleContent">
    </vue-editor>
    <div class="preview" v-html="content"></div>
  </div>
</template>

<script>
import {VueEditor} from 'vue2-editor';
export default {
  name: 'pages',
  data () {
    return {
      content: '<h1>Hello</h1>'
    }
  },
  components: { VueEditor },
  methods: {
    handleContent: function (value) {
      this.content = value;
    }
  }
}
</script>

When the page loads, the editor's content is <h1>Hello</h1> showing as a string, instead of

Hello

Hi there,
Is there a way to set or enable quill module? I'd like to enable matchVisual modules. https://quilljs.com/docs/modules/clipboard/#matchvisual

Hey, this doesn't really count as an issue, but it's something I was wondering:

In the native Quill RTE, they provide a highly extensible API. For example, they have documentation showing how to implement a 'word-count' plugin/extension to the editor. In vue2-editor, is there an interface which enables me to write the extensions/plugins? Or am I able to drop down to the internal guts of Quill.js and do this? Would love to know your thoughts on this and potentially contribute if that's on the roadmap.

Cannot edit content after defined value to this.htmlForEditor.

<vue-editor :editor-content="htmlForEditor"
                      @save-content="handleSavingContent"
                      button-text="Save">
          </vue-editor>

selectTemplate: function () {
        Vue.http.get('http://localhost:3001/email?template=' + this.template, {
          headers: this.auth
        })
          .then((res) => {
            this.htmlForEditor = res.body.message;
          })
      }

help me please Thank you.

Hello !!

Not a problem, but a possible solution to help other people.

Come on!

I was looking for an html editor and this one served very well.

I noticed that for the user to use images and want to resize it, he should do this work before uploading to the editor.

However, I would like to allow the user to perform this basic treatment through the editor, without needing another tool for this purpose.

With this, I found an implementation that performs exactly what I needed and with examples of how to integrate with Quill.

Https://github.com/kensnyder/quill-image-resize-module

In short, since I did not find a way to perform this integration, I implemented a solution for this, as follows:

Props

props: {
    value: String,
    id: {
        type: String,
        default: 'quill-container'
    },
    placeholder: String,
    disabled: Boolean,
    editorToolbar: Array,
    editorModules: Array // <<-
}

Data

data() {
    return {
        quill: null,
        editor: null,      
        modules: {
            toolbar: this.editorToolbar ? this.editorToolbar : defaultToolbar
        }      
    }
}

Methods:

methods: {
    initializeVue2Editor() {
        this.prepareModules() // <<-
        this.setQuillElement()
        this.setEditorElement()
        this.checkForInitialContent()
    },

    // ...
    prepareModules() {      
      if(this.editorModules !== undefined)
      {          
          let self = this
          this.editorModules.forEach(element => { 
            Quill.register('modules/' + element.alias, element.module)
            self.modules[element.alias] = element.config
          })
      }
    },
    // ...
}

Text translated by Google

Hi @davidroyer,

I am having problem that user to replace image but hit problems as describe above.

I've noticed that in quil.editor.delta.ops[0].insert we get the users input in normal text format.
Is there any way to get this instead of the input + html tags?
If not, could this feature be added?

<vue-editor id="responsibilityEdit" v-model="form.responsibility" :editorToolbar="customToolbar"></vue-editor>

<style>
 #responsibilityEdit{
        min-height:200px
}
</style>

set the height like this,
When I click on the editor, the focus event can not be triggered unless I click on the first line of the editor，

How can I set the editor height?

does have cdn ?

Thanks