当前位置: 首页 > news >正文

Quill富文本编辑器支持自定义字体(包括新旧两个版本,支持Windings 2字体)

文章目录

      • 1 新版(Quill@2 以上版本)
      • 2 旧版(Quill@1版本)

1 新版(Quill@2 以上版本)

注意:新版设置 style="font-family: Wingdings 2" 这种带空格的字体样式会被过滤掉,故需特殊处理去掉空格

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quill Wingdings 2 Font</title>
    <!-- 引入 Quill 的 CSS 文件 -->
    <link
      href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
      rel="stylesheet"
    />
    <style>
      /* 使用 @font-face 引入 Wingdings 2 字体文件 */
      @font-face {
        font-family: 'Wingdings2';
        src: url('Wingdings2.ttf'); /* 替换为实际的字体文件路径 */
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='false']::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='false']::before {
        content: '字体';
      }
      .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: '仿宋';
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Wingdings2']::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Wingdings2']::before {
        content: 'Wingdings 2';
      }
    </style>
  </head>

  <body>
    <!-- Quill 编辑器的容器 -->
    <div id="editor" style="height: 300px"></div>

    <!-- 引入 Quill 的 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
    <script>
      const Font = Quill.import('attributors/style/font')
      const fonts = ['false', 'FangSong', 'Wingdings2']
      Font.whitelist = fonts
      Quill.register(Font, true)
      // 创建 Quill 实例
      const quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
          toolbar: [
            [{ font: fonts }],
            ['bold', 'italic', 'underline'],
            ['color', 'background'],
          ],
        },
      })
      const html =
        '<span style="color: red; font-family: FangSong;">这是一段红色的文字<span style="font-family: Wingdings2;">R</span></span>'
      const delta = quill.clipboard.convert({ html })
      quill.setContents(delta)
    </script>
  </body>
</html>

2 旧版(Quill@1版本)

注意:旧版同时设置 style="font-family: Wingdings2"class="ql-font-Wingdings2" 时字体样式会被过滤掉,故需特殊处理去掉style
旧版Quill也可以使用新版Quill修改方式,若能确保环境下一定有Wingdings 2字体,也可以采用下述方式,不再额外引入字体

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quill Set Font Size</title>
    <!-- 引入 Quill 的 CSS 文件 -->
    <link
      href="https://cdn.quilljs.com/1.3.7/quill.snow.css"
      rel="stylesheet"
    />
    <style>
      .ql-font-Wingdings2 {
        font-family: 'Wingdings 2';
      }
    </style>
  </head>

  <body>
    <!-- Quill 编辑器的容器 -->
    <div id="editor" style="height: 300px"></div>

    <!-- 引入 Quill 的 JavaScript 文件 -->
    <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
    <script>
      const Font = Quill.import('formats/font')
      Font.whitelist = ['Wingdings2'] //将字体加入到白名单
      Quill.register(Font, true)
      // 创建 Quill 实例
      const quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
          toolbar: false,
        },
      })
      const html =
        '<p><span style="color: red" class="ql-font-Wingdings2">这是一段红色加粗文R本。</span></p>'
      // 将 HTML 转换为 Delta
      const delta = quill.clipboard.convert(html)
      quill.setContents(delta)
    </script>
  </body>
</html>
http://www.dtcms.com/a/121887.html

相关文章:

  • MyBatis 动态 SQL 使用详解
  • MCP 服务搭建与配置学习资源部分汇总
  • 【CSS 选择器组合规则详解】
  • 2025-04-09 吴恩达机器学习6——神经网络(1):介绍
  • Spring Boot 3.x 中 WebClient 全面详解及示例
  • 文件上传漏洞原理学习
  • Synexens上海矽印 SP10 基于 DTOF 技术的单点激光雷达
  • Cursor+Claude 项目开发(辅助编程)
  • 沟通渠道混乱,信息传递延迟怎么办?
  • Redis高可用
  • 树的直径 (dp或贪心)
  • 蓝桥杯--寻找整数
  • 【教程】xrdp修改远程桌面环境为xfce4
  • 《从底层逻辑剖析:分布式软总线与传统计算机硬件总线的深度对话》
  • Mockito如何对静态方法进行测试
  • 【Claude AI大语言模型连接Blender生成资产】Windows安装Blender MCP教程
  • FreeRTOS(中断时间片任务API)
  • 微信小程序开发常用组件及用法详解
  • 如何解决Chrome浏览器安装时提示“无法连接互联网”
  • Linux入门指南:从零开始探索开源世界
  • Mysql备忘记录
  • EasyExcel导入导出
  • 雷电防护检测工作流程及重要性
  • 【愚公系列】《高效使用DeepSeek》062-图书库存管理
  • 台式电脑插入耳机没有声音或麦克风不管用
  • Dify 生成提示词的 Prompt
  • git回滚指定版本并操作
  • Llama 4的争议
  • 【重装系统】大白菜自制U盘装机,备份C盘数据,解决电脑启动黑屏/蓝屏
  • 批量合并多张 jpg/png 图片为长图或者 PDF 文件,支持按文件夹合并图片