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

最新推荐文章于 2023-11-28 19:41:13 发布
最新推荐文章于 2023-11-28 19:41:13 发布
阅读量712 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/634659
版权

百度搜一下“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同样支持服务端渲染，稍候再做研究。

weixin_34259159
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nuxt引入quill
qq_57052578的博客
12-18 469
终端输入：npm install vue-quill-editor --save。
一个nuxt版的 vue-quill-editor demo
12-20
一个nuxt版的 vue-quill-editor demo 因为官网 说的不是很详细 所以 自己做了 供大家学习
Nuxt中使用vue-quill-editor
weixin_30593443的博客
06-13 476
vue-quil-editor是一个vue的富文本编辑器插件，功能很丰富，使用起来也很方便。本文就说一下在nuxt中的使用方法。 1、安装 npm install vue-quill-editor --save 2、新建plugins/vue-quill-editor.js文件 import Vue from 'vue' import VueQuillEditor from 'vue-quil...
Nuxt.js中引用vue-quill-editor富文本编辑器教程
一位菜鸡的博客
04-11 1477
1、安装 npm install vue-quill-editor 2、在plugins目录下创建vue-quill-editor.js文件， 添加内容为： import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor/dist/ssr' Vue.use(VueQuillEditor) 3、把富文本编辑器作为一个组件来使用。所以在components目录下创建一个.vue文件，可随便命名。比如 QuillEditor.vue &
Nuxt学习笔记——在nuxt中使用vue-quill-editor
Ariel_lj的博客
06-28 672
在nuxt中使用vue-quill-editor 参考https://www.jianshu.com/p/dcd2aac870b8 留存使用方法资料
nuxt 中使用 vue-quill-editor 富文本编辑器
qq_44767646的博客
01-27 869
nuxt 中使用 vue-quill-editor 1、安装 npm i /yarn add vue-quill-editor@3.0.6 2、创建文件 vue-quill-editor.js import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor/dist/ssr' Vue.use(VueQuillEditor) 3、nuxt.config.js 引入 css: ['quill/dist/quill.snow.css','q
vue-quill:Vue 3组件的笔管编辑器
03-21
强大的文本编辑器的Vue 3 + Quill Component。 概述 VueQuill是用于构建富文本编辑器的Vue组件，此软件包是Quill的一个薄包装，使它在Vue 3应用程序中更易于使用。 :green_heart:使用Vue 3构建：比以前更强大，更...
nuxt-clipboard:使用vue-clipboard2的Nuxt.js的“复制到剪贴板”模块
05-01
Nuxt剪贴板 使用Nuxt.js的“复制到剪贴板”模块 :recycling_symbol: 设置使用yarn或npm将nuxt-clipboard依赖项添加到您的项目中添加nuxt-clipboard到modules的部分nuxt.config.js export default { modules : [ // ...
vue-stripe-checkout-nuxt-demo:关于如何在 Nuxt.js 中实现 vue-stripe-checkout 的演示
05-29
Vue Stripe Checkout + Nuxt.js :credit_card: 关于如何在 Nuxt.js 中实现 vue-stripe-checkout 的演示。 本指南面向那些已经熟悉 Nuxt.js 的人。 有关 Nuxt.js 功能的进一步说明，请访问他们编写精美的文档网站。...
vue-prism-editor：失效的简单代码编辑器，带有语法突出显示和行号。 3kbgz
02-05
演示版例子Vue示例代码和框： ://codesandbox.io/s/61yrlnlnmn Nuxt示例代码沙箱： ://codesandbox.io/s/nuxt-vue-prism-editor-62e06 Vite示例代码沙箱： ：//codesandbox.io/s/vite-vue-prism-editor-q9j8p ...
在 Nuxt 中使用 tinymce 富文本编辑器
qq_49487356的博客
02-16 993
在 Nuxt 中使用 tinymce 富文本编辑器
Nuxt3 内嵌 wangEditor5 富文本编辑器
weixin_44258422的博客
09-06 632
Nuxt3 内嵌 wangEditor5 富文本编辑器
当TinyMCE富文本编辑器遇到Vue3+nuxt+ts项目，分享引入成功案例及过程中踩的那些坑
最新发布
vvv3171071的博客
11-28 713
如果你的前端项目技术栈使用的是Vue3+nuxt+ts，并且老大让你集成一下那个传说中非常丝滑的TinyMCE富文本编辑器，那么恭喜你和我一样中大奖了。网上找了好久都没有找到同类型且靠谱的实现方案，于是就自己着手研究文档并踩着坑解决了。TinyMCE中文文档中文手册懒得看过程的直接跳到最下方复制组件源码后按自己项目微调即可。
vue-quill-editor富文本编辑器（基于Vue脚手架）
Dreamer.
08-09 1433
（1）安装vue-quill-editor cnpm install vue-quill-editor --save 或 npm install vue-quill-editor --save （2）plugins下创建nuxt-quill-plugin.js import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor/d...
wangEditor5 富文本编辑器基于 vue3、Nuxt3
无
05-06 1588
wangEditor5 富文本编辑器基于 vue3、Nuxt3，图片/视频上传，粘贴图片，视频尺寸编辑等 wangEditor5回显 etHtml
nuxt.js中使用vue-quill-editor富文本编辑器
骑着代码去流浪
10-06 3513
1.安装 npm install vue-quill-editor 2.在plugins创建vue-quill-editor import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor/dist/ssr' Vue.use(VueQuillEditor) 3.在nuxt.config.js引入相关文件 css...
nuxt文本编辑器Vue-Quill-Editor
xuelang532777032的博客
12-20 2819
引言：一开始 想用  百度的那款ueditor编辑器的 ， 貌似有好多功能我不要的 ，在加上一个  他线上版本 没有 编译版的  ，至少我是没找到，所以就另外找找，后面让我找到了Vue-Quill-Editor   于是 就去试了下，果然是可以的 Vue-Quill-Editor 官方有给demo了  vue的 和  nuxt都有https://github.com/surmon-china
vue 富文本组件封装之vue-quill-editor（基于element+nuxt）
qq_37530404的博客
08-19 2191
一、准备工作： 1、npm install vue-quill-editor quill-image-drop-modulequill-image-extend-modulequill-image-resize-module 2、文档地址：https://bingkui.gitbooks.io/quill/content/documentation/api/selection.html ...
Vue引入quill-editor变为组件
洪君的博客
04-03 463
quill：案例 <template> <div> <!-- 图片上传组件辅助--> <el-upload class="avatar-uploader" :action="serverUrl" name="img" :headers="header"...
nuxt使用vue-quill-editor改变图片大小
08-18
4. 在Vue组件中，使用vue-quill-editor来创建富文本编辑器的实例。在vue-quill-editor组件中，可以通过配置项来设置图片大小。例如，可以使用formats属性设置图片的默认大小，代码如下： ref="myQuillEditor" :...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值