Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@restar-inc/vue2-editor-patched
Advanced tools
Readme
An easy-to-use but yet powerful and customizable rich text editor powered by Quill.js and Vue.js
You can use Yarn or NPM
npm install vue2-editor
OR
yarn add vue2-editor
// Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor";
// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor, Quill } from "vue2-editor";
Name | Type | Default | Description |
---|---|---|---|
id | String | quill-container | Set the id (necessary if multiple editors in the same view) |
v-model | String | - | Set v-model to the the content or data property you wish to bind it to |
useCustomImageHandler | Boolean | false | Handle image uploading instead of using default conversion to Base64 |
placeholder | String | - | Placeholder text for the editor |
disabled | Boolean | false | Set to true to disable editor |
customModules | Array | - | Declare Quill modules to register |
editorToolbar | Array | ** Too long for table. See toolbar example below | Use a custom toolbar |
editorOptions | Object | - | Offers object for merging into default config (add formats, custom Quill modules, ect) |
Name | Parameters | Description |
---|---|---|
focus | quill | Emitted on focus event |
blur | quill | Emitted on blur event |
selection-change | range, oldRange, source | Emitted on Quill's selection-change event |
text-change | delta, oldDelta, source | Emitted on Quill's text-change event |
imageAdded | file, Editor, cursorLocation | Emitted when useCustomImageHandler is true and photo is being added to the editor |
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
content: "<h1>Some initial content</h1>"
};
}
};
</script>
If you choose to use the custom image handler, an event is emitted when a a photo is selected. You can see below that 3 parameters are passed.
NOTE In addition to this example, I have created a example repo demonstrating this new feature with an actual server.
<template>
<div id="app">
<vue-editor id="editor" useCustomImageHandler @imageAdded="handleImageAdded" v-model="htmlForEditor"> </vue-editor>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
import axios from "axios";
export default {
components: {
VueEditor
},
data() {
return {
htmlForEditor: ""
};
},
methods: {
handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {
// An example of using FormData
// NOTE: Your key could be different such as:
// formData.append('file', file)
var formData = new FormData();
formData.append("image", file);
axios({
url: "https://fakeapi.yoursite.com/images",
method: "POST",
data: formData
})
.then(result => {
let url = result.data.url; // Get url from response
Editor.insertEmbed(cursorLocation, "image", url);
resetUploader();
})
.catch(err => {
console.log(err);
});
}
}
};
</script>
<template>
<div id="app">
<button @click="setEditorContent">Set Editor Contents</button>
<vue-editor v-model="htmlForEditor"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
htmlForEditor: null
};
},
methods: {
setEditorContent: function() {
this.htmlForEditor = "<h1>Html For Editor</h1>";
}
}
};
</script>
<template>
<div id="app">
<vue-editor id="editor1" v-model="editor1Content"></vue-editor>
<vue-editor id="editor2" v-model="editor2Content"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
editor1Content: "<h1>Editor 1 Starting Content</h1>",
editor2Content: "<h1>Editor 2 Starting Content</h1>"
};
}
};
</script>
<style>
#editor1,
#editor2 {
height: 350px;
}
</style>
<template>
<div id="app">
<vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
content: "<h1>Html For Editor</h1>",
customToolbar: [
["bold", "italic", "underline"],
[{ list: "ordered" }, { list: "bullet" }],
["image", "code-block"]
]
};
}
};
</script>
<template>
<div id="app">
<button @click="saveContent"></button>
<vue-editor v-model="content"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
content: "<h3>Initial Content</h3>"
};
},
methods: {
handleSavingContent: function() {
// You have the content to save
console.log(this.content);
}
}
};
</script>
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
<div v-html="content"></div>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
components: {
VueEditor
},
export default {
data() {
return {
content: '<h1>Initial Content</h1>'
}
}
}
</script>
There are 2 ways of using custom modules with Vue2Editor. This is partly because there have been cases in which errors are thrown when importing and attempting to declare custom modules, and partly because I believe it actually separates the concerns nicely.
Vue2Editor now exports Quill to assist in this process.
editorOptions
object<template>
<div id="app">
<vue-editor
:editorOptions="editorSettings"
v-model="content">
</div>
</template>
<script>
import { VueEditor, Quill } from 'vue2-editor'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
export default {
components: {
VueEditor
},
data() {
return {
content: '<h1>Initial Content</h1>',
editorSettings: {
modules: {
imageDrop: true,
imageResize: {}
}
}
}
}
}
</script>
(Recommended way)
customModules
prop to declare an array of module(s).editorOptions
object under modules as seen below<template>
<div id="app">
<vue-editor :customModules="customModulesForEditor" :editorOptions="editorSettings" v-model="content"> </vue-editor>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
import { ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-module";
export default {
components: {
VueEditor
},
data() {
return {
content: "<h1>Initial Content</h1>",
customModulesForEditor: [
{ alias: "imageDrop", module: ImageDrop },
{ alias: "imageResize", module: ImageResize }
],
editorSettings: {
modules: {
imageDrop: true,
imageResize: {}
}
}
};
}
};
</script>
Vue2Editor now uses Poi for development
yarn dev
: Run example in development modeyarn docs
: Development for Docsyarn build
: Build component in both formatyarn lint
: Run eslintMIT
FAQs
HTML editor using Vue.js 2, and Quill.js, an open source editor
The npm package @restar-inc/vue2-editor-patched receives a total of 20 weekly downloads. As such, @restar-inc/vue2-editor-patched popularity was classified as not popular.
We found that @restar-inc/vue2-editor-patched demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.