介绍
Vue2Editor是一个简单易用且功能强大的Vue版本的富文本编辑器，其基于Quill.js和Vuejs构建！
简单易用、功能强大的富文本编辑器——Vue2Editor
Github
特性
- 简单易用；
- 基于Vue.js & Quill.js构建；
- 为更复杂的场景提供自定义的选项
安装使用
第一种方式就是使用cdn或者
npm install vue2-editor
#或者使用
yarn add vue2-editor
有两种方法可以设置和使用Vue2Editor。可以将其全局设置为Vue插件，也可以导入VueEditor组件以在本地注册并使用它。两种方法的例子如下
import Vue from "vue";
import Vue2Editor from "vue2-editor";
Vue.use(Vue2Editor);
// 基本用途-涵盖大多数情况
import { VueEditor } from "vue2-editor";
// 高级使用-HookQuill的API定制功能
import { VueEditor, Quill } from "vue2-editor";
基本案例
- 基本用法
<template>
<vue-editor v-model="content" />
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: { VueEditor },
data: () => ({
content: "<h1>Some initial content</h1>"
})
};
</script>
- 自定义图像处理程序
如果选择使用自定义图像处理程序，则在选择照片时会发出一个事件。可以看到下面传递了3个参数。
- 它传递要处理的文件
- 编辑器实例
- 上传时的光标位置，以便成功时可以将图像插入到正确的位置
<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>
<button @click="setEditorContent">Set Editor Content</button>
<vue-editor v-model="content" />
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: { VueEditor },
data: () => ({
content: null
}),
methods: {
setEditorContent() {
this.content = "<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>
<vue-editor v-model="content" :editor-toolbar="customToolbar" />
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: { VueEditor },
data: () => ({
content: "<h1>Html For Editor</h1>",
customToolbar: [
["bold", "italic", "underline"],
[{ list: "ordered" }, { list: "bullet" }],
["image", "code-block"]
]
})
};
</script>
- 保存内容
<template>
<vue-editor v-model="content" :editor-toolbar="customToolbar" />
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: { VueEditor },
data: () => ({
content: "<h1>Html For Editor</h1>",
customToolbar: [
["bold", "italic", "underline"],
[{ list: "ordered" }, { list: "bullet" }],
["image", "code-block"]
]
})
};
</script>
- 使用实时预览
<template>
<div>
<vue-editor v-model="content" />
<div>{{ content }}</div>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: { VueEditor },
data: () => ({
content: "<h1>Some initial content</h1>"
})
};
</script>
总结
Vue2Editor是一个简单易用的富文本编辑器，如果没有复杂的需求，你可以毫无保留的使用它，如果你需要复杂的功能，也可以使用其自定义能力进行自定义扩展！
