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

主页 M

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

2020-06-09 网页编程网 网页编程网

<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>

阅读原文

阅读 3445

123 显示电脑版