Editing TinyMCE 富文本预览

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>TinyMCE 富文本预览</title>
</head>

<body>
    <div class="vdoc">
        <div class="vdoc-top">
            <div class="vdoc-menu-botton" title="折叠/展开">
                <svg t="1618102235936" class="icon" viewBox="0 0 1365 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5777" width="25" height="25">
                    <path
                        d="M45.482667 102.4H546.133333v819.2H45.482667v91.050667h591.701333V11.349333H45.482667V102.4z m293.546666 118.784a45.312 45.312 0 0 0-47.786666 4.096l-90.965334 68.266667a46.08 46.08 0 0 0-18.261333 36.437333c0 14.08 6.826667 27.733333 18.261333 36.352l90.965334 68.266667c8.192 5.973333 17.749333 9.130667 27.306666 9.130666 6.826667 0 14.165333-1.365333 20.48-5.034666a44.458667 44.458667 0 0 0 25.088-40.448V375.466667h136.533334V284.416h-136.533334v-22.698667a44.458667 44.458667 0 0 0-25.088-40.533333zM200.277333 730.453333l90.965334 68.266667c8.192 5.973333 17.749333 9.130667 27.306666 9.130667 6.826667 0 14.165333-1.365333 20.48-5.034667a44.458667 44.458667 0 0 0 25.088-40.533333v-22.698667h136.533334V648.533333h-136.533334v-22.784a44.458667 44.458667 0 0 0-25.088-40.448 45.312 45.312 0 0 0-47.786666 4.096l-90.965334 68.266667a46.08 46.08 0 0 0-18.261333 36.352c0 14.165333 6.826667 27.818667 18.261333 36.437333z m826.026667 72.362667a45.397333 45.397333 0 0 0 47.786667-4.096l90.965333-68.266667a45.482667 45.482667 0 0 0 0-72.789333l-90.965333-68.266667a45.312 45.312 0 0 0-47.786667-4.096 44.970667 44.970667 0 0 0-25.088 40.448V648.533333h-136.533333v91.050667h136.533333v22.698667c0 17.322667 9.557333 33.28 25.088 40.533333z m293.546667-791.466667H728.149333v1001.301334h591.701334V921.6H819.2V102.4h500.650667V11.349333zM1165.056 293.546667l-90.965333-68.266667a44.373333 44.373333 0 0 0-47.786667-4.096 44.458667 44.458667 0 0 0-25.088 40.533333v22.698667h-136.533333V375.466667h136.533333v22.784c0 17.237333 9.557333 33.194667 25.088 40.448a45.397333 45.397333 0 0 0 47.786667-4.096l90.965333-68.266667a45.482667 45.482667 0 0 0 0-72.789333z"
                        fill="#000000" p-id="5778"></path>
                </svg>
            </div>

            <div class="vdoc-top-layout-model">
                <select class="vdoc-layout-model">
                    <option value="0">适应页宽</option>
                    <option value="1">A4纸型</option>
                </select>
            </div>
        </div>
        <div class="vdoc-left">
        </div>
        <div class="vdoc-main">
            <div class="vdoc-content">
                <div class="mce-toc">
                    <h2>内容列表</h2>
                    <ul>
                        <li><a href="#_2021-03">2021-03</a></li>
                        <li><a href="#_2021-02">2021-02</a></li>
                        <li><a href="#_2021-01">2021-01</a></li>
                        <li><a href="#_2020-12">2020-12</a></li>
                        <li><a href="#_2020-11">2020-11</a></li>
                        <li><a href="#_2020-10">2020-10</a></li>
                        <li><a href="#_2020-09">2020-09</a></li>
                        <li><a href="#_2020-08">2020-08</a></li>
                    </ul>
                </div>
                <h3 id="_2021-03"><a class="anchor" href="https://zme.ink/CHANGELOG?id=_2021-03"
                        data-id="_2021-03">2021-03</a>
                </h3>
                <ul>
                    <li>调整 Blog 项目改为宽屏</li>
                    <li>整合 项目</li>
                    <li>优化 Run 预览、输出等</li>
                    <li>新增 Gist 集成 asciinema 终端文本录屏</li>
                </ul>
                <h3 id="_2021-02"><a class="anchor" href="https://zme.ink/CHANGELOG?id=_2021-02"
                        data-id="_2021-02">2021-02</a>
                </h3>
                <ul>
                    <li>新增 Netnr.ScriptService 项目 PowerDesigner 解析查看</li>
                    <li>调整 Blog、NRF 项目数据库从 SQLServer 迁移到 MySQL</li>
                </ul>
                <h3 id="_2021-01"><a class="anchor" href="https://zme.ink/CHANGELOG?id=_2021-01"
                        data-id="_2021-01">2021-01</a>
                </h3>
                <ul>
                    <li>修复 Netnr.ResponseFramework 项目 Iframe 选项卡隐藏造成 EasyUI 表格显示不正常的问题（从隐藏切换改为浮动层&透明度的模式）</li>
                    <li>新增 Draw 支持私有设置分享码查看</li>
                    <li>修复 Blog 文章分类图标错误</li>
                    <li>调整 Blog 关闭匿名回复</li>
                    <li>修复 Netnr.DataKit 项目修复 Oracle 查询默认值（Long类型）丢失的问题（<code>InitialLONGFetchSize = -1</code>）</li>
                </ul>
                <h3 id="_2020-12"><a class="anchor" href="https://zme.ink/CHANGELOG?id=_2020-12"
                        data-id="_2020-12">2020-12</a>
                </h3>
                <ul>
                    <li>升级 .NET5</li>
                    <li>调整 提取共享项目</li>
                    <li>调整 Netnr.Login 删除 Netnr.Core 依赖</li>
                    <li>调整 Netnr.WeChat 删除 Netnr.Core 依赖</li>
                    <li>新增 数据库连接字符串可配置明文或密文（使用 Netnr.Tool 工具加密解密）</li>
                    <li>调整 ConsoleTo.Log 日志写入添加安全队列，可并发写入</li>
                    <li>调整 日志缓存队列 Queue 改为 ConcurrentQueue</li>
                    <li>修复 验证码清理避免重复使用的漏洞</li>
                </ul>
                <h3 id="_2020-11"><a class="anchor" href="https://zme.ink/CHANGELOG?id=_2020-11"
                        data-id="_2020-11">2020-11</a>
                </h3>
                <ul>
                    <li>调整 Netnr.ResponseFramework 项目重置数据库的方法（并删除内存数据库）</li>
                    <li>新增 Netnr.Fast 类库 ActionResultVM 类添加 log 集合对象，用于填充日志输出，添加片段耗时方法 PartTime</li>
                </ul>
                <h3 id="_2020-10"><a class="anchor" href="https://zme.ink/CHANGELOG?id=_2020-10"
                        data-id="_2020-10">2020-10</a>
                </h3>
                <ul>
                    <li>修复 Netnr.Logging 类库 UV统计（已第一个IP统计）</li>
                    <li>新增 Netnr.Blog.Web 项目日志添加搜索</li>
                    <li>修复 日志缓存队列 Queue 的 Count 属性线程不安全问题</li>
                </ul>
                <h3 id="_2020-09"><a class="anchor" href="https://zme.ink/CHANGELOG?id=_2020-09"
                        data-id="_2020-09">2020-09</a>
                </h3>
                <ul>
                    <li>修复 Netnr.ResponseFramework.Web 项目 表格配置拖拽排序重置后无法使用</li>
                    <li>调整 Netnr.Blog.Web 项目 Gist 代码片段响应滚轮事件</li>
                    <li>更新 Netnr.Guff 附件托管</li>
                    <li>升级 Netnr.FileServer 项目 支持限时Token和永久Token授权</li>
                    <li>调整 Netnr.ScriptService 项目 SVG 图标合并</li>
                    <li>调整 Netnr.ResponseFramework.Web 项目 日志缓存为队列 Queue</li>
                    <li>调整 Netnr.Logging 项目 日志缓存为队列 Queue</li>
                    <li>整合 数据库访问为一个类库 Netnr.Data</li>
                </ul>
                <h3 id="_2020-08"><a class="anchor" href="https://zme.ink/CHANGELOG?id=_2020-08"
                        data-id="_2020-08">2020-08</a>
                </h3>
                <ul>
                    <li>新增 Netnr.Fast.Extend 项目的 OSInfoTo.cs 类库新增 <code>ToView()</code> 方法，可视化输出</li>
                    <li>新增 测试项目 Netnr.Test</li>
                    <li>整合 Netnr.Login.Sample 项目到 Netnr.Test</li>
                    <li>整合 Netnr.WeChat.Sample 项目到 Netnr.Test</li>
                    <li>删除 Netnr.Blog.Web 项目的实验室模块</li>
                </ul>
                <h3>Code</h3>
                <p>C#</p>
                <pre class="language-csharp"><code>public class rootEntity
{
      public siteEntity site { get; set; }
      public aboutEntity about { get; set; }
      public DateTime updaet { get; set; }
      public string version { get; set; }
}</code></pre>
                <p> </p>
                <p>CSS</p>
                <pre class="language-css"><code>@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
  --heading-1: 30px/32px Helvetica, sans-serif;
}</code></pre>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="https://ss.netnr.com/prismjs@1.29.0/themes/prism.min.css" />
    <script src="https://ss.netnr.com/2021/04/14/0724461079.js"></script>
</body>

</html>

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    font-family: -apple-system, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
}

a {
    color: rgba(0, 0, 0, 0.64);
}
ul, ol{
    padding: 0 25px;
}
ul li, ol li{
    line-height: 1.8rem;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-corner {
    background-color: inherit;
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 5px;
    border: 1px solid transparent;
    height: 140px;
    background-clip: content-box;
}

.vdoc .vdoc-top {    
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 40px;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.vdoc .vdoc-left {    
    position: fixed;
    top: 40px;
    bottom: 0;
    z-index: 2;
    width: 300px;
    padding: 15px;
    overflow-y: auto;
    user-select: none;
    border-right: 1px solid rgb(238, 238, 238);
}

.vdoc-fade .vdoc-left {
    transition: transform .25s ease-out;
}

.vdoc .vdoc-main {
    position: fixed;
    right: 0;
    top: 40px;
    bottom: 0;
    z-index: 1;
    left: 300px;
    padding: 20px;
    overflow-y: auto;
}

.vdoc-fade .vdoc-main {
    transition: left .25s ease;
}

.vdoc .vdoc-main .vdoc-content {
    margin: 0 auto;
    padding: 30px 40px;
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;    
}

.vdoc .vdoc-main .vdoc-content-layout-model-1 {
    max-width: 809px;
}

.vdoc-menu-hide .vdoc-left {
    transform: translateX(-300px);
}

.vdoc-menu-hide .vdoc-main {
    left: 0;
}

.vdoc-menu-botton {
    position: absolute;
    top: 5px;
    left: 8px;
    opacity: .7;
    height: 30px;
    cursor: pointer;
    padding: 2px 4px;
    user-select: none;
    border-radius: 3px;
    background-color: #ddd;
}

.vdoc-menu-hide .vdoc-menu-botton {
    background-color: transparent;
}

.vdoc-top-layout-model {
    text-align: center;
}

.vdoc-layout-model {
    margin-top: 5px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;    
    border-radius: 3px;
    border: 1px solid #ddd;
    background-size: 16px 12px;
    background-repeat: no-repeat;
    padding: .375rem 2.25rem .375rem .75rem;
    background-position: right .75rem center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.mce-toc h2 {
    padding: 15px 5px;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.64);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.mce-toc ul {
    list-style: none;
    padding: 0;
}
.mce-toc ul li a {
    padding: 8px;
    display: block;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.64);
}
.mce-toc ul li a:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

var vd = {
    vdoc: document.querySelector('.vdoc'),
    vtoc: document.querySelector('.mce-toc'),
    init: function () {
        vd.moveToc();

        Prism.highlightAll();

        document.querySelector('.vdoc-layout-model').onchange = function () {
            var vdc = document.querySelector('.vdoc-content');
            vdc.className = "vdoc-content vdoc-content-layout-model-" + this.value;
        }

        document.querySelector('.vdoc-menu-botton').onclick = function () {
            vd.menuToggle()
        }

        window.onload = window.onresize = function () {
            if (document.body.clientWidth < 800 && vd.vdoc.className.indexOf("vdoc-menu-hide") == -1) {
                vd.menuToggle(0);
            }
        }

        setTimeout(function () {
            vd.vdoc.className += " vdoc-fade";
        }, 100);
    },
    moveToc: function () {
        var vleft = document.querySelector('.vdoc-left');
        if (vd.vtoc) {
            vleft.appendChild(vd.vtoc);
        } else {
            vd.menuToggle(0);
            document.querySelector('.vdoc-menu-botton').style.display = "none";
        }
    },
    menuToggle: function (isShow) {
        var isShow = isShow || vd.vdoc.className.indexOf('vdoc-menu-hide') >= 0;
        if (isShow) {
            vd.vdoc.className = vd.vdoc.className.replace("vdoc-menu-hide", "").replace("  ", " ");
        } else {
            vd.vdoc.className = vd.vdoc.className += " vdoc-menu-hide";
        }
    }
}

vd.init();