davidroyer / vue2-editor Goto Github PK
View Code? Open in Web Editor NEWA text editor using Vue.js and Quill
License: MIT License
A text editor using Vue.js and Quill
License: MIT License
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>
how to insert tag a have attribute tel, mailto in custom toolbar?
I want to insert an image from an outside click button. How can I know the location of the cursor?
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?
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)
Hi @davidroyer,
I am having problem that user to replace image but hit problems as describe above.
does have cdn ?
Thanks
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.
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
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.
Using fastclick to get no focus, cancel fastclick can be done
how to set the style of the editor.
For example: set the width or height of container. Hide the toolbar.....
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 .
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!
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.
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.
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 ....
I use two editor in one page, but only the second equal the first in end. In fact the two model is not same
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)
hello,please list all the menus for toolbar ,,and can't it change fontsize?
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'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?
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>
I would like to upload the image to server then editor only render the uploaded image.
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
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
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
VueEditor.vue.zip
ImageResize.js.zip
...
modules: {
toolbar: this.toolbar,
imageResize: {
displaySize: true
}
},
.....
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' ]
]
}
}
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.
Is there someway to prevent the editor to add inline styles to html tags?
Hi,
Is there an easyway to use the default toolbar but without the image function?
ReferenceError: document is not defined
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
When I set a placeholder, and then click 'B'(add bold), the content will become placeholder content
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?
After user remove everything from the editor, there is <p><br></p>
left.
Should it be empty? Or you have some reasons for this?
<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?
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
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
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
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.
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.