简单的富文本编辑器

javascript
  目录
  1. 1. 简单的富文本编辑器

超级简单的富文本编辑器

简单的富文本编辑器

这是一个超级简单富文本编辑器，功能很简单，但是富文本编辑器的写法基础是有的，可以在这个基础上进行增加改进。
主要用到了div的contentEditable属性，还有document.execCommand方法，具体代码见下面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>简易富文本编辑器.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
<style type="text/css">
    #editor {width:600px;height:200px;border:1px solid #ccc;
    }
    button {margin:1px;border:1px solid #aaa;background:#ffe;cursor:pointer;overflow:hidden;}
    button:hover {background:#ccc;border:1px solid #00f;}
</style>
  </head>
  
  <body>
  <button id="btn1"></button>
  <button id="btn2"></button>
  <button id="btn3"></button>
  <button id="btn4"></button>
  <div id="editor">
      Click to Editor...
  </div>
  <input id="printContent" type="button" value="打印编辑器内容">
  <script type="text/javascript">
        initEditor();
        
        //初始化
        function initEditor() {
            openOrCloseEditor("editor", "true");//开启元素编辑
            bindBtnCommand();//给样式按钮绑定命令
        }
        
        /**
        * 
        * 功能： 开启元素编辑功能
        * 输入： el：编辑器ID; operate：Boolean值，表示启动还是关闭
        */
        function openOrCloseEditor(el, operate) {
            var editor = document.getElementById(el);
            editor.contentEditable = operate;
        }
        
        //按钮绑定命令
        function bindBtnCommand() {
            var btns = document.getElementsByTagName("button"),
                btnConfigs = "backcolor|#f00|设置背景色 bold|null|字体加粗 indent|null|缩进 fontName|微软雅黑|转换字体".split(" "),
                len = btnConfigs.length;
            for(var i = 0, btnConfig; btnConfig = btnConfigs[i]; i++) {
                (function(btnConfig, btn) {
                    var msg = btnConfig.split("|"),
                        lab = msg[0],
                        value = msg[1],
                        title = msg[2];
                    btn.innerHTML = lab;
                    btn.title = title;
                    btn.onclick = function(e) {
                        document.execCommand(lab, false, value);
                    }
                })(btnConfig, btns[i]);
            }
        }

        //获取编辑器内嵌内容
        function getContent(el) {
            var editor = document.getElementById(el);
            return editor.innerHTML;
        }
        
        //打印按钮绑定触发事件
        document.getElementById("printContent").onclick = function(e) {
            var content = getContent("editor");
            document.write(content);
        };
    </script>
  </body>
</html>

上面的代码直接粘贴就可以跑起来哦。

  基础知识