半成品md富文本编辑器
39 / 0 / 创建于 2年前 /
yaoxs 的个人博客
发觉好多富文本编辑器都只有编辑的dome，却没有展示的dome而且查找相关文档也提难找的。所以就想看看能不能做一个出来，反正要的功能也不多。能编辑标题、段落、代码段就行
这是今天划水写的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.md-box{
width: 500px;
height: 500px;
padding: 5px;
}
.yaoxs-md-h1,.yaoxs-md-h2,.yaoxs-md-h3,.yaoxs-md-h4,.yaoxs-md-h5,.yaoxs-md-h6{
padding: 5px;
margin: 0;
font-weight: 600;
}
.yaoxs-md-h1{
font-size: 32px;
}
.yaoxs-md-h2{
font-size: 24px;
}
.yaoxs-md-h3{
font-size: 18.72px;
}
.yaoxs-md-h4{
font-size: 16px;
}
.yaoxs-md-h5{
font-size: 13.28px;
}
.yaoxs-md-h6{
font-size: 12px;
}
.yaoxs-md-p{
margin: 5px;
padding: 10px 5px;
font-size: 16px;
line-height: 1.5;
/* text-indent:2em; */
background-color: #F6F8FA;
border-left: 3px solid #5CB85C;
}
.yaoxs-md-code{
margin: 5px;
padding: 10px 15px;
font-size: 16px;
line-height: 1.5;
background-color: #000;
}
.yaoxs-md-code p{
margin: 0;
padding: 0;
}
.yaoxs-md-code span{
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.5;
color: #F6F8FA;
}
.yaoxs-md-code .yaoxs-md-code-span-9CDCFE{
color: #9CDCFE;
}
.yaoxs-md-code .yaoxs-md-code-span-C586C0{
color: #C586C0;
}
/* ['#','##','###','####','#####','######','```p','```code'] */
</style>
<body>
<div id="MdBox" class="md-box" contentEditable="true">
```p
ccccc
```pend
# aaa #end
```p
aaaaaaaaaaaaaaappp
```pend
```code
code cccccccc
```codeend
</div>
<button onclick="btn('MdBox')">测试</button>
</body>
<script>
let md = document.getElementById('MdBox');
let snippetType = ['#','##','###','####','#####','######','```p','```code'];
let contentSplitArray = new Array();
function btn(id){
let content = document.getElementById(id).innerText;
let arr;
while(content != ''){
// debugger;
arr = splitContent(content,snippetType);
contentSplitArray.push({key: arr[0],value: arr[1]});
content = arr[2];
}
renderingMdbox('MdBox',contentSplitArray);
}
/**
* return [a,b,c]
* a content首次出现的片段类型
* b content首次出现的片段内容
* c content删除b后的剩下内容
* */
function splitContent(content,snippetType){
let sSnippetLocation = null;
let eSnippetLocation = null;
let sSnippetLocationType = ''; // #
let eSnippetLocationType = ''; // #end
snippetType.forEach((item) => {
let location = content.indexOf(item);
if( location != -1 && (sSnippetLocation === null || location <= sSnippetLocation)){
sSnippetLocation = location + item.length;
sSnippetLocationType = item;
}
});
eSnippetLocationType = sSnippetLocationType + 'end';
eSnippetLocation = content.indexOf(eSnippetLocationType);
if(eSnippetLocation <= sSnippetLocation+1){
// 这一步判断是避免出现死循环的情况
return [
'```p',
'字符串异常：异常位置：' + eSnippetLocation,
''
];
}
return [
sSnippetLocationType,
content.slice(sSnippetLocation+1,eSnippetLocation),
content.slice(eSnippetLocation+eSnippetLocationType.length)
];
}
function renderingMdbox(mdBoxId,contentSplitArray){
let mdBoxDom = document.getElementById(mdBoxId);
mdBoxDom.innerText = '';
contentSplitArray.forEach((item) => {
let div = document.createElement('p');
div.className = getSnippetClassName(item.key);
if(item.key == '```code'){
div.appendChild(codeMachining(item.value));
}else{
div.innerText = item.value;
}
mdBoxDom.appendChild(div);
});
}
function getSnippetClassName(key){
/* ['#','##','###','####','#####','######','```p','```code'] */
let prefix = 'yaoxs-md-';
if(key == "#") return prefix+'h1';
if(key == "##") return prefix+'h2';
if(key == "###") return prefix+'h3';
if(key == "####") return prefix+'h4';
if(key == "#####") return prefix+'h5';
if(key == "######") return prefix+'h6';
if(key == "```p") return prefix+'p';
if(key == "```code") return prefix+'code';
return prefix+'异常';
}
// ```code\n public function get_form_options(){\n $obj = new form_options;\n $arr = [\n 'teams' => $obj->getTeams(),\n 'on_job' => $obj->getOnJob()\n ];\n $this->echoJson($arr);\n }\n```codeend
function codeMachining(str){
let prefix = 'yaoxs-md-code-span';
let div = document.createElement('div');
let rowList = str.split('\n');
let nbsp = ' ';
rowList.forEach((item) => {
let p = document.createElement('p');
let wordList = item.split(' ');
wordList.forEach((word) => {
let span = document.createElement('span');
let nbspSpan = document.createElement('span');
nbspSpan.className = prefix;
nbspSpan.innerHTML = nbsp;
p.appendChild(nbspSpan);
if(word == ' ' || word == ''){
span.className = prefix;
span.innerHTML = nbsp;
}else{
span.className = prefix + getWordColorClassName(word);
span.innerText = word;
}
p.appendChild(span);
});
div.appendChild(p);
});
return div;
}
function getWordColorClassName(str){
let arr9CDCFE = ['public','function','protected','private','new'];
let arrC586C0 = ['if','else','elseif','return','for','foreach'];
if(arr9CDCFE.indexOf(str) != -1) return '-9CDCFE';
if(arrC586C0.indexOf(str) != -1) return '-C586C0';
return '';
}
</script>
</html>
点击测试
哎！代码块展示如果想做得漂亮点估计就得去学正则了
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号