quill富文本编辑器 自定义字体和大小 以及提交和回显

最新推荐文章于 2024-07-12 15:45:55 发布
最新推荐文章于 2024-07-12 15:45:55 发布
阅读量3.3k 收藏 10
点赞数
分类专栏： html 文章标签： html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37278017/article/details/109121486
版权
本文详细介绍了如何配置和自定义富文本编辑器Quill，包括引入样式和JS，HTML结构，设置编辑器选项，以及添加字体、字号、行高的自定义选项。此外，还展示了如何处理富文本数据，如获取、回显和设置字体格式。同时，文章提到了图片上传功能的实现，通过Ajax与后端服务器进行交互。
摘要由CSDN通过智能技术生成

 

 

第一步：引入quill样式，我是下载到本地了
<!-- 主题样式 -->
<link rel="stylesheet" href="${request.contextPath}/statics/css/quill.snow.css">
<link rel="stylesheet" href="${request.contextPath}/statics/css/quill.bubble.css">
<link rel="stylesheet" href="${request.contextPath}/statics/css/quill.core.css">
第二步：引入js
<script src="${request.contextPath}/statics/js/quill.js"></script>
<script src="${request.contextPath}/statics/js/quill.min.js"></script> 

第三步：html部分代码

<div class="form-group">
    <div class="col-sm-2 control-label">内容</div>
    <div class="col-sm-10 ql-snow">
        <div id="content" class="ql-editor" style="height: 800px" v-model="messageInfo.content"></div>
    </div>
</div>

第四步：

quill: function(){
    const toolbarOptions = [
        ['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: ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ header: [1, 2, 3, 4, 5, 6, false] }],

        [{ color: [] }, { background: [] }],          // dropdown with defaults from
        //theme
        [{ font: [] }],
        [{ align: [] }],
        ['link', 'image'],
        ['clean']                                         // remove formatting button
    ];

    var options = {
        modules: {
            toolbar: toolbarOptions
        },
        placeholder: 'Compose an epic...',
        readOnly: false,
        theme: 'snow'
    };

    const quill = new Quill('#content',options);

获取富文本里面的数据：

const content = document.querySelector('#content').children[0].innerHTML

回显方式：

const content = document.querySelector('#content').children[0].innerHTML
quill.pasteHTML(vm.helpCenter.content + content)

设置字体格式：

在html处引入自定义的字体格式css

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";
}

在js中加入
//字体样式
var fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加入到白名单

下面的font改成：

[{ font: fonts }],

设置字体大小：

在html处引入自定义的字体大小css
css：

.ql-snow .ql-picker.ql-size,
.ql-snow .ql-picker.ql-header {
    width: 75px !important;
}

.ql-snow .ql-picker.ql-font {
    width: 80px !important;
}

.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';
    font-size: 16px;
}

.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';
    font-size: 16px;
}

.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';
    font-size: 16px;
}

.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-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;*/
    font-size: 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';
    font-size: 16px;
    /*font-size: 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';
    font-size: 16px;
    /*font-size: 24px;*/
}

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

.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';
    font-size: 16px;
    /*font-size: 36px;*/
}

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

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

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

js处加入：

let Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px','24px','32px','36px','48px','64px','72px']
Quill.register(Size, true)

然后下面size：

[{ size: ['10px', '12px', '14px', '16px', '18px', '20px','24px','32px','36px','48px','64px','72px'] }],  // custom dropdown

自定义行高：

css:

.ql-lineHeight::before {
    content: "行高：";
    position: relative;
    top: 2px;
}

.ql-lineHeight .ql-picker-label {
    left: 50px;
    top: -19px;
}

.ql-lineHeight .ql-picker-options {
    left: 40px;
}

.ql-picker.ql-lineHeight .ql-picker-label[data-value='1-0']::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value='1-0']::before {
    content: "1.0";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-1"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-1"]::before {
    content: "1.1";
}

.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-2"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-2"]::before {
    content: "1.2";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-3"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-3"]::before {
    content: "1.3";
}

.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-4"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-4"]::before {
    content: "1.4";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-5"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-5"]::before {
    content: "1.5";
}

.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-6"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-6"]::before {
    content: "1.6";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-7"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-7"]::before {
    content: "1.7";
}

.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-8"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-8"]::before {
    content: "1.8";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-9"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-9"]::before {
    content: "1.9";
}

.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-0"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-0"]::before {
    content: "2.0";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-1"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-1"]::before {
    content: "2.1";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2.2"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-2"]::before {
    content: "2.2";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-3"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-3"]::before {
    content: "2.3";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-4"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-4"]::before {
    content: "2.4";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-5"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-5"]::before {
    content: "2.5";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-6"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-6"]::before {
    content: "2.6";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-7"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-7"]::before {
    content: "2.7";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-8"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-8"]::before {
    content: "2.8";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-9"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-9"]::before {
    content: "2.9";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="3-0"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="3-0"]::before {
    content: "3.0";
}
.ql-editor {
    max-height: 500px;
}
.ql-lineHeight-1-0 {
    line-height: 1;
}

.ql-lineHeight-1-1 {
    line-height: 1.1;
}

.ql-lineHeight-1-2 {
    line-height: 1.2;
}
.ql-lineHeight-1-3 {
    line-height: 1.3;
}
.ql-lineHeight-1-4 {
    line-height: 1.4
}
.ql-lineHeight-1-5 {
    line-height: 1.5;
}
.ql-lineHeight-1-6 {
    line-height: 1.6;
}
.ql-lineHeight-1-7 {
    line-height: 1.7;
}
.ql-lineHeight-1-8 {
    line-height: 1.8;
}
.ql-lineHeight-1-9 {
    line-height: 1.9;
}
.ql-lineHeight-2-0 {
    line-height: 2;
}
.ql-lineHeight-2-1 {
    line-height: 2.1;
}
.ql-lineHeight-2-2 {
    line-height: 2.2;
}
.ql-lineHeight-2-3 {
    line-height: 2.3;
}
.ql-lineHeight-2-4 {
    line-height: 2.4
}
.ql-lineHeight-2-5 {
    line-height: 2.5;
}
.ql-lineHeight-2-6 {
    line-height: 2.6;
}
.ql-lineHeight-2-7 {
    line-height: 2.7;
}
.ql-lineHeight-2-8 {
    line-height: 2.8;
}
.ql-lineHeight-2-9 {
    line-height: 2.9;
}
.ql-lineHeight-3-0 {
    line-height: 2;
}

js:

行高数据:

lineHeightList: ['1-0', '1-1','1-2','1-3','1-4','1-5','1-6','1-7','1-8','1-9','2-0','2-1','2-2','2-3','2-4','2-5','2-6','2-7','2-8','2-9','3-0']
const Parchment = Quill.import('parchment');
class lineHeightAttributor extends Parchment.Attributor.Class {}
const lineHeightStyle = new lineHeightAttributor(
    "lineHeight",
    "ql-lineHeight",
    {
        scope: Parchment.Scope.INLINE,
        whitelist: vm.lineHeightList
    }
);
// 注册实例
Quill.register({ "formats/lineHeight": lineHeightStyle }, true);

下面toolber:[{ lineHeight: vm.lineHeightList}],

文件上传服务器

const quill1 = new Quill('#content',options);
var toolbar = quill1.getModule('toolbar');
toolbar.addHandler('image', imageUpload);

function imageUpload(value)
{
    //点击图片，则value值为true
    if(value) {
        //创建隐藏的文件上传input
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.click();
        input.onchange = function() {
            const file = input.files[0];
            //判断文件是否为图片
            if(! /image\/\w+/.test(file.type)) {
                console.log('只能选择图片');
                return false;
            } else {
                //使用FormData创建键值对数据
                var fd = new FormData();
                fd.append('file', file);
                $.ajax({
                    type: 'post',
                    url: '/sys/oss/upload',//后台接口，我是用的是阿里的oss
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    data: fd,
                    success: function (result) {
                        //上传成功，准备将图片插入编辑框中
                        if (result.code === 0) {
                            //取得上传后返回所在的路径
                            var imgUrl = result.url;
                            //取得图片应该所在的位置
                            quill1.focus()
                            var currentPosition = quill1.getSelection().index;
                            //插入编辑框
                            quill1.insertEmbed(currentPosition, 'image', imgUrl);
                            //显示成功提示
                        } else {
                            console.log(result);
                        }
                    },
                    error: function (jqXHR) {
                        console.log('错误，' + jqXHR.status);
                    }
                });
            }
        }
    }
}

 

qq_37278017
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
富文本插件 和回显 vue-quill-editor
Liu_JiaqiPro的博客
10-22 2822
在开发过程中，input的限制会越来越明显。这时富文本输入框就派上用场了。 推荐使用这个插件vue-quill-editor 插件的使用方法和自定义组件的使用方法一样 第一步： 安装插件 npm install vue-quill-editor 第二步： 引入vue-quill-editor import { quillEditor } from 'vue-quill-editor' 还要引入下面的样式 import 'quill/dist/quill.core.css' im.
vue-quill-editor自定义字体大小和字体样式
weixin_53003063的博客
02-15 5800
vue-quill-editor自定义字体大小和字体样式
Quill编辑器自定义字体和字体大小
weixin_45734302的博客
10-09 3550
场景 由于官方自带的字体大小只有Samll,Normal,Large,Huge这四种,在实际开发中肯定是不满足要求的,此时我们需要手动修改下载的本地仓库中的相关js和css,需要注意的是,在生产环境部署中,需要在本地打包上传,不然恢复默认状态 Quill编辑器的使用 1. 引入依赖 cnpm install vue-quill-editor 2. 页面代码 <quill-editor...
quill-editor：Vue轻量级富文本编辑器-Vue-Quill-Editor
最新发布
2401_85158083的博客
07-12 1455
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！高级前端工程师必备资料包。
Quill富文本编译器字体设置用户端不生效问题
s757484077的博客
04-10 422
追加一点知识点：如果其他样式没生效需要先安装：npm i quill ，如果首行缩进也没生效请看我另一篇博客。
Quill 富文本编辑器 自定义字体
笨笨的博客
04-26 777
由于官方自带的字体大小仅有SamllNormalLargeHuge这四种，所以导致在实际开发中往往不能满足我们的需求。所以本节实现字体可配置。
quill富文本编辑器自定义字体、文字大小（编辑器内含element上传组件）
qq_42660374的博客
03-17 1936
quill富文本编辑器自定义字体、文字大小（编辑器内含element上传组件）
【Vue】vue2预览显示quill富文本内容，vue-quill-editor回显页面，v-html回显富文本内容
qq_51055690的博客
08-24 7324
vue富文本编辑器vue-quill-editor的内容的渲染
文本，Vue-Quill-Editor 设置编辑器中文字的默认字体大小，自定义文字字号
weixin_54048131的博客
03-12 2596
Vue-Quill-Editor 设置编辑器中文字的默认字体大小_quill 初始 字体-CSDN博客 [{'size':fontSize}]toolbar工具栏 第三步：CSS样式文件加上这句话 这里借鉴了＊且听风吟的资料，感谢大佬的资料，以上就是置编辑器中文字的默认字体大小，自定义文字字号的方法 最后效果：
富文本组件使用以及图片缩放和上传到接口并回显
weixin_46565787的博客
09-08 792
1. html（代码复制在下面） <quill-editor v-model="form.instructions" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onE...
quilleditor 字体大小设置_Quill 自定义富文本功能
weixin_39792803的博客
12-20 1575
前言富文本是给输入的内容增加样式，Quill 提供 api 的方式去判断修改 DOM ，而不像很多其他的编辑器通过遍历 DOM 树的方式来做到这点。并且 Quill 支持定制化功能，接下来来了解下如何使用 Quill 及它的相关源码。quickstart如同 Vue,React 一样，Quill 也需要已存在的 dom 元素作为 Quill 实例挂载的目标基础配置参数一：可以是dom，可以选择器(...
Vue-Quill-Editor富文本编辑器的使用教程
10-17
主要为大家详细介绍了Vue-Quill-Editor富文本编辑器的使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
quill富文本编辑器——修改默认图片、视频上传功能
小多的博客
08-15 1273
quill富文本编辑器默认的图片上传是将图片地址转换为base64格式，可能会导致字段过长；默认的视频上传是插入iframe标签，与需要的video标签不符合 初始化编辑器时重写image上传事件 视频上传 先引入注册自定义video.js模块 上传成功的回调 video.js 案例...
vue-quill-editor富文本编辑器(图片使用base64或自定义上传,最大字数限制等功能)
EnidChann的博客
12-16 1847
前置操作: 1.下载: "quill": "^1.3.7", "quill-image-resize-module": "^3.0.0", "vue-quill-editor": "^3.0.6", 2.config配置— vue.config.js (脚手架3.x版本) chainWebpack (config) { ... config.plugin('provide').use(webpack.ProvidePlugin, [ { 'wi
vue-quill-editor 富文本回显
kangluon的博客
01-21 9060
1、使用vue-quill-editor 安装 npm install vue-quill-editor ###在main.js中进行引入 import Vue from ‘vue’ import VueQuillEditor from ‘vue-quill-editor’ import ‘quill/dist/quill.core.css’ import ‘quill/dist/quill.s...
quill-editor 处理富文本回显渲染内容
做一个有知识的流氓
02-07 1506
这个功能可以处理复制粘贴的内容样式去除 主要看使用场景。
quill自定义（工具栏、字体大小、字号等）
n1234567896的博客
08-19 4504
quill功能拓展及扩展属性quill自定义字号quill自定义字体源代码展示自定义行高图片删除 最近一直在使用若依的vue分离版本后台管理，由于项目中需要富文本模块较多及需要自定义添加属性，导致现有的quill富文本不满足需求。经百度对比多个富文本优缺点，最后还是因为quill扩展性强，决定采用了quill，于是便有了下面这篇记录。 quill自定义字号 自定义字号功能是最先增加的，由于经验不足也踩了不少坑，刚开始网上文章都是让去修改源码来增加字号，自己也照着改了下，刚开始确实没问题，但是随着时间推移，部
Quill 后台富文本设置自定义字体(包含引入第三方字体)
weixin_43994760的博客
08-31 2268
Vue后台项目中使用Quilljs富文本组件 设置自定义字体
使用富文本时修改时怎么回显数据_富文本编辑器存储内容还原
weixin_40005795的博客
12-22 2104
看看你保存的内容是什么，一般富文本编辑器保存的时候保存的是html代码。而我们再要把这些内容回显到编辑器中时，一般都调用的是编辑器的本身的方法，比如“editor.setContent(content)”。而这时content是HTML代码(含有大量的单引号和双引号)，会造成代码混淆。所以一般把从库里读出来的HTML代码进行一下Unicode编码，然后把编码后的值赋给编辑器。简单示例一下，在jsp...
quill富文本编辑器回显数据库数据
05-24
要在Quill富文本编辑器中回显数据库数据，您需要将数据库中存储的富文本数据提取出来，并将其加载到Quill编辑器中。 以下是一些步骤来实现这个功能： 1. 从数据库中获取富文本数据。 2. 将获取到的数据加载到Quill编辑器中。 3. 可以使用Quill的“disable”选项来禁用编辑器，使其变为只读模式。 以下是示例代码，演示如何将数据库中的富文本数据加载到Quill编辑器中： ```javascript // 获取数据库中的富文本数据 const richTextData = "从数据库中获取的富文本数据"; // 创建Quill编辑器实例 const quill = new Quill("#editor", { modules: { toolbar: true }, theme: "snow", readOnly: true // 禁用编辑器 }); // 将富文本数据加载到Quill编辑器中 quill.setContents(JSON.parse(richTextData)); ``` 请注意，上面的示例代码仅供参考。您需要根据您的实际需求进行适当的修改和调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值