富文本编辑器

2024-04-20 21:31| 来源: 网络整理| 查看: 265

介绍

Vue2Editor是一个简单易用且功能强大的Vue版本的富文本编辑器，其基于Quill.js和Vuejs构建！

简单易用、功能强大的富文本编辑器——Vue2Editor Github

https://github.com/davidroyer/vue2-editor

特性简单易用；基于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"; 基本案例基本用法 import { VueEditor } from "vue2-editor"; export default { components: { VueEditor }, data: () => ({ content: "Some initial content" }) }; 自定义图像处理程序

如果选择使用自定义图像处理程序，则在选择照片时会发出一个事件。可以看到下面传递了3个参数。

它传递要处理的文件编辑器实例上传时的光标位置，以便成功时可以将图像插入到正确的位置 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); }); } } }; 页面加载后设置内容 Set Editor Content import { VueEditor } from "vue2-editor"; export default { components: { VueEditor }, data: () => ({ content: null }), methods: { setEditorContent() { this.content = "Html For Editor"; } } }; 使用多个编辑器 import { VueEditor } from "vue2-editor"; export default { components: { VueEditor }, data() { return { editor1Content: "Editor 1 Starting Content", editor2Content: "Editor 2 Starting Content" }; } }; #editor1, #editor2 { height: 350px; } 自定义工具栏 import { VueEditor } from "vue2-editor"; export default { components: { VueEditor }, data: () => ({ content: "Html For Editor", customToolbar: [ ["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }], ["image", "code-block"] ] }) }; 保存内容 import { VueEditor } from "vue2-editor"; export default { components: { VueEditor }, data: () => ({ content: "Html For Editor", customToolbar: [ ["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }], ["image", "code-block"] ] }) }; 使用实时预览 {{ content }} import { VueEditor } from "vue2-editor"; export default { components: { VueEditor }, data: () => ({ content: "Some initial content" }) }; 总结

Vue2Editor是一个简单易用的富文本编辑器，如果没有复杂的需求，你可以毫无保留的使用它，如果你需要复杂的功能，也可以使用其自定义能力进行自定义扩展！

【本文地址】

公司简介

联系我们