网页编程网

www.youkud.com

当前位置：主页 >> 网页特效 >> 正文

纯js实现文本编辑器，富文本

阅读：3442 输入：2020-06-09 11:17:33

<style>
.editButtons span{
    display:inline-block;
    white-space:nowrap;
}
[data-edit] {
    float:left;
    border:0;
    font: 12px/1 monospace;
    background:#ddd;
    padding:4px 8px;
}
[contenteditable] {
    padding:4px 16px;
    background:#eee;
}
</style>
</head>
 
<body>
<div class="editButtons">
<span title="STYLES">
    
    <button data-edit="bold"><b>B</b></button>
    
    <button data-edit="italic"><i>I</i></button>
    
    <button data-edit="underline"><u>U</u></button>
    
    <button data-edit="strikeThrough"><s>S</s></button>
</span>

<span title="TEXT FORMAT">
    
    <button data-edit="formatBlock:p">P</button>
    <button data-edit="formatBlock:H1">H1</button>
    <button data-edit="formatBlock:H2">H2</button>
    <button data-edit="formatBlock:H3">H3</button>
</span>

<span title="FONT SIZE">
    
    <button data-edit="fontSize:1">s</button>
    <button data-edit="fontSize:3">M</button>
    <button data-edit="fontSize:5">L</button>
</span>

<span title="LISTS">
    
    <button data-edit="insertUnorderedList">UL</button>
    <button data-edit="insertOrderedList">OL</button>
</span>

<span title="ALIGNMENT">
    
    <button data-edit="justifyLeft">⇤</button>
    <button data-edit="justifyCenter">↔</button>
    <button data-edit="justifyRight">⇥</button>
</span>

<span title="CLEAR FORMATTING">
    
    <button data-edit="removeFormat">×</button>
</span>

<span title="COPY">
    
    <button data-edit="copy">C</button>
</span>
</div>

<div contenteditable id="textbox">
<p>文本编辑器</p>
</div>
</body>
<script>
document.querySelectorAll("[data-edit]").forEach(btn =>
btn.addEventListener("click", function (ev) {
    ev.preventDefault();
    console.log(this.getAttribute("data-edit"))
    const cmd_val = this.getAttribute("data-edit").split(":");
    if(cmd_val[0] == 'copy'){ // 复制选中的文本
        document.execCommand(cmd_val[0]);
    }else{
        document.execCommand(cmd_val[0], false, cmd_val[1]);
    }
    
})
);
</script>

上一篇：css3实现无缝滚动效果
下一篇：css3实现心型特效

相关阅读: PHP过滤敏感词; js实现敏感词过滤; js字符串截取slice、substr与substring

下载专区: 软件下载（提取码：mtag）

Tag

HTML工具: 进制间转换; 进制转换（带小数）; html代码运行

HTML工具: 字母翻转; 硬盘整数分区; html颜色代码

HTML工具: 除空格回车; 万年历; fojiao

HTML工具: 小游戏; 在线绘画; 更多

手机版
联系微信:jingqishens