Vue富文本带图片修改图片大小自定义选择项自定义字体

最新推荐文章于 2024-08-02 09:22:33 发布
最新推荐文章于 2024-08-02 09:22:33 发布
阅读量2.6k 收藏 1
点赞数 1
文章标签： javascript 前端 webpack ViewUI
原文链接：https://juejin.im/post/5c6690ff6fb9a049ba421b1c
版权

1依赖

npm install vue-quill-editor --save
npm install quill-image-extend-module --save-dev
npm i quill-image-resize-module --save-dev
复制代码

2.引入样式（main.js或组件内,组件内使用最佳）

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
复制代码
<template>
  <div>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="handleEditCha"
    >
    </quill-editor>
  </div>
</template>

<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import '../../style/font.css'   //css文件引入
  
  import { addQuillTitle } from './title'

  import {quillEditor, Quill} from 'vue-quill-editor'
  import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
  import  ImageResize  from 'quill-image-resize-module';

  Quill.register('modules/ImageExtend', ImageExtend)
  Quill.register('modules/imageResize', ImageResize)
  import axios from 'axios'

  //自定义字体类型
  var fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];
  var Font = Quill.import('formats/font');
  Font.whitelist = fonts; //将字体加入到白名单
  Quill.register(Font, true);


  //自定义字体大小
   var sizes = [false,'16px', '18px', '20px','22px']
  var Size = Quill.import('formats/size');
  Size.whitelist = sizes;
  Quill.register(Size, true);
  
  
  
  export default {
    components: {quillEditor},
    name: "index",
    data() {
      return {
        token:'',
        content: '',
        editorOption: {
          modules: {
            ImageExtend: {
              loading: true,
              name: 'file',
              size: 7,
              action: '*******/服务器上传图片地址',
              response: (res) => {
                return res.url
              },
              change: (xhr, formData) => {
                formData.append('token', this.token)
              }
            },
            imageResize: {
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
              },
              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            },
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
              ['blockquote', 'code-block'],
              [{'header': 1}, {'header': 2}],               // custom button values
              [{'list': 'ordered'}, {'list': 'bullet'}],
              [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
              [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
              [{'direction': 'rtl'}],                         // text direction
              [{'size': sizes}],  // custom dropdown
              [{'header': [1, 2, 3, 4, 5, 6, false]}],
              [{'color': []}, {'background': []}],          // dropdown with defaults from theme
              [{'font': fonts}],
              [{'align': []}],
              ['link', 'image', 'formula']//去除video即可
            ],

          },
          placeholder: '编辑内容...'
        }
      }
    },
    methods: {
      handleEditCha({quill, html, text}) {
        // console.log('editor change!', quill, html, text)
        console.log(text) //纯文本文件
        console.log(html) //纯文本文件
        // this.content = html //带标签文件
      },
      getToken() {
        axios.get('*******').then(res => {
          this.token = res.data.data
        })
      },
    },
    created(){
      this.getToken()
    },
    mounted(){
      addQuillTitle()
    }
  }
</script>

<style scoped lang="scss">

  /deep/ .ql-editor {
    min-height: 400px;
  }
  /deep/ .ql-snow .ql-tooltip{
    margin-left: 40% !important;
  }

  /deep/ .ql-snow .ql-picker.ql-font {
    width: 150px;
  }
</style>

复制代码

3.需要使用quill-image-resize-module模块时，需要修改wabpack配置

3.1 webpack.dev.conf.js //plugins数组下新增

   new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    })
复制代码

3.2 webpack.prod.conf.js //plugins数组下新增

   new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    })
复制代码

4.自定义字体css

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋体";
  font-family: "SimSun";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑体";
  font-family: "SimHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷体";
  font-family: "KaiTi";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
  content: "Arial";
  font-family: "Arial";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
  content: "sans-serif";
  font-family: "sans-serif";
}

.ql-font-SimSun {
  font-family: "SimSun";
}
.ql-font-SimHei {
  font-family: "SimHei";
}
.ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
  font-family: "KaiTi";
}
.ql-font-FangSong {
  font-family: "FangSong";
}
.ql-font-Arial {
  font-family: "Arial";
}
.ql-font-Times-New-Roman {
  font-family: "Times New Roman";
}
.ql-font-sans-serif {
  font-family: "sans-serif";
}

复制代码

5.自定义字体大小css

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: '16px';
  font-size: 16px;
}

.ql-size-16px{
  font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: '18px';
  font-size: 18px;
}

.ql-size-18px{
  font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: '20px';
  font-size: 20px;
}

.ql-size-20px{
  font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: '22px';
  font-size: 22px;
}

.ql-size-22px{
  font-size: 22px;
}

复制代码

6.自定义title.js

const titleConfig = {
  'ql-bold':'加粗',
  'ql-color':'字体颜色',
  'ql-font':'字体类型',
  'ql-code':'插入代码',
  'ql-italic':'斜体',
  'ql-link':'添加链接',
  'ql-background':'背景颜色',
  'ql-size':'字体大小',
  'ql-strike':'删除线',
  'ql-script':'上标/下标',
  'ql-underline':'下划线',
  'ql-blockquote':'引用',
  'ql-header':'标题',
  'ql-indent':'缩进',
  'ql-list':'列表',
  'ql-align':'文本对齐',
  'ql-direction':'文本方向',
  'ql-code-block':'代码块',
  'ql-formula':'公式',
  'ql-image':'图片',
  'ql-video':'视频',
  'ql-clean':'清除字体样式'
};
export function addQuillTitle(){
  const oToolBar = document.querySelector('.ql-toolbar'),
    aButton = oToolBar.querySelectorAll('button'),
    aSelect =  oToolBar.querySelectorAll('select'),
    aSpan= oToolBar.querySelectorAll('span');
  aButton.forEach((item)=>{
    if(item.className === 'ql-script'){
      item.value === 'sub' ? item.title = '下标': item.title = '上标';
    }else if(item.className === 'ql-indent'){
      item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';
    }else if(item.className === 'ql-list'){
      item.value==='ordered' ? item.title='有序列表' : item.title='无序列表'
    }else if(item.className === 'ql-header'){
      item.value === '1' ? item.title = '标题H1': item.title = '标题H2';
    }else{
      item.title = titleConfig[item.classList[0]];
    }
  });
  aSelect.forEach((item)=>{
    if(item.className!='ql-color'&&item.className!='ql-background'){
      item.parentNode.title = titleConfig[item.classList[0]];
    }
  });
  aSpan.forEach((item)=>{
    if(item.classList[0]==='ql-color'){
      item.title = titleConfig[item.classList[0]];
    }else if(item.classList[0]==='ql-background'){
      item.title = titleConfig[item.classList[0]];
    }
  });
}

复制代码
weixin_33989058
关注
vue 富文本 v-html 点击图片 放大预览展示功能
Landlord_cat的博客
09-23 2809
html部分 注册方法 <!-- 新增点击富文本图片放大功能 --> <p class="content-detail" v-html="articleContent" @click="showImg($event)"></p> 放大展示区dialog <!-- 富文本图片放大 --> <div class="imgDolg" v-show="imgPreview.show" @click.s
vue富文本框（插入文本、图片、视频）的使用及问题小结
10-18
主要介绍了vue富文本框（插入文本、图片、视频）的使用及问题小结,需要的朋友可以参考下
vue-quill-editor富文本编辑器使用，附带图片更改大小功能
Shuai_YeYe的博客
06-10 3114
1.Vue项目安装依赖 npm install vue-quill-editor --save npm install quill-image-resize-module --save 2.项目引用，我用的是全局引用 import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.bubble.css'; import quillEditor from 'vue-quill
vue使用富文本编辑器vue-quill-editor的图片改大小功能
最新发布
Jinxiansen0211的博客
08-02 261
【代码】vue使用富文本编辑器vue-quill-editor的图片改大小功能。
富文本插件 vue-quill-editor
xiaoxian_xian的博客
09-26 448
安装： npm i vue-quill-editor 导入富文本样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' 导入富文本组件 import { quillEditor } from 'vue-quill-editor' 注册组件 components: { quillEditor } 使用 <quill-ed
vue-quill-editor富文本编辑器使用步骤(上传图片可调节图片大小)
weixin_43787161的博客
11-29 1158
vue-quill-editor富文本编辑器使用步骤
vue vue-quill-editor 富文本 改变图片大小
weixin_42324665的博客
11-25 3003
1、安装 cnpm install quill-image-resize-module -S //改变大小 cnpm install quill-image-drop-module -S //拖拽
vue项目对富文本中的图片---控制图片大小
qq_44971069的博客
12-14 1069
【代码】vue项目对富文本中的图片---控制图片大小。
vue / 微信小程序实现富文本(richtext)图片宽度自适应
为人民服务
03-25 681
vue / 微信小程序实现富文本(richtext)图片宽度自适应
关于mpvue-wxparse富文本使用时图片大小不能自适应的问题
weixin_44594850的博客
01-29 2020
关于mpvue-wxparse富文本使用时图片大小不能自适应的问题 刚刚开始学习小程序，遇到了一个使用mpvue-wxparse解析传回来的html时，html中的图片大小不能自适应而且写css还没效果，不管怎么加!important都不管用，很无奈 也看了它的文档文档地址，我注意到关于图片有一个属性，如下图： 为什么属性的默认值是我需要的效果但是没生效呢？于是我手动加了这个属性。。。 果然，默...
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
10-15
主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...
vue项目引入富文本编辑，图片上传/视频上传
snowflak的博客
12-06 1880
vue项目引入富文本编辑，图片上传/视频上传
若依富文本添加字体 Editor 若依 vue Quill插件富文本框，文字大小设置，添加字体 对齐方式
weixin_50885665的博客
03-06 1804
ruoyi-ui/src/components/Editor/index.vue · 若依/RuoYi-Vue - Gitee.com若依 vue Quill插件富文本框，文字大小设置，后台生效，手机端不生效问题-CSDN博客 富文本代码: 详情页:
Vue项目使用vue-quill-editor富文本框，图片自定义大小！！！
YourNikee的博客
01-03 5134
最近项目需求需要在后台系统添加一个富文本框的功能，富文本框的功能挺好实现，但是主要是需要实现图片自定义大小上传的功能，网上查阅了许久，众说纷纭，最后还是照着官方的功能说明才解决了这个问题； 如果实在有讲不明白的地方，请点击Git地址，将文章最后的两个demo分别新建组件试试就知道了。 注：官方的只是默认功能的demo 首先是下载 npm install vue-quill-editor -s //...
使用脚手架Vue项目之解析富文本时改变其中的图片格式
mahuatengbukui的博客
08-09 625
做项目时遇到了这样的一个问题： 我做的是一个有关新闻的项目，做新闻详情页时使用请求的接口的数据，然后用v-html将它渲染到页面上，看上去没啥问题，但我忽视了新闻是有图片的。而富文本中已经给图片加上了width与height属性，这时用常规的方法是不能给这个图片加上你想要的样式的，一番百度后，我总结了两种方法来解决这样的情况。 <div class="content" v-html="articleList.content"> </div> 方法： 一.对富文本使用正则
富文本图片上传后超出不能自适应页面
Lemon_q的博客
08-21 824
项目是基于vue的，需求是在后台管理系统中编辑然后在前台显示。 <template> <div> <!-- 图片上传组件辅助 --> <el-upload class="avatar-uploader quill-img" :action="uploadImgUrl" name="file" :headers="headers" :show-file-list="false"
uni-app中v-html绑定的富文本怎么修改里面图片的大小
weixin_44378370的博客
11-01 1494
在后台传入的富文本文件读取的时候加入 .replace(/<img/gi, '<img style=“max-width:100%;height:auto” ')
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值