若依 vue Quill插件富文本框，文字大小设置，后台生效，手机端不生效问题

最新推荐文章于 2024-03-12 00:57:29 发布
最新推荐文章于 2024-03-12 00:57:29 发布
阅读量4.2k 收藏 7
点赞数 2
分类专栏： 前端js 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hexu_blog/article/details/128165466
版权

原因，后台设置的样式，并没有加载到手机端而已，未设置情况下，查看Html  class="large-xx-xx"

设置后台之后： style="font-size:64px";

如下是我们需要得到的文字大小和字体的效果:

自定义字体、文字大小JS部分：

//引入Qill插件
import Quill from "quill";

// 自定义字体

let fontFamily = ['宋体', '黑体', '微软雅黑', '楷体', '仿宋', 'Arial', '苹方'];
Quill.imports['attributors/style/font'].whitelist = fontFamily;
Quill.register(Quill.imports['attributors/style/font']);
// 自定义文字大小
let fontSize = ['10px', '12px', '14px', '16px', '20px', '24px', '36px']
Quill.imports['attributors/style/size'].whitelist = fontSize;
Quill.register(Quill.imports['attributors/style/size']);

const toolbarOptions = [
  [
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "code-block",
    { header: 1 },
    { header: 2 },
    { list: "ordered" },
    { list: "bullet" },
    { indent: "-1" },
    { indent: "+1" },
    { script: "sub" }, // 下标
    { script: "super" }, // 上标
    { align: [] },
    { color: [] },
    { background: [] },
    "link",
    "image",
  ],
  [{ size: fontSize }], // 文字大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ font: fontFamily }], // 字体
];

自定义字体、文字大小css部分

/*
  文字大小
*/
.ql-snow .ql-picker.ql-size{
  width: 70px;  // 菜单栏占比宽度
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
  content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
  content: '14px';
}
.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';
}
.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';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
  content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
  content: '36px';
}

/*
  字体
*/
.ql-snow .ql-picker.ql-font{
  width: 80px;  // 菜单栏占比宽度
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='宋体']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='宋体']::before {
  content: '宋体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='黑体']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='黑体']::before {
  content: '黑体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='微软雅黑']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='微软雅黑']::before {
  content: '微软雅黑';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='楷体']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='楷体']::before {
  content: '楷体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='仿宋']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='仿宋']::before {
  content: '仿宋';
}
.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';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='苹方']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='苹方']::before {
  content: '苹方';
}

组件完整代码（含element上传组件功能）：

<template>
  <div>
    <!-- 图片上传组件辅助-->
    <el-upload
      id="upload"
      class="editor-upload"
      :action="uploadUrl"
      :data="uploadData"
      name="file"
      :headers="headers"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </el-upload>

    <!-- 富文本编辑器 -->
    <quill-editor
      class="editor"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
      @ready="ready($event)"
    >
    </quill-editor>
  </div>
</template>

<script>
  //引入Qill插件
  import Quill from "quill";

  // 自定义字体
  let fontFamily = ['宋体', '黑体', '微软雅黑', '楷体', '仿宋', 'Arial', '苹方'];
  Quill.imports['attributors/style/font'].whitelist = fontFamily;
  Quill.register(Quill.imports['attributors/style/font']);

  // 自定义文字大小
  let fontSize = ['10px', '12px', '14px', '16px', '20px', '24px', '36px']
  Quill.imports['attributors/style/size'].whitelist = fontSize;
  Quill.register(Quill.imports['attributors/style/size']);

  // 新增行高
  let Parchment = Quill.import("parchment");
  let lingHeight = ['initial', '1', '1.5', '1.75', '2', '3', '4'];
  class lineHeightAttributor extends Parchment.Attributor.Style {}
  const lineHeightStyle = new lineHeightAttributor("lineHeight", "line-height", {
    scope: Parchment.Scope.INLINE,
    whitelist: lingHeight
  });
  Quill.register({ "formats/lineHeight": lineHeightStyle }, true);

  // 对齐方式样式都改成style方式，而不是class
  let Align = Quill.import('attributors/style/align');
  Align.whitelist = ['right', 'center', 'justify'];
  Quill.register(Align, true);

  const toolbarOptions = [
    [
      "bold",
      "italic",
      "underline",
      "strike",
      "blockquote",
      "code-block",
      { header: 1 },
      { header: 2 },
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" },
      { indent: "+1" },
      { script: "sub" }, // 下标
      { script: "super" }, // 上标
      { align: [] },
      { color: [] },
      { background: [] },
      "link",
      "image",
    ],
    [{ size: fontSize }], // 文字大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ font: fontFamily }], // 字体
    [{ lineheight: lingHeight }]   // 行高
  ];
  export default {
    name: "Editor",
    data() {
      return {
        content: null,
        uploadUrl: 'http://',  // 上传图片接口地址
        headers: { Authorization: "Bearer " + "TOKEN" },
        editorOption: {
          modules: {
            toolbar: {
              container: toolbarOptions,
              handlers: {
                // 编辑器菜单点击图片上传事件
                image: function (value) {
                  console.log(value)
                  if (value) {
                    // 调用element上传组件
                    document.querySelector("#upload input").click();
                  }
                },
                lineheight: function (value) {
                  if (value) {
                    this.quill.format('lineHeight', value);
                  } else {
                    console.log(value);
                  }
                }
              },
            },
          },
        },
      };
    },
    computed: {
      // 图片上传额外的参数
      uploadData() {
        return { type: 1, id: '2' };
      },
    },
    methods: {
      // 失去焦点事件
      onEditorBlur() {
        this.$emit("on-blur", this.content);
      },
      onEditorFocus() {
        //获得焦点事件
      },
      // 内容改变事件
      onEditorChange() {      
        this.$emit("on-blur", this.content);
      },
      ready() {
        Quill.register({ 'formats/lineHeight': lineHeightStyle }, true);
      },
      // 上传图片前
      beforeUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error("上传图片不能大于 2M");
        }
      },
      // 上传图片成功
      uploadSuccess(res) {
        if (res.code == 200) {
          let img = `<img src="https:${res.data.url}" />`;
          this.content = (this.content || "") + img;
        }
      },
      // 上传图片失败
      uploadError(res) {
        console.log(res);
      },
      // 更新文本编辑器内容
      upDateContent(v) {
        this.content = v;
      },
    },
  };
</script>

<style lang="scss" scoped>
  /deep/ .quill-editor{
    width: 1000px;
    .ql-container {
      height: 300px;
    }
    .editor-upload {
      display: none;
    }
    /*
      文字大小
    */
    .ql-snow .ql-picker.ql-size{
      width: 70px;  // 菜单栏占比宽度
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
      content: '10px';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
      content: '12px';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
      content: '14px';
    }
    .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';
    }
    .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';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
      content: '24px';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
      content: '36px';
    }

    /*
      字体
    */
    .ql-snow .ql-picker.ql-font{
      width: 80px;  // 菜单栏占比宽度
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='宋体']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='宋体']::before {
      content: '宋体';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='黑体']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='黑体']::before {
      content: '黑体';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='微软雅黑']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='微软雅黑']::before {
      content: '微软雅黑';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='楷体']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='楷体']::before {
      content: '楷体';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='仿宋']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='仿宋']::before {
      content: '仿宋';
    }
    .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';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='苹方']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='苹方']::before {
      content: '苹方';
    }

    /*
      标题  
    */
    .ql-snow .ql-picker.ql-header{
      width: 80px;  // 菜单栏占比宽度
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
      content: "文本" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      content: "标题1" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      content: "标题2" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      content: "标题3" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      content: "标题4" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      content: "标题5" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      content: "标题6" !important;
    }
    //配置编辑器行高
    .ql-snow .ql-picker.ql-lineheight {
      width: 70px;  // 菜单栏占比宽度
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
      content: '行高';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='initial']::before {
      content: '默认';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
      content: '1';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {
      content: '1.5';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.75']::before {
      content: '1.75';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
      content: '2';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
      content: '3';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
      content: '4';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
      content: '5';
    }
  }
</style>

hexu_blog
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
轻量级富文本编辑器，不需要上传图片，视频，直接插入
01-02
新上传带demo的，超好用的富文本编辑器，轻量级，不需要上传图片，视频，直接插入，没有异步上传等垃圾步骤，直转base64码-summernote-0.8.8下载，富文本编辑器下载
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js quill版本1.3.6 使用教程 ： vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 https://blog.csdn.net/cplvfx/article/details/125557966
vue quill editor 使用富文本添加上传音频功能
11-27
1. 前言 vue-quill-editor 是vue项目中常用的富文本插件，其功能能满足大部分的项目需求。但是，最近项目中，需要在富文本中上传音频文件，但是vue-quill-editor这个富文本仅支持图片，视频上传；所以这个功能需要自定义。 怎么实现这个功能？ 写一个只能上传音频的组件，并且隐藏 在富文本插件的toolbar定义一个按钮，点击时调用上传组件 监听上传成功的回调函数，在富文本输入框中插入音频标签 2. 功能实现 2.1 基于Element-ui实现上传组件，并且隐藏（不能让用户点击） <!-- 首先，必须隐藏这个元素：display:none； v-lo
文本，Vue-Quill-Editor 设置编辑器中文字的默认字体大小，自定义文字字号
最新发布
weixin_54048131的博客
03-12 815
Vue-Quill-Editor 设置编辑器中文字的默认字体大小_quill 初始 字体-CSDN博客 [{'size':fontSize}]toolbar工具栏 第三步：CSS样式文件加上这句话 这里借鉴了＊且听风吟的资料，感谢大佬的资料，以上就是置编辑器中文字的默认字体大小，自定义文字字号的方法 最后效果：
Vue Quill富文本自定义上传音频/视频
林一怂儿
10-04 1066
有时候项目中可能需要在富文本中上传音频，所以…
vue-quill-editor 自定义 a 标签，给标签添加href属性
且听风吟的博客
10-25 6020
vue-quill-editor 富文本编辑器自定义 a 标签属性
若依框架图片上传、富文本框编辑器功能
热门推荐
someday____的博客
11-22 1万+
现在的需求是：实现一个项目展示模块，后端管理页面除了需要基础信息外，要加上一个图片上传和富文本框编辑器功能。 点击”图片存储地址”：可上传电脑任何位置的图片，并可对图片进行放大，缩小，和旋转。 存入数据库的图片以url地址存放 url直接百度可看到图片：
若依框架富文本框的实现
xyhxuyonghao的博客
10-06 2054
若依框架富文本框的实现
若依富文本添加字体 Editor 若依 vue Quill插件富文本框，文字大小设置，添加字体 对齐方式
weixin_50885665的博客
03-06 1486
ruoyi-ui/src/components/Editor/index.vue · 若依/RuoYi-Vue - Gitee.com若依 vue Quill插件富文本框，文字大小设置，后台生效，手机端不生效问题-CSDN博客 富文本代码: 详情页:
@vueup/vue-quill 富文本插件 怎么显示字体字号大小，默认是没有字号的
Frank_colo的博客
12-22 547
到现在，虽然配置完成了，但是字体字号下拉还是一堆nomal，还需要写css样式。按照上面的文章配置完成后，css样式写在哪里？
若依框架 富文本编辑器
橙子
05-10 3896
若依框架 富文本编辑器 //引入 <head> <meta charset="UTF-8"> <title>without bootstrap</title> <script src="../../../static/js/jquery-3.4.1.slim.min.js" th:src="@{/js/jquery-3.4.1.slim.min.js}"></script> <link href="
HTML富文本编辑器
11-29
针对HTML页面中我们经常需要使用的富文本编辑器，并且提供使用方法，非常简单和好用。博客地址：https://blog.csdn.net/Cs_hnu_scw/article/details/84640257
Vue-Quill-Editor富文本编辑器的使用教程
12-29
本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图：    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor...
vue富文本框（插入文本、图片、视频）的使用及问题小结
10-18
主要介绍了vue富文本框（插入文本、图片、视频）的使用及问题小结,需要的朋友可以参考下
若依(ruoyi)前后端分离 quill-editor 实现图片上传拖拽修改图片大小
weixin_43859511的博客
09-01 2432
若依(ruoyi)前后端分离 quill-editor 实现图片上传拖拽修改图片大小
若依【summernote富文本编辑器的使用】
qq_40572200的博客
09-17 1838
原文链接：https://blog.csdn.net/sayyy/article/details/115564508
Quill编辑器自定义字体和字体大小
weixin_45734302的博客
10-09 3325
场景 由于官方自带的字体大小只有Samll,Normal,Large,Huge这四种,在实际开发中肯定是不满足要求的,此时我们需要手动修改下载的本地仓库中的相关js和css,需要注意的是,在生产环境部署中,需要在本地打包上传,不然恢复默认状态 Quill编辑器的使用 1. 引入依赖 cnpm install vue-quill-editor 2. 页面代码 <quill-editor...
vue-quill-editor富文本插入图片改为上传服务器
weixin_47342624的博客
01-16 602
注意：vue-quill-editor插入图片默认转换为base64，对于项目中使用，如果绑定的变量有插入图片，会造成字符串内容过长，造成请求缓慢，长度过限问题。// 引入Qill插件// 设置字体// 设置字体大小// toolbar工具栏['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线['blockquote', 'code-block'], // 引用，代码块。
【若依】 若依内置富文本框quill，editor居中无效
amoureux555的博客
02-23 1835
若依内置富文本框quill，editor居中无效
vue-quill富文本
08-10
Vue-quill是一个基于Vue.js的富文本编辑器，它是基于Quill.js开发的。使用Vue-quill可以方便地在Vue项目中实现富文本编辑功能。 要使用Vue-quill，首先需要安装依赖： ```bash npm install vue-quill-editor ``` 然后，在Vue组件中引入并注册Vue-quill： ```javascript import VueQuillEditor from 'vue-quill-editor' export default { components: { VueQuillEditor } } ``` 接下来，在模板中使用Vue-quill的组件： ```html <template> <div> <vue-quill-editor v-model="content" :options="editorOptions"></vue-quill-editor> </div> </template> ``` 在上面的代码中，`v-model`绑定了一个叫做`content`的数据，这是用来存储编辑器中的内容的。`:options`属性可以用来配置编辑器的选项，比如设置编辑器的高度、字体等。 除了基本的使用，Vue-quill还提供了丰富的自定义和扩展功能，比如自定义工具栏、上传图片、插入链接等。你可以通过查看Vue-quill的文档来了解更多详细信息。 希望这个简单的介绍能够帮到你！如果还有其他问题，请继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hexu_blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值