writty实现自带夜晚暗黑模式富文本写作编辑器代码-html代码-BFW代码库

writty实现自带夜晚暗黑模式富文本写作编辑器代码

代码语言：html

所属分类：其他

代码描述：writty实现自带夜晚暗黑模式富文本写作编辑器代码，使用HtmlSanitizer过滤危险html代码，使用simplebar美化滚动条。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--Fonts -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/all.5.11.2.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/HtmlSanitizer.js"></script>
    <!--<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script> -->
    <!-- SimpleBar core -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/simplebar.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplebar.min.js"></script>
    <!--CSS -->
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/writty.css">
</head>

<body>
    <div class="container">
        <div class="topbar">
            <div class="topbar-row">
                <label class="switch">
                    <input id="theme-switch" type="checkbox">
                    <div class="switch-slider" title="Theme switch"> <span class="sun"><i class="fas fa-sun"></i></span><span class="moon"><i class="fas fa-moon"></i></span></div>
                </label>

                <button class="topbar-button" onclick="clearStorage()" type="button"><i class="fas fa-pencil-alt"></i>&nbsp; 新文本</button>
                <button class="topbar-button" onclick="triggerImportFile()" type="button"><i class="fas fa-upload"></i>&nbsp; 导入txt</button>
                <input id="import-file" type="file" accept=".md,.html">
            </div>
        </div>
        <div class="toolbar">
            <div class="popup">
                <button type="button" class="popup-button toolbar-button"><i class="fas fa-heading"></i></button>
                <div class="popup-window">
                    <button title="Heading format" class="popup-item Heading" data-edit="formatBlock:h1">Heading</button>
                    <button title="Subheading format" class="popup-item Subheading" data-edit="formatBlock:h2">Subheading</button>
                    <button title="Body format" class="popup-item Body" data-edit="formatBlock:p">Body</button>
                    <button title="Caption format" class="popup-item Caption" data-edit="formatBlock:h5">Caption</button>
                </div>
            </div>

            <button title="Bold" class="toolbar-button" data-edit="bold"><i class="fas fa-bold"></i></button>
            <button title="Italic" class="toolbar-button" data-edit="italic"><i class="fas fa-italic"></i></button>
            <button title="Underline" class="toolbar-button" data-edit="underline"><i class="fas fa-underline"></i></button>
            <button title="Quote" class="toolbar-button" data-edit="formatBlock:blockquote"><i class="fas fa-quote-right"></i></button>

            <button title="Unordered list" class="toolbar-button" data-edit="insertUnorderedList"><i class="fas fa-list-ul"></i></button>
            <button title="Ordered list" class="toolbar-button" data-edit="insertOrderedList"><i class="fas fa-list-ol"></i></button>
            <button title="Insert link" class="toolbar-button" type="button" data-edt="insertLink"><i class="fas fa-link"></i></button>
            <div class="popup">.........完整代码请登录后点击上方下载按钮下载查看