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

md编辑器增加br

Browse Source
video_log
harry 5 years ago
parent 10834cab32
commit 275948048e
1 changed files with 77 additions and 91 deletions
Show Stats Download Patch File Download Diff File

150
public/react/src/modules/tpm/challengesnew/TPMMDEditor.js
Unescape View File

@ -1,48 +1,30 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Input, Select, Radio, Checkbox, Popconfirm, message, Modal} from 'antd'; import { getUploadActionUrl, getUrl } from 'educoder';
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
// import "antd/dist/antd.css";
import { getImageUrl, getUploadActionUrl, getUrl } from 'educoder';
import '../../courses/css/Courses.css' import '../../courses/css/Courses.css'
import axios from 'axios';
import './css/TPMchallengesnew.css'; import './css/TPMchallengesnew.css';
require('codemirror/lib/codemirror.css'); require('codemirror/lib/codemirror.css');
let origin = getUrl();
let path = '/editormd/lib/' let path = '/editormd/lib/'
path = getUrl("/editormd/lib/") path = getUrl("/editormd/lib/")
const $ = window.$; const $ = window.$;
let timeout;
let currentValue;
const Option = Select.Option;
const RadioGroup = Radio.Group;
// 保存数据 // 保存数据
function md_add_data(k,mdu,d){ function md_add_data(k, mdu, d) {
window.sessionStorage.setItem(k+mdu,d); window.sessionStorage.setItem(k + mdu, d);
} }
// 清空保存的数据 // 清空保存的数据
function md_clear_data(k,mdu,id){ function md_clear_data(k, mdu, id) {
window.sessionStorage.removeItem(k+mdu); window.sessionStorage.removeItem(k + mdu);
var id1 = "#e_tip_"+id; var id1 = "#e_tip_" + id;
var id2 = "#e_tips_"+id; var id2 = "#e_tips_" + id;
if(k == 'content'){ if (k == 'content') {
$(id2).html("　"); $(id2).html("　");
}else{ } else {
$(id1).html("　"); $(id1).html("　");
} }
} }
@ -59,16 +41,16 @@ function md_rec_data(k, mdu, id) {
} }
window.md_rec_data = md_rec_data; window.md_rec_data = md_rec_data;
function md_elocalStorage(editor,mdu,id){ function md_elocalStorage(editor, mdu, id) {
if (window.sessionStorage){ if (window.sessionStorage) {
var oc = window.sessionStorage.getItem('content'+mdu); var oc = window.sessionStorage.getItem('content' + mdu);
if(oc !== null && oc != editor.getValue()){ if (oc !== null && oc != editor.getValue()) {
console.log("#e_tips_"+id) console.log("#e_tips_" + id)
$("#e_tips_"+id).data('editor', editor); $("#e_tips_" + id).data('editor', editor);
var h = '您上次有已保存的数据，是否<a style="cursor: pointer;" class="link-color-blue" onclick="md_rec_data(\'content\',\''+ mdu + '\',\'' + id + '\')">恢复</a> ? / <a style="cursor: pointer;" class="link-color-blue" onclick="md_clear_data(\'content\',\''+ mdu + '\',\'' + id + '\')">不恢复</a>'; var h = '您上次有已保存的数据，是否<a style="cursor: pointer;" class="link-color-blue" onclick="md_rec_data(\'content\',\'' + mdu + '\',\'' + id + '\')">恢复</a> ? / <a style="cursor: pointer;" class="link-color-blue" onclick="md_clear_data(\'content\',\'' + mdu + '\',\'' + id + '\')">不恢复</a>';
$("#e_tips_"+id).html(h); $("#e_tips_" + id).html(h);
} }
setInterval(function() { setInterval(function () {
var d = new Date(); var d = new Date();
var h = d.getHours(); var h = d.getHours();
var m = d.getMinutes(); var m = d.getMinutes();
@ -76,46 +58,46 @@ function md_elocalStorage(editor,mdu,id){
h = h < 10 ? '0' + h : h; h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m; m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s; s = s < 10 ? '0' + s : s;
if(editor.getValue().trim() != ""){ if (editor.getValue().trim() != "") {
md_add_data("content",mdu,editor.getValue()); md_add_data("content", mdu, editor.getValue());
var id1 = "#e_tip_"+id; var id1 = "#e_tip_" + id;
var id2 = "#e_tips_"+id; var id2 = "#e_tips_" + id;
var textStart = " 数据已于 " var textStart = " 数据已于 "
var text = textStart + h + ':' + m + ':' + s +" 保存 "; var text = textStart + h + ':' + m + ':' + s + " 保存 ";
// 占位符 // 占位符
var oldHtml = $(id2).html(); var oldHtml = $(id2).html();
if (oldHtml && oldHtml != '　' && oldHtml.startsWith(textStart) == false) { if (oldHtml && oldHtml != '　' && oldHtml.startsWith(textStart) == false) {
$(id2).html( oldHtml.split('　(')[0] + `　(${text})`); $(id2).html(oldHtml.split('　(')[0] + `　(${text})`);
} else { } else {
$(id2).html(text); $(id2).html(text);
} }
// $(id2).html(""); // $(id2).html("");
} }
},10000); }, 10000);
}else{ } else {
$("#e_tip_"+id).after('您的浏览器不支持localStorage.无法开启自动保存草稿服务,请升级浏览器！'); $("#e_tip_" + id).after('您的浏览器不支持localStorage.无法开启自动保存草稿服务,请升级浏览器！');
} }
} }
function create_editorMD(id, width, high, placeholder, imageUrl, callback, initValue, function create_editorMD(id, width, high, placeholder, imageUrl, callback, initValue,
onchange, watch, { noStorage, showNullButton, emoji }, that) { onchange, watch, { noStorage, showNullButton, emoji }, that) {
// 还是出现了setting只有一份，被共用的问题 // 还是出现了setting只有一份，被共用的问题
var editorName = window.editormd(id, { var editorName = window.editormd(id, {
width: width, width: width,
height: high===undefined?400:high, height: high === undefined ? 400 : high,
path: path, // "/editormd/lib/" path: getUrl("/editormd/lib/"), // "/editormd/lib/"
markdown : initValue, markdown: initValue,
dialogLockScreen: false, dialogLockScreen: false,
watch:watch===undefined?true:watch, watch: watch === undefined ? true : watch,
syncScrolling: "single", syncScrolling: "single",
tex: true, tex: true,
tocm: true, tocm: true,
emoji: !!emoji , emoji: !!emoji,
taskList: true, taskList: true,
codeFold: true, codeFold: true,
searchReplace: true, searchReplace: true,
@ -123,21 +105,35 @@ function create_editorMD(id, width, high, placeholder, imageUrl, callback, initV
sequenceDiagram: true, sequenceDiagram: true,
autoFocus: false, autoFocus: false,
// mine
toolbarIcons: function (mdEditor) { toolbarIcons: function (mdEditor) {
let react_id = `react_${mdEditor.id}`; let react_id = `react_${mdEditor.id}`;
const __that = window[react_id] const __that = window[react_id]
// Or return editormd.toolbarModes[name]; // full, simple, mini
// Using "||" set icons align right. // Using "||" set icons align right.
const icons = ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "link", "|", "testIcon", "testIcon1", '|', "image", "table", '|', "watch", "clear"]; const icons = ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "link", "|", "testIcon", "testIcon1", '|', "image", "table", '|', "line-break", "watch", "clear"];
// 试卷处用到的填空题新增按钮 // 试卷处用到的填空题新增按钮
if (__that.props.showNullButton) { if (__that.props.showNullButton) {
icons.push('nullBtton') icons.push('nullBtton')
} }
return icons return icons
}, },
toolbarIconsClass: {
"line-break": "fa-minus"
},
toolbarHandlers: {
/**
* @param {Object} cm CodeMirror对象
* @param {Object} icon 图标按钮jQuery元素对象
* @param {Object} cursor CodeMirror的光标对象，可获取光标所在行和位置
* @param {String} selection 编辑器选中的文本
*/
"line-break": function (cm, icon, cursor, selection) {
// 如果当前没有选中的文本，将光标移到要输入的位置
if (selection === "") {
cm.setCursor(cursor.line, cursor.ch + 1)
}
cm.replaceSelection("<br/>");
}
},
toolbarCustomIcons: { toolbarCustomIcons: {
testIcon: "<a type=\"inline\" class=\"latex\" ><div class='zbg'></div></a>", testIcon: "<a type=\"inline\" class=\"latex\" ><div class='zbg'></div></a>",
testIcon1: "<a type=\"latex\" class=\"latex\" ><div class='zbg_latex'></div></a>", testIcon1: "<a type=\"latex\" class=\"latex\" ><div class='zbg_latex'></div></a>",
@ -152,14 +148,11 @@ function create_editorMD(id, width, high, placeholder, imageUrl, callback, initV
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"], imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
imageUploadURL: imageUrl,//url imageUploadURL: imageUrl,//url
onchange: onchange, onchange: onchange,
onload: function() { onload: function () {
let _id = this.id // 如果要使用this，这里不能使用箭头函数 let _id = this.id // 如果要使用this，这里不能使用箭头函数
let _editorName = this; let _editorName = this;
let react_id = `react_${_editorName.id}`; let react_id = `react_${_editorName.id}`;
const __that = window[react_id] const __that = window[react_id]
// this.previewing();
// let _id = id;
$("#" + _id + " [type=\"latex\"]").bind("click", function () { $("#" + _id + " [type=\"latex\"]").bind("click", function () {
_editorName.cm.replaceSelection("```latex"); _editorName.cm.replaceSelection("```latex");
_editorName.cm.replaceSelection("\n"); _editorName.cm.replaceSelection("\n");
@ -180,19 +173,12 @@ function create_editorMD(id, width, high, placeholder, imageUrl, callback, initV
if (__that.props.showNullButton) { if (__that.props.showNullButton) {
const NULL_CH = '▁' const NULL_CH = '▁'
// const NULL_CH = '〇'
// const NULL_CH = '🈳'
$("#" + _id + " [type=\"nullBtton\"]").bind("click", function () { $("#" + _id + " [type=\"nullBtton\"]").bind("click", function () {
_editorName.cm.replaceSelection(NULL_CH); _editorName.cm.replaceSelection(NULL_CH);
// var __Cursor = _editorName.cm.getDoc().getCursor();
// _editorName.cm.setCursor(__Cursor.line - 1, 0);
}); });
} }
if (noStorage == true) { if (!noStorage == true) {
} else {
md_elocalStorage(_editorName, `MDEditor__${_id}`, _id); md_elocalStorage(_editorName, `MDEditor__${_id}`, _id);
} }
@ -219,7 +205,7 @@ export default class TPMMDEditor extends Component {
// react_mdEditor_ // react_mdEditor_
componentDidMount = () => { componentDidMount = () => {
const { mdID, initValue, placeholder, showNullButton} = this.props; const { mdID, initValue, placeholder, showNullButton } = this.props;
let _id = `mdEditor_${mdID}` let _id = `mdEditor_${mdID}`
this.contentChanged = false; this.contentChanged = false;
@ -260,20 +246,20 @@ export default class TPMMDEditor extends Component {
__editorName.cm.on("change", (_cm, changeObj) => { __editorName.cm.on("change", (_cm, changeObj) => {
that.contentChanged = true; that.contentChanged = true;
if (that.state.showError) { if (that.state.showError) {
that.setState({showError: false}) that.setState({ showError: false })
} }
that.onEditorChange() that.onEditorChange()
}) })
that.props.onCMBlur && __editorName.cm.on('blur', () => { that.props.onCMBlur && __editorName.cm.on('blur', () => {
that.props.onCMBlur() that.props.onCMBlur()
}) })
that.props.onCMBeforeChange && __editorName.cm.on('beforeChange', (cm,change) => { that.props.onCMBeforeChange && __editorName.cm.on('beforeChange', (cm, change) => {
that.props.onCMBeforeChange(cm,change) that.props.onCMBeforeChange(cm, change)
}) })
that.answers_editormd = __editorName; that.answers_editormd = __editorName;
// 这里应该可以去掉了，方便调试加的 // 这里应该可以去掉了，方便调试加的
window[__editorName.id+'_'] = __editorName; window[__editorName.id + '_'] = __editorName;
}, initValue, this.onEditorChange,this.props.watch, { }, initValue, this.onEditorChange, this.props.watch, {
noStorage: this.props.noStorage, noStorage: this.props.noStorage,
showNullButton: this.props.showNullButton, showNullButton: this.props.showNullButton,
emoji: this.props.emoji emoji: this.props.emoji
@ -282,7 +268,7 @@ export default class TPMMDEditor extends Component {
} }
// 用在form里时，validate失败时出现一个红色边框 // 用在form里时，validate失败时出现一个红色边框
showError = () => { showError = () => {
this.setState({showError: true}) this.setState({ showError: true })
} }
onEditorChange = () => { onEditorChange = () => {
if (!this.answers_editormd) return; if (!this.answers_editormd) return;
@ -290,7 +276,7 @@ export default class TPMMDEditor extends Component {
//console.log('onEditorChange', this.props.id, val) //console.log('onEditorChange', this.props.id, val)
try { try {
this.props.onChange && this.props.onChange(val) this.props.onChange && this.props.onChange(val)
} catch(e) { } catch (e) {
// http://localhost:3007/courses/1309/common_homeworks/6566/setting // http://localhost:3007/courses/1309/common_homeworks/6566/setting
// 从这个页面，跳转到编辑页面，再在编辑页面点击返回的时候，这里会报错 // 从这个页面，跳转到编辑页面，再在编辑页面点击返回的时候，这里会报错
console.error('出错') console.error('出错')
@ -335,10 +321,10 @@ export default class TPMMDEditor extends Component {
} }
return ( return (
<React.Fragment> <React.Fragment>
<div className={`df ${className} ${imageExpand && 'editormd-image-click-expand' }`} > <div className={`df ${className} ${imageExpand && 'editormd-image-click-expand'}`} >
{/* padding10-20 */} {/* padding10-20 */}
<div className="edu-back-greyf5 radius4" id={`mdEditor_${mdID}`} style={{..._style}}> <div className="edu-back-greyf5 radius4" id={`mdEditor_${mdID}`} style={{ ..._style }}>
<textarea style={{display: 'none'}} id={`mdEditors_${mdID}`} name="content"></textarea> <textarea style={{ display: 'none' }} id={`mdEditors_${mdID}`} name="content"></textarea>
<div className="CodeMirror cm-s-defualt"> <div className="CodeMirror cm-s-defualt">
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save