m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update quill

Browse Source
dev_new_shixunsrepository
tangjiang 5 years ago
parent 9acc1d87cf
commit 16f9a59e62
5 changed files with 150 additions and 32 deletions
Show Stats Download Patch File Download Diff File

3
public/react/src/common/quillForEditor/ImageBlot.js
Unescape View File

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-12-16 15:50:45 * @Date: 2019-12-16 15:50:45
* @LastEditors : tangjiang * @LastEditors : tangjiang
* @LastEditTime : 2019-12-27 15:07:11 * @LastEditTime : 2019-12-31 13:59:02
*/ */
import Quill from "quill"; import Quill from "quill";
@ -50,6 +50,7 @@ export default class ImageBlot extends BlockEmbed {
return node; return node;
} }
// 获取节点值
static value (node) { static value (node) {
return { return {

29
public/react/src/common/quillForEditor/index.js
Unescape View File

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-12-18 08:49:30 * @Date: 2019-12-18 08:49:30
* @LastEditors : tangjiang * @LastEditors : tangjiang
* @LastEditTime : 2019-12-27 16:49:25 * @LastEditTime : 2019-12-31 15:11:37
*/ */
import './index.scss'; import './index.scss';
import 'quill/dist/quill.core.css'; // 核心样式 import 'quill/dist/quill.core.css'; // 核心样式
@ -18,10 +18,18 @@ import deepEqual from './deepEqual.js'
import { fetchUploadImage } from '../../services/ojService.js'; import { fetchUploadImage } from '../../services/ojService.js';
import { getImageUrl } from 'educoder' import { getImageUrl } from 'educoder'
import ImageBlot from './ImageBlot'; import ImageBlot from './ImageBlot';
const Size = Quill.import('attributors/style/size');
const Font = Quill.import('formats/font');
// const Color = Quill.import('attributes/style/color');
Size.whitelist = ['12px', '14px', '16px', '18px', '20px', false];
Font.whitelist = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];
window.Quill = Quill; window.Quill = Quill;
window.katex = katex; window.katex = katex;
Quill.register(ImageBlot); Quill.register(ImageBlot);
Quill.register(Size);
Quill.register(Font, true);
// Quill.register(Color);
function QuillForEditor ({ function QuillForEditor ({
placeholder, placeholder,
@ -38,15 +46,16 @@ function QuillForEditor ({
}) { }) {
// toolbar 默认值 // toolbar 默认值
const defaultConfig = [ const defaultConfig = [
['bold', 'italic', 'underline'], 'bold', 'italic', 'underline',
[{align: []}, {list: 'ordered'}, {list: 'bullet'}], // 列表 {size: ['12px', '14px', '16px', '18px', '20px']},
[{script: 'sub'}, {script: 'super'}], {align: []}, {list: 'ordered'}, {list: 'bullet'}, // 列表
[{ 'color': [] }, { 'background': [] }], {script: 'sub'}, {script: 'super'},
[{header: [1,2,3,4,5,false]}], { 'color': [] }, { 'background': [] },
['blockquote', 'code-block'], {header: [1,2,3,4,5,false]},
['link', 'image', 'video'], 'blockquote', 'code-block',
['formula'], 'link', 'image', 'video',
['clean'] 'formula',
'clean'
]; ];
const editorRef = useRef(null); const editorRef = useRef(null);

103
public/react/src/common/quillForEditor/index.scss
Unescape View File

@ -7,4 +7,107 @@
cursor: pointer; cursor: pointer;
} }
} }
.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: 12px;
}
.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: 14px;
}
.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;
}
.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-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '14px';
font-size: 14px;
}
.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";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "微软雅黑";
font-family: "Microsoft YaHei";
}
} }

20
public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js
Unescape View File

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-11-20 10:35:40 * @Date: 2019-11-20 10:35:40
* @LastEditors : tangjiang * @LastEditors : tangjiang
* @LastEditTime : 2019-12-31 10:49:21 * @LastEditTime : 2019-12-31 15:17:08
*/ */
import './index.scss'; import './index.scss';
// import 'katex/dist/katex.css'; // import 'katex/dist/katex.css';
@ -271,14 +271,16 @@ class EditTab extends React.Component {
} }
// 编辑器配置信息 // 编辑器配置信息
const quillConfig = [ const quillConfig = [
[{ header: [1, 2, 3, 4, 5, 6, false] }], { header: 1}, {header: 2},
['bold', 'italic', 'underline', 'strike'], // 切换按钮 // {size: ['12px', '14px', '16px', '18px', '20px', false]},
['blockquote', 'code-block'], // 代码块 'bold', 'italic', 'underline', 'strike', // 切换按钮
[{align: []}, { 'list': 'ordered' }, { 'list': 'bullet' }], // 列表 'blockquote', 'code-block', // 代码块
[{ 'script': 'sub'}, { 'script': 'super' }], {align: []}, { 'list': 'ordered' }, { 'list': 'bullet' }, // 列表
[{ 'color': [] }, { 'background': [] }], // 字体颜色与背景色 { 'script': 'sub'}, { 'script': 'super' },
['image', 'formula'], // 数学公式、图片、视频 { 'color': [] }, { 'background': [] }, // 字体颜色与背景色
['clean'], // 清除格式 // {font: []},
'image', 'formula', // 数学公式、图片、视频
'clean', // 清除格式
]; ];
const renderCourseQuestion = (arrs) => { const renderCourseQuestion = (arrs) => {

27
public/react/src/modules/developer/split_pane_resizer.scss
Unescape View File

@ -163,18 +163,21 @@
-webkit-background-clip: padding; -webkit-background-clip: padding;
background-clip: padding-box; background-clip: padding-box;
&::before{ // &::before{
position: absolute; // position: absolute;
width: 24px; // width: 24px;
height: 24px; // height: 24px;
border-radius: 50%; // border-radius: 50%;
margin-top: -12px; // margin-top: -12px;
top: 50%; // top: 50%;
right: -12px; // right: -12px;
font-family: 'iconfont'; // font-family: 'iconfont';
background: gold; // background: gold;
content: '\e673'; // content: '\e711';
} // font-size: 18px;
// text-align: center;
// line-height: 24px;
// }
} }
.Resizer:hover { .Resizer:hover {

Write Preview
Loading…
Cancel
Save