半成品md富文字編輯器

yaoxs發表於2021-11-11

發覺好多富文字編輯器都只有編輯的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 = '&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>


點選測試

哎！程式碼塊展示如果想做得漂亮點估計就得去學正則了:joy: :joy:

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章