123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zEditor</title>
    <link rel="stylesheet" href="css/zEditor.css">
</head>
<body>
<div id="wrapper">
    <div id="control-area">
        <div class="btn-group">
            <a href="#" class='btn left blue' data-command='undo' onclick="changeStyle(this.dataset)">◀撤销</a>
            <a href="#" class='btn right blue' data-command='redo' onclick="changeStyle(this.dataset)">重做▶</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left grey' data-command='italic' onclick="changeStyle(this.dataset)">斜体</a>
            <a href="#" class='btn middle grey' data-command='bold' onclick="changeStyle(this.dataset)">粗体</a>
            <a href="#" class='btn middle grey' data-command='underline' onclick="changeStyle(this.dataset)">下划线</a>
            <a href="#" class='btn right grey' data-command='strikeThrough' onclick="changeStyle(this.dataset)">删除线</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left blue' data-command='justifyLeft' onclick="changeStyle(this.dataset)">左</a>
            <a href="#" class='btn middle blue' data-command='justifyCenter' onclick="changeStyle(this.dataset)">居中</a>
            <a href="#" class='btn middle blue' data-command='justifyRight' onclick="changeStyle(this.dataset)">右</a>
            <a href="#" class='btn right blue' data-command='justifyFull' onclick="changeStyle(this.dataset)">两端</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left grey' data-command='indent' onclick="changeStyle(this.dataset)">右缩进</a>
            <a href="#" class='btn right grey' data-command='outdent' onclick="changeStyle(this.dataset)">左缩进</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left blue' data-command='insertOrderedList' onclick="changeStyle(this.dataset)">有序列表</a>
            <a href="#" class='btn right blue' data-command='insertUnorderedList' onclick="changeStyle(this.dataset)">无序列表</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left grey' data-command='superscript' onclick="changeStyle(this.dataset)">上标</a>
            <a href="#" class='btn right grey' data-command='subscript' onclick="changeStyle(this.dataset)">下标</a>
        </div>

        <div class="btn-group">
            <a href="#" class='btn left blue' data-command='selectAll' onclick="changeStyle(this.dataset)">全选</a>
            <a href="#" class='btn middle blue' data-command='copy' onclick="changeStyle(this.dataset)">复制</a>
            <a href="#" class='btn right blue' data-command='cut' onclick="changeStyle(this.dataset)">剪切</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left grey' data-command='fontSize' data-value="1" onclick="changeStyle(this.dataset)">1号</a>
            <a href="#" class='btn middle grey' data-command='fontSize' data-value="2" onclick="changeStyle(this.dataset)">2号</a>
            <a href="#" class='btn middle grey' data-command='fontSize' data-value="3" onclick="changeStyle(this.dataset)">3号</a>
            <a href="#" class='btn middle grey' data-command='fontSize' data-value="4" onclick="changeStyle(this.dataset)">4号</a>
            <a href="#" class='btn middle grey' data-command='fontSize' data-value="5" onclick="changeStyle(this.dataset)">5号</a>
            <a href="#" class='btn middle grey' data-command='fontSize' data-value="6" onclick="changeStyle(this.dataset)">6号</a>
            <a href="#" class='btn right grey' data-command='fontSize' data-value="7" onclick="changeStyle(this.dataset)">7号</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left blue' data-command='fontName' data-value="SimSun" onclick="changeStyle(this.dataset)">宋</a>
            <a href="#" class='btn middle blue' data-command='fontName' data-value="SimHei" onclick="changeStyle(this.dataset)">黑</a>
            <a href="#" class='btn middle blue' data-command='fontName' data-value="KaiTi" onclick="changeStyle(this.dataset)">楷</a>
            <a href="#" class='btn middle blue' data-command='fontName' data-value="FangSong" onclick="changeStyle(this.dataset)">仿宋</a>
            <a href="#" class='btn right blue' data-command='fontName' data-value="Microsoft YaHei" onclick="changeStyle(this.dataset)">雅黑</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left' data-command='foreColor' data-value="red" onclick="changeStyle(this.dataset)" style="background-color: red">&nbsp;&nbsp;</a>
            <a href="#" class='btn middle' data-command='foreColor' data-value="orange" onclick="changeStyle(this.dataset)" style="background-color: orange">&nbsp;&nbsp;</a>
            <a href="#" class='btn middle' data-command='foreColor' data-value="yellow" onclick="changeStyle(this.dataset)" style="background-color: yellow">&nbsp;&nbsp;</a>
            <a href="#" class='btn middle' data-command='foreColor' data-value="green" onclick="changeStyle(this.dataset)" style="background-color: green">&nbsp;&nbsp;</a>
            <a href="#" class='btn middle' data-command='foreColor' data-value="cyan" onclick="changeStyle(this.dataset)" style="background-color: cyan">&nbsp;&nbsp;</a>
            <a href="#" class='btn middle' data-command='foreColor' data-value="blue" onclick="changeStyle(this.dataset)" style="background-color: blue">&nbsp;&nbsp;</a>
            <a href="#" class='btn middle' data-command='foreColor' data-value="purple" onclick="changeStyle(this.dataset)" style="background-color: purple">&nbsp;&nbsp;</a>
        </div>
    </div>
    <div id="text-area" contenteditable>
        <h1>欢迎使用zEditor</h1><h2>该项目主要使用document.execCommand实现,下面是参考的MDN web docs的api文档,把所有易于实现的列出来,挨个进行实现~</h2><h3>待支持的document.execCommand api(被划掉的表示已支持):</h3><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>bold<br></strike></li></ul><p></p></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><blockquote style="margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>开启或关闭选中文字或插入点的粗体字效果。IE浏览器使用 &lt;strong&gt;标签,而不是&lt;b&gt;标签。</strike></p></blockquote></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>copy<br></strike></li></ul><p></p></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><blockquote style="margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。</strike></p></blockquote></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>createLink<br></li></ul><p></p></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><blockquote style="margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>将选中内容创建为一个锚链接。这个命令需要一个HREF URI字符串作为参数值传入。URI必须包含至少一个字符,例如一个空格。(浏览器会创建一个空链接)</p></blockquote></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>cut<br></strike></li></ul><p></p></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><blockquote style="margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>&nbsp;剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。</strike></p></blockquote></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>decreaseFontSize<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>&nbsp;给选中文字加上 &lt;small&gt; 标签,或在选中点插入该标签。(IE浏览器不支持)</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>fontName<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在插入点或者选中文字部分修改字体名称. 需要提供一个字体名称字符串 (例如:"Arial")作为参数。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>fontSize<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在插入点或者选中文字部分修改字体大小. 需要提供一个HTML字体尺寸 (1-7) 作为参数。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>foreColor<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在插入点或者选中文字部分修改字体颜色. 需要提供一个颜色值字符串作为参数。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>formatBlock<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>添加一个HTML块式标签在包含当前选择的行, 如果已经存在了,更换包含该行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE浏览器仅仅支持标题标签 H1 - H6, ADDRESS, 和 PRE,使用时还必须包含标签分隔符 &lt; &gt;, 例如 "&lt;H1&gt;".)</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>heading<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>添加一个标题标签在光标处或者所选文字上。 需要提供标签名称字符串作为参数 (例如. "H1", "H6"). (IE 和 Safari不支持)</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>increaseFontSize<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>在选择或插入点周围添加一个BIG标签。(IE浏览器不支持)</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>indent<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>缩进选择或插入点所在的行, 在 Firefox 中, 如果选择多行,但是这些行存在不同级别的缩进, 只有缩进最少的行被缩进。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>insertHorizontalRule<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>在插入点插入一个水平线(删除选中的部分)</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>insertImage<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>在插入点插入一张图片(删除选中的部分)。需要一个image SRC URI作为参数。这个URI至少包含一个字符。空白字符也可以(IE会创建一个链接其值为null)</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>insertOrderedList<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在插入点或者选中文字上创建一个有序列表</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>insertUnorderedList<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在插入点或者选中文字上创建一个无序列表。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>insertParagraph<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>在选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.)</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>italic<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签,而不是 I )</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>justifyCenter<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>对光标插入位置或者所选内容进行文字居中。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>justifyFull<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>对光标插入位置或者所选内容进行文本对齐。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>justifyLeft<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>对光标插入位置或者所选内容进行左对齐。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>justifyRight<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>对光标插入位置或者所选内容进行右对齐。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>outdent<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>对光标插入行或者所选行内容减少缩进量。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>redo<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>重做被撤销的操作。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>removeFormat<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>对所选内容去除所有格式</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>selectAll<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>选中编辑区里的全部内容。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>strikeThrough<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在光标插入点开启或关闭删除线。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>subscript<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在光标插入点开启或关闭下角标。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>superscript<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在光标插入点开启或关闭上角标。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>underline<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在光标插入点开启或关闭下划线。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>undo<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>撤销最近执行的命令。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>unlink<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>去除所选的锚链接的&lt;a&gt;标签</p></blockquote></h1></blockquote>    </div>
    <div id="submit-btn">
        <a href="#" class='btn left blue' onclick="console.log(document.getElementById('text-area').innerHTML)">点击打印文本区域内容(含格式,控制台查看)</a>
    </div>
</div>
<script src="js/zEditor.js"></script>
</body>
</html>
            
          
!
            
              #wrapper {
    border: 1px solid #dddddd;
}
#text-area {
    background: #272822;
    padding: 10px;
    height: auto;
    min-height: 100px;
    max-height: 500px;
    color: #e5e5e5;
    border-radius: 5px;
    overflow: auto;
}
#control-area {
    margin-bottom: 5px;
}
#submit-btn {
    margin-top: 5px;
    width: 265px;
    float: right;
    margin-right: 20px;
}
.btn {
    display: block;
    font-size: 12px;
    text-decoration: none !important;
    padding: 3px 5px;
    border-radius: 3px;
    box-shadow: inset 0px 0px 2px #fff;
}
.left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.middle {
    border-radius: 0;
}
.right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group {
    display: inline-block;
}
.btn-group .btn {
    margin-right: -5px;
    display: inline-block;
}
.btn-group .right {
    margin-right: 10px;
}
.grey {
    color: #444;
    border: 1px solid #d0d0d0;
    background-image: -moz-linear-gradient(#ededed, #e1e1e1);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e1e1e1), to(#ededed));
    background-image: -webkit-linear-gradient(#ededed, #e1e1e1);
    background-image: -o-linear-gradient(#ededed, #e1e1e1);
    text-shadow: 1px 1px 1px #fff;
    background-color: #e1e1e1;
}
.blue {
    color: #41788c;
    border: 1px solid #6fb1c7;
    background-image: -moz-linear-gradient(#aae5f7, #73d0f1);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73d0f1), to(#aae5f7));
    background-image: -webkit-linear-gradient(#aae5f7, #73d0f1);
    background-image: -o-linear-gradient(#aae5f7, #73d0f1);
    text-shadow: 1px 1px 1px #bfeafb;
    background-color: #73d0f1;
}

            
          
!
            
              const changeStyle = (data) => {
    data.value? document.execCommand(data.command, false, data.value):document.execCommand(data.command, false, null)
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console