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

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'

复制代码

"content"

ref="myQuillEditor"

:options="editorOption"

@change="handleEditCha"

>

复制代码

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]];

}

});

}

复制代码