艺宵网 资源分享 Vue2Editor–简单易用、功能强大的富文本编辑器

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

介绍 Vue2Editor是一个简单易用且功能强大的Vue版本的富文本编辑器,其基于Quill.js和Vuej…

介绍

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";

基本案例

  • 基本用法
<template>
  <vue-editor v-model="content" />
template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },

  data: () => ({
    content: "

Some initial content

"
  })
};
script>
  • 自定义图像处理程序

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

  1. 它传递要处理的文件
  2. 编辑器实例
  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 Contentbutton>
    <vue-editor v-model="content" />
  div>
template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },

  data: () => ({
    content: null
  }),

  methods: {
    setEditorContent() {
      this.content = "

Html For Editor

";
    }
  }
};
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: "

Editor 1 Starting Content

",
      editor2Content: "

Editor 2 Starting Content

"
    };
  }
};
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: "

Html For Editor

",
    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: "

Html For Editor

",
    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: "

Some initial content

"
  })
};
script>

总结

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

本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。http://www.yixao.net/share/17833.html
Vedu

作者: Vedu

这个人很懒,什么都没有留下~

发表评论

联系我们

联系我们

15378714280

在线咨询: QQ交谈

邮箱: yixaonet@163.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部