react中的ReactQuill react-quill 一个react的富文本 - 悔格拉的个人空间

相关文章推荐

酷酷的鸵鸟 · React中如何动态添加和删除元素_reac ...· 1 周前 ·

深情的可乐 · GC.GetTotalMemory(Bool ...· 1 年前 ·

瘦瘦的钢笔 · 手把手教你 JS ...· 1 年前 ·

老实的开心果 · idea单元测试使用jacoco示例_ide ...· 1 年前 ·

害羞的匕首 · 如何使用Python制作交互式股票K线图？ ...· 1 年前 ·

害羞的松树 · jmeter ...· 1 年前 ·

最近入了quill的坑，花点时间看了一下。只写了一个toolbar，后面补充再补充。

model: toolbar: header:

若配置了header并且为空，这时会有四个标题：

如果配置如下：

[{ 'header' : 1 },{ 'header' : 2 }],

所以header的属性如果是数组，那么将会有下拉，看下面的例子：

[{ 'header' : [ 1 , 2 , 3 , 4 , 5 , 6 , false ] }],

.ql-bubble .ql-picker.ql-header .ql-picker-label::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
model: toolbar: bold: 
配置之后 ，将会导航栏出现加粗按钮 
model: toolbar: italic: 
配置之后 ，将会导航栏出现斜体按钮 
model: toolbar: background:   
model: toolbar: color: 
配置之后 ，将会导航栏出现背景色选择器按钮，和字段颜色选择器 
但如果只是配置一个空的，那么这个按钮不会出现颜色选择器，一般会配置一个默认，空字符串。 
如：[{ 'background': [] }], 
默认颜色如下： 
js那边颜色值 为： 
	var defaultColors = [
		'rgb(  0,   0,   0)', 'rgb(230,   0,   0)', 'rgb(255, 153,   0)',
		'rgb(255, 255,   0)', 'rgb(  0, 138,   0)', 'rgb(  0, 102, 204)',
		'rgb(153,  51, 255)', 'rgb(255, 255, 255)', 'rgb(250, 204, 204)',
		'rgb(255, 235, 204)', 'rgb(255, 255, 204)', 'rgb(204, 232, 204)',
		'rgb(204, 224, 245)', 'rgb(235, 214, 255)', 'rgb(187, 187, 187)',
		'rgb(240, 102, 102)', 'rgb(255, 194, 102)', 'rgb(255, 255, 102)',
		'rgb(102, 185, 102)', 'rgb(102, 163, 224)', 'rgb(194, 133, 255)',
		'rgb(136, 136, 136)', 'rgb(161,   0,   0)', 'rgb(178, 107,   0)',
		'rgb(178, 178,   0)', 'rgb(  0,  97,   0)', 'rgb(  0,  71, 178)',
		'rgb(107,  36, 178)', 'rgb( 68,  68,  68)', 'rgb( 92,   0,   0)',
		'rgb(102,  61,   0)', 'rgb(102, 102,   0)', 'rgb(  0,  55,   0)',
		'rgb(  0,  41, 102)', 'rgb( 61,  20,  10)',
	].map(function(color){ return { value: color } }); 
当然 完成 可以自己设置颜色： 
如配置成： 
[{ 'background': ['rgb( 0, 0, 0)', 'rgb(0, 255, 0)'] }], 
将只会出现黑和绿两色。 
model: toolbar: underline: 
配置之后 ，将会导航栏出现设置下划线按钮。 
model: toolbar: strike: 
配置之后 ，将会导航栏出现设置删除线按钮。 
model: toolbar: blockquote: 
配置之后 ，将会导航栏出现设置块的按钮 
model: toolbar: font: 
配置之后 ，将会导航栏出现设置字体的下拉的按钮 
如果配置：[{ 'font': [] }] 为默认字段，默认字体为： 
				{ label:'Sans Serif',  value:'sans-serif', selected:true },
				{ label:'Serif',       value:'serif' },
				{ label:'Monospace',   value:'monospace' }
如果定制字体，可配置如下： 
[{ 'font': ['微软雅黑','宋体','黑体']}], 
不过要对两个字体配置css，对应的格式如下： 
.ql-bubble .ql-picker.ql-font .ql-picker-label::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
model: toolbar: font: 
配置之后 ，将会导航栏出现设置字体大小的下拉的按钮 
如果配置：[{ 'size': [] }] 为默认字段，默认字体为： 
{ label:'Small',  value:'10px' },
			{ label:'Normal', value:'13px', selected:true },
			{ label:'Large',  value:'18px' },
			{ label:'Huge',   value:'32px' } 
也可以自定义 ，与font一样。需要css 追加方式 。 
model: toolbar: list: 
编号有两种试，一种是按序号，一种是点号 
格式分别如下： 
[{ 'list': 'ordered' }], 
[{ 'list': 'bullet' }], 
model: toolbar: indent: 
按tab移位 
[{ 'indent': '-1' }], 
[{ 'indent': '+1' }], 
格式如下，上面的，表示向左移动一个tab，下面的，表示向右移动一个tab 
model: toolbar:link：添加连接 
['link'] 
操作方式，选中一段文本，点击link，会弹出输入 url的输入框。 
model: toolbar:image： 
[ 'image'], 
插入图片的按钮，点击后会在弹出打开本地图片的对话框 
model: toolbar:video 
['video'], 
插入视频按钮，点击后会弹出输入视频URL的输入框。 
model: toolbar:clean 
['clean'], 
清除样式按钮。将之前给内容添加样式进行清除。 
对后的toobar如下： 
const modules = {
  toolbar: [
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'font': []}],
    [{ 'size': [] }],
    ['bold'], 
    ['italic'],
    [{'background': []}],
    [{'color': []}],
    ['underline'],
    ['strike'],
     ['blockquote'],
    [{ 'list': 'ordered' }], 
    [{ 'list': 'bullet' }], 
    [{ 'indent': '-1' }], 
    [{ 'indent': '+1' }],
    ['link'],
    [ 'image'],
    ['video'],
    ['clean'],