AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

nuxt中富文本编辑器【vue-quill-editor】的集成

2017-10-20 2266
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 百度搜一下“VUE 富文本编辑器”，五花八门，N多种，推荐比较多的是集成百度的UEditor,然后是vue-quill-editor。后者是专门为vue提供的，结合起来更顺手。

百度搜一下“VUE 富文本编辑器”，五花八门，N多种，推荐比较多的是集成百度的UEditor,然后是vue-quill-editor。后者是专门为vue提供的，结合起来更顺手。试了试UEditor，然后放弃了，虽然功能丰富，但是确实略麻烦。vue-quill-editor简单轻巧又开源，可自己随意订制，因此选了后者。下面简单说一下怎么使用。

先上最终效果，如图：
img_dac05b004dfeb2975fbdba25aa31b39f.png
默认样式

img_79f538a0af179068d60f24d1ab49da28.png
图片裁剪

1、组件编写

1.Quilleditor组件
在components/common下创建Quilleditor.vue，主要代码如下：

<template>
  <div>
    <quill-editor v-model="content"
                  ref="myTextEditor"
                  :options="editorOption"
                  @change="onChange"
                  style="width: 80%;height: 500px;padding-left: 10%;padding-right: 10%"
    >
      <div id="toolbar" slot="toolbar">
        <span class="ql-formats"><button type="button" class="ql-bold"></button></span>
        <span class="ql-formats"><button type="button" class="ql-italic"></button></span>
        <span class="ql-formats"><button type="button" class="ql-underline"></button></span>
        <span class="ql-formats"><button type="button" class="ql-strike"></button></span>
        <span class="ql-formats"><button type="button" class="ql-blockquote"></button></span>
        <span class="ql-formats"><button type="button" class="ql-code-block"></button></span>
        <span class="ql-formats"><button type="button" class="ql-header" value="1"></button></span>
        <span class="ql-formats"><button type="button" class="ql-header" value="2"></button></span>
        <span class="ql-formats"><button type="button" class="ql-list" value="ordered"></button></span>
        <span class="ql-formats"><button type="button" class="ql-list" value="bullet"></button></span>
        <span class="ql-formats"><button type="button" class="ql-script" value="sub"></button></span>
        <span class="ql-formats"><button type="button" class="ql-script" value="super"></button></span>
        <span class="ql-formats"><button type="button" class="ql-indent" value="-1"></button></span>
        <span class="ql-formats"><button type="button" class="ql-indent" value="+1"></button></span>
        <span class="ql-formats"> <button type="button" class="ql-direction" value="rtl"></button></span>

        <span class="ql-formats">
          <select class="ql-size">
            <option value="small"></option>
            <option selected></option>
            <option value="large"></option>
            <option value="huge"></option>
          </select>
        </span>
        <span class="ql-formats">
          <select class="ql-header">
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
            <option value="4"></option>
            <option value="5"></option>
            <option value="6"></option>
            <option selected="selected"></option>
          </select>
        </span>
        <span class="ql-formats"><select class="ql-color">
        <option selected="selected"></option>
        <option value="#e60000"></option>
        <option value="#ff9900"></option>
        <option value="#ffff00"></option>
        <option value="#008a00"></option>
        <option value="#0066cc"></option>
        <option value="#9933ff"></option>
        <option value="#ffffff"></option>
        <option value="#facccc"></option>
        <option value="#ffebcc"></option>
        <option value="#ffffcc"></option>
        <option value="#cce8cc"></option>
        <option value="#cce0f5"></option>
        <option value="#ebd6ff"></option>
        <option value="#bbbbbb"></option>
        <option value="#f06666"></option>
        <option value="#ffc266"></option>
        <option value="#ffff66"></option>
        <option value="#66b966"></option>
        <option value="#66a3e0"></option>
        <option value="#c285ff"></option>
        <option value="#888888"></option>
        <option value="#a10000"></option>
        <option value="#b26b00"></option>
        <option value="#b2b200"></option>
        <option value="#006100"></option>
        <option value="#0047b2"></option>
        <option value="#6b24b2"></option>
        <option value="#444444"></option>
        <option value="#5c0000"></option>
        <option value="#663d00"></option>
        <option value="#666600"></option>
        <option value="#003700"></option>
        <option value="#002966"></option>
        <option value="#3d1466"></option>
      </select></span>
        <span class="ql-formats"> <select class="ql-background">
        <option value="#000000"></option>
        <option value="#e60000"></option>
        <option value="#ff9900"></option>
        <option value="#ffff00"></option>
        <option value="#008a00"></option>
        <option value="#0066cc"></option>
        <option value="#9933ff"></option>
        <option selected="selected"></option>
        <option value="#facccc"></option>
        <option value="#ffebcc"></option>
        <option value="#ffffcc"></option>
        <option value="#cce8cc"></option>
        <option value="#cce0f5"></option>
        <option value="#ebd6ff"></option>
        <option value="#bbbbbb"></option>
        <option value="#f06666"></option>
        <option value="#ffc266"></option>
        <option value="#ffff66"></option>
        <option value="#66b966"></option>
        <option value="#66a3e0"></option>
        <option value="#c285ff"></option>
        <option value="#888888"></option>
        <option value="#a10000"></option>
        <option value="#b26b00"></option>
        <option value="#b2b200"></option>
        <option value="#006100"></option>
        <option value="#0047b2"></option>
        <option value="#6b24b2"></option>
        <option value="#444444"></option>
        <option value="#5c0000"></option>
        <option value="#663d00"></option>
        <option value="#666600"></option>
        <option value="#003700"></option>
        <option value="#002966"></option>
        <option value="#3d1466"></option>
      </select></span>
        <span class="ql-formats"><select class="ql-font">
        <option selected="selected"></option>
        <option value="serif"></option>
        <option value="monospace"></option>
      </select></span>
        <span class="ql-formats">
        <select class="ql-align">
        <option selected="selected"></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
      </span>
        <span class="ql-formats">
          <button type="button" class="ql-clean"></button>
      </span>
        <span class="ql-formats">
          <button type="button" class="ql-link"></button>
      </span>
        <span class="ql-formats">
          <button type="button" @click="imgClick">
            <svg viewBox="0 0 18 18">
                <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
                <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
                <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline>
            </svg>
          </button>
      </span>
        <span class="ql-formats">
           <button type="button" class="ql-video"></button>
       </span>
      </div>
    </quill-editor>
    <crop-upload
      v-model="showCrop"
      :width="width"
      :height="height"
      :fileName="fileName"
      :uploadUrl="uploadUrl"
      @uploadSuccess="onUploadSuccess"
    ></crop-upload>
  </div>
</template>
<script>
  /* eslint-disable spaced-comment */

  import { quillEditor } from 'vue-quill-editor'
  import CropUpload from './CropUpload'

  export default {
    props: {
      /*编辑器的内容*/
      value: {
        type: String
      },
      /*上传图片的地址*/
      uploadUrl: {
        type: String
      },
      /*上传图片的file控件name*/
      fileName: {
        type: String
      },
      /*图片大小*/
      maxSize: {
        type: Number,
        default: 400//kb
      },
      /*使用使用裁切*/
      canCrop: {
        type: Boolean,
        default: false
      },
      /*裁切的最小尺寸*/
      width: {
        type: Number,
        default: 200
      },
      /*裁切的最小尺寸*/
      height: {
        type: Number,
        default: 200
      }
    },
    data () {
      return {
        content: '',
        editorOption: {
          modules: {
            toolbar: '#toolbar'
          }
        },
        /*显示裁切控件*/
        showCrop: false
      }
    },
    methods: {
      onChange () {
        this.$emit('input', this.content)
      },
      /*选择上传图片切换*/
      onFileChange (e) {
        var fileInput = e.target
        if (fileInput.files.length === 0) {
          return
        }
        if (fileInput.files[0].size > 1024 * 1024 * this.maxSize) {
          alert('图片过大')
          return
        }
        if (!this.uploadUrl) {
          console.log('no editor uploadUrl')
          return
        }
        var self = this
        var data = new FormData
        data.append(this.fileName, fileInput.files[0])
        this.editor.focus()
        var xhr = new XMLHttpRequest()
        xhr.open('post', this.uploadUrl)
        xhr.responseType = 'json'
        xhr.send(data)
        xhr.onload = function () {
          if (xhr.status === 200) {
            self.editor.insertEmbed(self.editor.getSelection().index, 'image', xhr.response.url)
          }
        }
      },
      /*裁切上传成功 res根据上传接口值获取*/
      onUploadSuccess: function (res) {
        this.editor.focus()
        this.editor.insertEmbed(this.editor.getSelection().index, 'image', res.url)
      },
      /*点击上传图片按钮*/
      imgClick () {
        if (this.canCrop) {
          this.showCrop = true
        } else {
          /*创建input file 不裁切，自己控制*/
          var input = document.createElement('input')
          input.type = 'file'
          input.name = this.fileName
          input.accept = 'image/jpeg,image/png,image/jpg,image/gif'
          input.onchange = this.onFileChange
          input.click()
        }
      }
    },
    computed: {
      editor () {
        return this.$refs.myTextEditor.quill
      }
    },
    components: {
      quillEditor,
      CropUpload
    },
    mounted () {
      this.content = this.value
    },
    watch: {
      'value' (newVal, oldVal) {
        if (this.editor) {
          if (newVal !== this.content) {
            this.content = newVal
          }
        }
      }
    }
  }
</script>

2.CropUpload组件--图片裁剪

<template>
  <vue-crop @crop-upload-success="uploadSuccess"
            v-model="show"
            :width="width"
            :height="height"
            :url="uploadUrl"
            :field="fileName"
            img-format="png"></vue-crop>
</template>

<script>
  import VueCrop from 'vue-image-crop-upload'

  export default {
    props: {
      value: {
        type: Boolean
      },
      width: {
        type: Number,
        default: 200
      },
      height: {
        type: Number,
        default: 200
      },
      uploadUrl: {
        type: String
      },
      fileName: {
        type: String
      },
    },
    data () {
      return {
        show: false,
      }
    },
    mounted () {
      this.show = this.value
    },
    components: {
      VueCrop
    },
    methods: {
      uploadSuccess (res, field) {
        this.$emit('uploadSuccess', res)
      },
    },
    watch: {
      value (newv) {
        this.show = newv
      },
      show (newv) {
        if (!this.show){
          this.$emit('input', false)
        }
      }
    }
  }
</script>
<style>
</style>

2、插件js编写

  • 在plugins下创建nuxt-quill-plugin.js
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)

if (process.browser) {
  const VueQuillEditor = require('vue-quill-editor/ssr')
  Vue.use(VueQuillEditor)
}
  • 然后在nuxt.config.js中引入该插件
  plugins: ['~plugins/element-ui',
    {src: '~plugins/nuxt-quill-plugin.js', ssr: false}]

所有配置完以后，你会发现出现的效果有可能如下：

img_ea24b49d5bb4899868f714bf23437ac7.png
window is not defined

这坑爹玩意，是因为nuxt默认首页服务端渲染，其他页面客户端渲染，而window对象只在客户端存在，因此最好不要让带富文本的页面出现在首页使用。当然这不是终极解决办法，不过vue-quill-editor同样支持服务端渲染，稍候再做研究。

文章标签：
JavaScript
关键词：
编辑器editor
编辑器集成
编辑器vue-quill-editor
小尘哥
目录
相关文章
camellia。
|
11月前
|
JSON 小程序 前端开发
微信小程序（二十四）微信小程序富文本编辑器editor
{ "component": true, "usingComponents": {} }
camellia。
163 0
yuanzhengme
|
6月前
|
JSON 前端开发 数据可视化
AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程
AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程
yuanzhengme
951 0
杀死一只知更鸟debug
|
2月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器（VMdEditor）和预览组件（VMdPreview ）的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外，还提供了一个完整示例的链接，包括编辑器和预览组件的使用效果和代码。
杀死一只知更鸟debug
847 2
vue3 v-md-editor markdown编辑器（VMdEditor）和预览组件（VMdPreview ）的使用
Yaiba123
|
3月前
|
JavaScript
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
这篇文章介绍了如何在Vue 2.X和Vue 3.X项目中封装和使用Monaco Editor在线代码编辑器，包括安装所需依赖、创建封装组件、在父组件中调用以及处理Vue 3中可能遇到的问题。
Yaiba123
530 1
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
热爱技术的小郑
|
3月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程，包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
热爱技术的小郑
73 0
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
1387503158665997
|
2月前
一款非常棒的十六进制编辑器 —— 010 Editor
一款非常棒的十六进制编辑器 —— 010 Editor
1387503158665997
58 0
朝阳39
|
4月前
|
小程序
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
朝阳39
591 0
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
yma16
|
6月前
|
前端开发 JavaScript 搜索推荐
react-app框架——使用monaco editor实现online编辑html代码编辑器
react-app框架——使用monaco editor实现online编辑html代码编辑器
yma16
278 3
徐小夕
|
6月前
|
资源调度 数据可视化 前端开发
基于mathlive从零将公式编辑器集成到可视化搭建平台
基于mathlive从零将公式编辑器集成到可视化搭建平台
徐小夕
179 0
极客李华
|
6月前
|
JavaScript 前端开发
在 Vue 2 中安装和使用 mavon-editor富文本编辑器
在 Vue 2 中安装和使用 mavon-editor富文本编辑器
极客李华
417 0

热门文章

最新文章

  • 1
    浏览器变编辑器
  • 2
    jquery插件整理篇（六）HTML编辑器插件
  • 3
    CKEditor+SWFUpload实现功能较为强大的编辑器（一）---CKEditor配置
  • 4
    输入法编辑器（IME）程序设计（2）
  • 5
    Linux-vi编辑器开发必备操作
  • 6
    linux基础--vim编辑器
  • 7
    VI编辑器（一）vi工作模式（3种）以及模式切换（转换）
  • 8
    EC地图编辑器(预览版)
  • 9
    性能的极致,Rust的加持,Zed-Dev编辑器快速搭建Python3.10开发环境
  • 10
    掌握VI编辑器(二)
  • 1
    vi编辑器替换字符串命令
    64
  • 2
    vim编辑器和gcc/g++编辑器的使用讲解
    148
  • 3
    欢迎使用Markdown编辑器
    77
  • 4
    【Shell 命令集合 文本编辑器 】Linux pico 编辑器使用指南
    100
  • 5
    【Shell 命令集合 文本编辑器】Linux joe 编辑器的使用教程
    88
  • 6
    【Shell 命令集合 文本编辑器】Linux jed 编辑器使用指南
    74
  • 7
    【Shell 命令集合 文档编辑】Linux 文本编辑器 ex命令使用指南
    89
  • 8
    【Shell 命令集合 文档编辑】Linux 行编辑器 ed命令使用指南
    76
  • 9
    属性编辑器未在PropertyEditorManager中注册?
    38
  • 10
    B/S基于云计算的云HIS智慧医院管理系统源码带电子病历编辑器
    76

    • 相关课程

    更多
  • 事件总线EventBridge生态集成课程
  • 消息队列 RocketMQ 消息集成
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档
  • React 入门与实战

    • 相关电子书

    更多
  • Cloud Foundry on Cloud-- 开源PaaS集成技术实现
  • 集成智能接入网关APP：优化企业级移动办公网络
  • 阿里邮箱—安全高效集成

    • 相关实验场景

    更多
  • vi编辑器的学习和使用
  • CSS基础教程
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月