简易文本编辑器

API:

document.execCommand('bold', false, null);

h5新特性：

<div contenteditable="true"><div>

在标签中添加contenteditable属性后，当鼠标触发该标签时标签边框会变成高亮的蓝色，如果要取消这一样式，需要在css中添加如下代码：

div{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: 0;
}

指令：editor
自定义高度属性：editor-height='200' 不允许添加单位PX

html部分:

<div editor></div>

js(angularJs自定义指令)：

var module = angular.module('editor', []);
    var templateUrl = 'views/editor/template.html';
    module.directive('editor', function () {
        return {
            restrict: 'A',
            replace: true,
            templateUrl: templateUrl,
            scope:{
                editorHeight: '@editorHeight',
            },
            controller: ['$scope', function ($scope) {
                $scope.editorHeight = $scope.editorHeight ? $scope.editorHeight : '300';
                $scope.colors = ["red", "black", "yellow", "blue"];
                $scope.beBond = function () {
                    document.execCommand('bold', false, null);
                };
                $(function () {
                    $("body").click(function (e) {
                        if (e.target.id != 'fontColor' && e.target.id != 'colorButton' && e.target.className != 'chooseColor ng-scope') {
                            $('#fontColor').hide();
                        }
                        if (e.target.id == 'colorButton') {
                            console.log($('#fontColor').css('display'));
                            $('#fontColor').toggle();
                        }
                    });
                    $(document).on('click', '.chooseColor', function () {
                        document.execCommand('foreColor', false, $(this).css('background-color'));
                        $('#fontColor').toggle();
                    });
                })
            }]
        }
    });

html模板页：

<div>
    <div id="selectStyle">
        <input class="styleButton"  type="button" value="加粗" ng-click="beBond()">
        <div id="changeFontColor">
            <input class="styleButton" id="colorButton" type="button" value="字体颜色">
            <div id="fontColor">
                <input ng-repeat="item in colors" id="{{item}}" class="chooseColor" type="button" value="" ng-style="{'background':'{{item}}' ,'width':'20px','height':'20px','display':'inline-block','border-radius':'10px','margin':'5px','cursor':'pointer','border':'none'}">
            </div>
        </div>
    </div>
    <div id="contentBox" contenteditable="true"  ng-style="{'height':'{{editorHeight}}px' }">
    </div>
</div>

css样式：

/*选择按钮*/
​
#selectStyle {
    border: solid 1px #ccc;
    margin: 10px 0px;
    border-radius: 5px;
    background: #F1F1F1;
    box-shadow: 0px 0px 10px #ccc;
    width: 100%;
}
​
    #selectStyle .styleButton {
        background: #8BADE4;
        color: white;
        border: solid 1px #ccc;
        box-shadow: 0px 0px 5px #ccc;
        border-radius: 7px;
        margin: 5px;
        cursor: pointer;
    }
​
#changeFontColor {
    position: absolute;
    display: inline-block;
}
/*输入文本框*/
​
#contentBox {
    border: solid 1px #ccc;
    box-shadow: 0px 0px 10px #ccc;
    border-radius: 10px;
    cursor: text;
    padding: 10px;
    height: auto;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: 0;
}
/*颜色选择弹框*/
​
#fontColor {
    position: relative;
    top: -3px;
    left: 5px;
    display: none;
    z-index: 100;
    border: solid 1px #ccc;
    border-radius: 5px;
    background: white;
    width: 130px;
    height: 35px;
    box-shadow: 0px 0px 5px #ccc;
}