制作最简单的富文本编辑器

1、借助HTML DOM的 contentEditable 属性
(描述元素的内容是否可编辑)来让div内容可编辑

2、document的execCommand 方法
该方法允许运行命令来操纵可编辑内容区域的元素。当使用contentEditable时,调用 execCommand() 将影响当前活动的可编辑元素。如何使用可以查看execCommandMDN对应的文档说明

以下为富文本编辑器完整代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>富文本编辑器Gtitle>
        <link href="/static/assets/vendors/bootstrap/css/bootstrap.css" rel="stylesheet">
        <style>
            body{
            padding: 100px 200px;
            }
            #editor {
                height:500px;
                margin: 30px;
            }
        style>
    head>
    <body>
        <div id="editparent">
            
            <div id='editControls' style='text-align:center; padding:5px;'>                           
                <div class='btn-group'>
                    <a class='btn' data-role='bold' href='#'><b>Boldb>a>
                    <a class='btn' data-role='italic' href='#'><em>Italicem>a>
                    <a class='btn' data-role='underline' href='#'><u><b>Ub>u>a>
                    <a class='btn' data-role='strikeThrough' href='#'><strike>abcstrike>a>
                div>
            div>
            
            <div id='editor' class='form-control'  contenteditable>
                <h3>在这里输入内容h3>
            div>
        div>
        <script src="/static/assets/vendors/jquery/jquery.js">script>
        <script>
            $(function() {
                $('#editControls a').click(function(e) {
                    document.execCommand($(this).data('role'), false, null);                  
                })
            });
        script>
    body>
html>

在浏览器中界面显示:

制作最简单的富文本编辑器_第1张图片

你可能感兴趣的:(JS,H5)