oxUnd · November 2, 2014 00:41
diff --git a/selection.html b/selection.html
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8"/>
        <title>This is editor TEST</title>
        <style type="text/css">
        #editor {
            margin: 10px 0;
            border: 1px solid #CCCCCC;
            width: 400px;
            height: 200px;
        }
        </style>
    </head>
    <body>
        <div id="editor-options">
            <button type="submit">B</button>
            <button type="submit">I</button>
            <button type="submit">yellow</button>
            <button type="submit">red</button>
            <button type="submit">@</button>
        </div>
        <div id="editor" contenteditable="true"></div>
        <script type="text/javascript">

        console.log("it's work!");

        var _ = {
            is: function (val, type) {
                if (Object.prototype.toString.call(val) == '[object ' + type + ']') {
                    return true;
                }
                return false;
            }
        };

        var optionArea = document.getElementById('editor-options');
        var editor = new Editor('editor');
        optionArea.onclick = function (e) {
            var elm = e.srcElement || e.target;
            var ctrlName = elm.innerHTML.trim();
            switch(ctrlName) {
                case 'B':
                    editor.command('b');
                    break;
                case 'I':
                    editor.command('i');
                    break;
                case 'yellow':
                    editor.command('c_yellow');
                    break;
                case 'red':
                    editor.command('c_red');
                    break;
                case '@':
                    editor.queryWord();
                    break;
            }
        };
        

        console.log(_);

        function Editor(id, opt) {
            var elm = id;
            if (_.is(id, 'String')) {
                elm = document.getElementById(id);
            }

            this.el = elm;
        }

        Editor.prototype._getRange = function () {
            var sel = window.getSelection();
            return sel.getRangeAt(0);
        };

        Editor.prototype.queryWord = function () {
            var range = this._getRange();
            var selContents = range.extractContents();
            var node = document.createElement('input');
            node.type = 'text';
            node.name = 'test';
            console.log(selContents);
            node.value = selContents.textContent;
            range.insertNode(node);
        };

        Editor.prototype.command = function (type) {
            var range = this._getRange();
            var selContents = range.extractContents();
            var nodeMap = {
                'b': {
                    name: 'span',
                    style: {
                        'fontWeight': 'bold',
                        'fontSize': '1.2em'
                    }
                },
                'i': {
                    name: 'em'
                },
                'c_yellow': {
                    name: 'span',
                    style: {
                        color: 'yellow'
                    }
                },
                'c_red': {
                    name: 'span',
                    style: {
                        color: 'red'
                    }
                }
            };

            var node = document.createElement(nodeMap[type].name);
            if (nodeMap[type].style) {
                var styles = nodeMap[type].style;
                for (var i in styles) {
                    if (styles.hasOwnProperty(i)) {
                        node.style[i] = styles[i];
                    }
                }
            }
            node.appendChild(selContents);
            range.insertNode(node);
        };

        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>This is editor TEST</title>
	<style type="text/css">
	#editor {
	margin: 10px 0;
	border: 1px solid #CCCCCC;
	width: 400px;
	height: 200px;
	}
	</style>
	</head>
	<body>
	<div id="editor-options">
	<button type="submit">B</button>
	<button type="submit">I</button>
	<button type="submit">yellow</button>
	<button type="submit">red</button>
	<button type="submit">@</button>
	</div>
	<div id="editor" contenteditable="true"></div>
	<script type="text/javascript">

	console.log("it's work!");

	var _ = {
	is: function (val, type) {
	if (Object.prototype.toString.call(val) == '[object ' + type + ']') {
	return true;
	}
	return false;
	}
	};

	var optionArea = document.getElementById('editor-options');
	var editor = new Editor('editor');
	optionArea.onclick = function (e) {
	var elm = e.srcElement \|\| e.target;
	var ctrlName = elm.innerHTML.trim();
	switch(ctrlName) {
	case 'B':
	editor.command('b');
	break;
	case 'I':
	editor.command('i');
	break;
	case 'yellow':
	editor.command('c_yellow');
	break;
	case 'red':
	editor.command('c_red');
	break;
	case '@':
	editor.queryWord();
	break;
	}
	};


	console.log(_);

	function Editor(id, opt) {
	var elm = id;
	if (_.is(id, 'String')) {
	elm = document.getElementById(id);
	}

	this.el = elm;
	}

	Editor.prototype._getRange = function () {
	var sel = window.getSelection();
	return sel.getRangeAt(0);
	};

	Editor.prototype.queryWord = function () {
	var range = this._getRange();
	var selContents = range.extractContents();
	var node = document.createElement('input');
	node.type = 'text';
	node.name = 'test';
	console.log(selContents);
	node.value = selContents.textContent;
	range.insertNode(node);
	};

	Editor.prototype.command = function (type) {
	var range = this._getRange();
	var selContents = range.extractContents();
	var nodeMap = {
	'b': {
	name: 'span',
	style: {
	'fontWeight': 'bold',
	'fontSize': '1.2em'
	}
	},
	'i': {
	name: 'em'
	},
	'c_yellow': {
	name: 'span',
	style: {
	color: 'yellow'
	}
	},
	'c_red': {
	name: 'span',
	style: {
	color: 'red'
	}
	}
	};

	var node = document.createElement(nodeMap[type].name);
	if (nodeMap[type].style) {
	var styles = nodeMap[type].style;
	for (var i in styles) {
	if (styles.hasOwnProperty(i)) {
	node.style[i] = styles[i];
	}
	}
	}
	node.appendChild(selContents);
	range.insertNode(node);
	};

	</script>
	</body>
	</html>