Slog73_ArthurSlog_Markdown编辑器！（项目上线之ArthurSlog个人网站上线5）

最新推荐文章于 2019-01-14 16:04:03 发布

ArthurSlog

最新推荐文章于 2019-01-14 16:04:03 发布

阅读量191

点赞数

分类专栏：个人网站文章标签： ArthurSlog 个人网站网站搭建网站部署 Markdown

本文链接：https://blog.csdn.net/u010997452/article/details/82712977

版权

个人网站专栏收录该内容

15 篇文章 0 订阅

订阅专栏

ArthurSlog
SLog-73
Year·1
Guangzhou·China
September 15th 2018

关注微信公众号“ArthurSlog”

一尺之棰日取其半万世不竭

开发环境MacOS(High Sierra 10.13.6 (17G65))

需要的信息和信息源：

开始编码

本次来给自己的网站 ArthurSlog.com，增加一点新功能
这个功能就是 Markdown编辑器模块
简单点说，Markdwon文件使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档
这个换装的过程就需要一个转换器，这里我们使用 Markdown-it，具体介绍在此
在这里选择下载markdown-it.js文件，在 html文件里直接引用
这里把html、css、js都一起写在一个文档里，简单直接一点

ClientFile: ArthurSlog.com/Markdown_Editor.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>ArthurSlog_MarkdownEditor</title>
    <meta charset="UTF-8">
    <script src="./markdown-it.js"></script>
</head>

<body>
    <div id="container">
        <!-- ArthurSlog_Manual_Area -->
        <div id="editorManual">
            <div id="editorManual_Title">ArthurSlog 创作中心</div>
            <div id="editorManual_Tool">工具栏（建设中...）</div>
        </div>
        <div id="editorContent">
            <!-- ArthurSlog_MarkdownEditor_Area -->
            <div id="sourceCode_Markdown" contenteditable="true"></div>

            <div id="middleLine"></div>
            <!-- ArthurSlog_MarkdownToHTML_AREA -->
            <div id="resultCode_HTML"></div>
        </div>
    </div>

    <script>
        // target.addEventListener(type, listener, options);
        // target.addEventListener(type, listener ,{capture: Boolean, passive: Boolean, once: Boolean});
        // target.addEventListener(type, listener, useCapture);
        // target.addEventListener(type, listener[, useCapture, wantsUntrusted  ]); 
        // ---
        // 1. target = document.getElementById("basic")
        // 2. type = 'input'
        // 3. listener = document.getElementById("resultHTML").innerHTML = window.markdownit().render(document.getElementById("basic").value)
        // 4. options = false
        // =>
        // 5. target.addEventListener(type, listener, options)
        document.getElementById("sourceCode_Markdown").addEventListener('input', function () { document.getElementById("resultCode_HTML").innerHTML = window.markdownit().render(document.getElementById("sourceCode_Markdown").innerText) }, false);
        //document.getElementById("sourceCode_Markdown").addEventListener('paste', function () { document.getElementById("sourceCode_Markdown").innerText = document.getElementById("sourceCode_Markdown").innerText.toString()}, false);
        document.getElementById("sourceCode_Markdown").style.boxShadow = "none";
        document.getElementById("sourceCode_Markdown").style.textShadow = "none";
        document.getElementById("sourceCode_Markdown").style.outlineColor = "none";
        document.getElementById("sourceCode_Markdown").style.outlineStyle = "none";
        document.getElementById("sourceCode_Markdown").style.outline = "none";
        document.getElementById("sourceCode_Markdown").style.borderColor = "none";
    </script>

    <style>
        html,
        body {
            height: 100%;
            display: block;
            overflow: hidden;
        }

        body {
            margin: 0;
            padding: 0;
        }

        #container {
            display: flex;
            flex-direction: column;
            position: absolute;
            margin: 0;
            padding: 0;
        }

        #EditorManual {
            display: flex;
            flex-direction: column;
            position: relative;
            margin-left: 0%;
            margin-right: 0%;
            height: 15vh;
        }

        #editorManual_Title {
            margin-left: 0%;
            margin-right: 0%;
            height: 10vh;
            background-color: ghostwhite;
        }

        #editorManual_Tool {
            margin-left: 0%;
            margin-right: 0%;
            height: 5vh;
            background-color: rgb(211, 250, 255);
        }

        #editorContent {
            display: flex;
            flex-direction: row;
            position: relative;
            margin: 0;
            padding: 0;
        }

        #sourceCode_Markdown {
            width: 47.5vw;
            height: 85vh;
            margin-left: 0%;
            margin-right: 0%;
            overflow: scroll;
            background-color: aliceblue;
            text-decoration:none;
        }

        #middleLine {
            width: 5vw;
            height: 85vh;
            overflow: hidden;
            background-color: ghostwhite;
        }

        #resultCode_HTML {
            width: 47.5vw;
            height: 85vh;
            margin-left: 0%;
            margin-right: 0%;
            overflow: scroll;
            background-color: ghostwhite;
        }
    </style>
</body>

</html>

这里有几个需要关键的地方：
1. 当div标签出现 contenteditable属性，且这个属性为“true”的时候，这个div 会变成可编辑状态，点击这里详细了解contenteditable 属性
2. 根据Markdown-it的官方说明，使用 window.markdownit().render(document.getElementById(“sourceCode_Markdown”).innerText)把输入的文本转换为Html
3. 关闭输入div标签区域的边框效果：

ClientFile: ArthurSlog.com/Markdown_Editor.html(script)

document.getElementById("sourceCode_Markdown").style.boxShadow = "none";
document.getElementById("sourceCode_Markdown").style.textShadow = "none";
document.getElementById("sourceCode_Markdown").style.outlineColor = "none";
document.getElementById("sourceCode_Markdown").style.outlineStyle = "none";
document.getElementById("sourceCode_Markdown").style.outline = "none";
document.getElementById("sourceCode_Markdown").style.borderColor = "none";

使用flex对页面进行布局
调整html和body的样式，以达到覆盖整个页面的效果：

ClientFile: ArthurSlog.com/Markdown_Editor.html(style)

html,
body {
    height: 100%;
    display: block;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
}

完成了编辑，现在给首页加个链接先，直接跳转过去

ClientFile: ArthurSlog.com/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ArthurSlog</title>
        <link rel="stylesheet" type="text/css" href="style.css" >
    </head>
    <body>
        <p>个人技术分享</p>
        <div>
            <a href="./Markdown_Editor.html">ArthurSlog_MarkdownEditor</a>
        </div>
        <footer>
            <a href="http://www.miitbeian.gov.cn">粤ICP备18088522号-1</a>
        </footer>
    </body>
</html>

其中更新的部分是：

ClientFile: ArthurSlog.com/index.html

<div>
    <a href="./Markdown_Editor.html">ArthurSlog_MarkdownEditor</a>
</div>

编辑器还有一些问题，后续再继续更新优化
至此，ArthurSlog的网站又添加新模块—-ArthurSlog_Markdown编辑器！。

欢迎关注我的微信公众号 ArthurSlog

关注微信公众号“ArthurSlog”

如果你喜欢我的文章欢迎点赞留言

谢谢

ArthurSlog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Slog73_ArthurSlog_Markdown编辑器！（项目上线之ArthurSlog个人网站上线5）

ArthurSlogSLog-73Year·1Guangzhou·ChinaSeptember 15th 2018ArthurSlog PageGitHubNPM Package Page掘金主页简书主页segmentfault一尺之棰日取其半万世不竭开发环境MacOS(High Sierra 10.13.6 (17G65))需要的信息和信...
复制链接

扫一扫