|
|
@ -20,16 +20,17 @@ import { fetchUploadImage } from '../../services/ojService.js';
|
|
|
|
import { getImageUrl } from 'educoder'
|
|
|
|
import { getImageUrl } from 'educoder'
|
|
|
|
import ImageBlot from './ImageBlot';
|
|
|
|
import ImageBlot from './ImageBlot';
|
|
|
|
import FillBlot from './FillBlot';
|
|
|
|
import FillBlot from './FillBlot';
|
|
|
|
|
|
|
|
import LinkBlot from './link-blot'
|
|
|
|
var Size = Quill.import('attributors/style/size');
|
|
|
|
var Size = Quill.import('attributors/style/size');
|
|
|
|
// const Color = Quill.import('attributes/style/color');
|
|
|
|
|
|
|
|
Size.whitelist = ['14px', '16px', '18px', '20px', false];
|
|
|
|
Size.whitelist = ['14px', '16px', '18px', '20px', false];
|
|
|
|
var fonts = ['Microsoft-YaHei','SimSun', 'SimHei','KaiTi','FangSong'];
|
|
|
|
var fonts = ['Microsoft-YaHei', 'SimSun', 'SimHei', 'KaiTi', 'FangSong'];
|
|
|
|
var Font = Quill.import('formats/font');
|
|
|
|
var Font = Quill.import('formats/font');
|
|
|
|
Font.whitelist = fonts; //将字体加入到白名单
|
|
|
|
Font.whitelist = fonts; //将字体加入到白名单
|
|
|
|
window.Quill = Quill;
|
|
|
|
window.Quill = Quill;
|
|
|
|
window.katex = katex;
|
|
|
|
window.katex = katex;
|
|
|
|
Quill.register(ImageBlot);
|
|
|
|
Quill.register(ImageBlot);
|
|
|
|
Quill.register(Size);
|
|
|
|
Quill.register(Size);
|
|
|
|
|
|
|
|
Quill.register(LinkBlot);
|
|
|
|
Quill.register(Font, true);
|
|
|
|
Quill.register(Font, true);
|
|
|
|
// Quill.register({'modules/toolbar': Toolbar});
|
|
|
|
// Quill.register({'modules/toolbar': Toolbar});
|
|
|
|
Quill.register({
|
|
|
|
Quill.register({
|
|
|
@ -38,7 +39,7 @@ Quill.register({
|
|
|
|
// Quill.register(Color);
|
|
|
|
// Quill.register(Color);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function QuillForEditor ({
|
|
|
|
function QuillForEditor({
|
|
|
|
placeholder,
|
|
|
|
placeholder,
|
|
|
|
readOnly,
|
|
|
|
readOnly,
|
|
|
|
autoFocus = false,
|
|
|
|
autoFocus = false,
|
|
|
@ -51,17 +52,16 @@ function QuillForEditor ({
|
|
|
|
onContentChange,
|
|
|
|
onContentChange,
|
|
|
|
addFill, // 点击填空成功的回调
|
|
|
|
addFill, // 点击填空成功的回调
|
|
|
|
deleteFill // 删除填空,返回删除的下标
|
|
|
|
deleteFill // 删除填空,返回删除的下标
|
|
|
|
// getQuillContent
|
|
|
|
|
|
|
|
}) {
|
|
|
|
}) {
|
|
|
|
// toolbar 默认值
|
|
|
|
// toolbar 默认值
|
|
|
|
const defaultConfig = [
|
|
|
|
const defaultConfig = [
|
|
|
|
'bold', 'italic', 'underline',
|
|
|
|
'bold', 'italic', 'underline',
|
|
|
|
{size: ['14px', '16px', '18px', '20px']},
|
|
|
|
{ size: ['14px', '16px', '18px', '20px'] },
|
|
|
|
{align: []}, {list: 'ordered'}, {list: 'bullet'}, // 列表
|
|
|
|
{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, // 列表
|
|
|
|
{script: 'sub'}, {script: 'super'},
|
|
|
|
{ script: 'sub' }, { script: 'super' },
|
|
|
|
{ 'color': [] }, { 'background': [] },
|
|
|
|
{ 'color': [] }, { 'background': [] },
|
|
|
|
{ 'font': []},
|
|
|
|
{ 'font': [] },
|
|
|
|
{header: [1,2,3,4,5,false]},
|
|
|
|
{ header: [1, 2, 3, 4, 5, false] },
|
|
|
|
'blockquote', 'code-block',
|
|
|
|
'blockquote', 'code-block',
|
|
|
|
'link', 'image', 'video',
|
|
|
|
'link', 'image', 'video',
|
|
|
|
'formula',
|
|
|
|
'formula',
|
|
|
@ -77,7 +77,6 @@ function QuillForEditor ({
|
|
|
|
|
|
|
|
|
|
|
|
// 文本内容变化时
|
|
|
|
// 文本内容变化时
|
|
|
|
const handleOnChange = content => {
|
|
|
|
const handleOnChange = content => {
|
|
|
|
// getQuillContent && getQuillContent(quill);
|
|
|
|
|
|
|
|
onContentChange && onContentChange(content, quill);
|
|
|
|
onContentChange && onContentChange(content, quill);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
@ -86,9 +85,7 @@ function QuillForEditor ({
|
|
|
|
const bindings = {
|
|
|
|
const bindings = {
|
|
|
|
tab: {
|
|
|
|
tab: {
|
|
|
|
key: 9,
|
|
|
|
key: 9,
|
|
|
|
handler: function () {
|
|
|
|
handler: function () { }
|
|
|
|
console.log('调用了tab=====>>>>');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
backspace: {
|
|
|
|
backspace: {
|
|
|
|
key: 'Backspace',
|
|
|
|
key: 'Backspace',
|
|
|
@ -104,11 +101,10 @@ function QuillForEditor ({
|
|
|
|
* index: 删除元素的位置
|
|
|
|
* index: 删除元素的位置
|
|
|
|
* length: 删除元素的个数
|
|
|
|
* length: 删除元素的个数
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
const {index, length} = range;
|
|
|
|
const { index, length } = range;
|
|
|
|
const _start = length === 0 ? index - 1 : index;
|
|
|
|
const _start = length === 0 ? index - 1 : index;
|
|
|
|
const _length = length || 1;
|
|
|
|
const _length = length || 1;
|
|
|
|
let delCtx = this.quill.getText(_start, _length); // 删除的元素
|
|
|
|
let delCtx = this.quill.getText(_start, _length); // 删除的元素
|
|
|
|
// aa
|
|
|
|
|
|
|
|
const reg = /▁/g;
|
|
|
|
const reg = /▁/g;
|
|
|
|
const delArrs = delCtx.match(reg);
|
|
|
|
const delArrs = delCtx.match(reg);
|
|
|
|
if (delArrs) {
|
|
|
|
if (delArrs) {
|
|
|
@ -216,7 +212,7 @@ function QuillForEditor ({
|
|
|
|
const ops = value.ops || [];
|
|
|
|
const ops = value.ops || [];
|
|
|
|
ops.forEach((item, i) => {
|
|
|
|
ops.forEach((item, i) => {
|
|
|
|
if (item.insert['image']) {
|
|
|
|
if (item.insert['image']) {
|
|
|
|
item.insert['image'] = Object.assign({}, item.insert['image'], {style: { cursor: 'pointer' }, onclick: (url) => showUploadImage(url)});
|
|
|
|
item.insert['image'] = Object.assign({}, item.insert['image'], { style: { cursor: 'pointer' }, onclick: (url) => showUploadImage(url) });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|