HTML JS实现富文本编辑器

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dkbnull/article/details/53957909

HTML/CSS/JS 目录:https://blog.csdn.net/dkbnull/article/details/87934939

 

       JS实现富文本编辑器主要借助 document.execCommand 方法。

       关于 document.execCommand 方法,当文档对象被转换为设计模式的时候(选中,设置contentEditable等),文档对象提供了一个execCommand方法,通过给这这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对文档选中区域的操作 (如bold, italics等), 也可以插入一个元素(如增加一个a链接) 或者修改一个完整行 (如缩进)。当元素被设置了contentEditable,通过执行execCommand 方法可以对当前活动元素进行很多操作。

​​​​​​​bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

返回值

       Boolean ,如果是 false 则表示操作不被支持或未被启用。

参数

       aCommandName:String ,命令的名称 。

       aShowDefaultUI:Boolean ,是否展示用户界面,一般为 false。Mozilla 没有实现。

       aValueArgument:一些命令需要一些额外的参数值(如insertimage需要提供这个image的url)。默认为null。

       可用命令列表可以参阅:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

 

富文本编辑器具体实现

       1、使用H5特性,自定义标签属性

<a class="btn" data-role="fontName" data-value="宋体">宋体</a>

       2、通过document.execCommand命令将相应文本设置为相应样式

$(".editor-option a").click(function(e) {    
        switch($(this).data("role")) {    
            case "fontName":    
                document.execCommand($(this).data("role"), false, $(this).data("value"));    
                break;    
            case "fontSize":    
                document.execCommand($(this).data("role"), false, $(this).data("value"));    
                break;    
            default:    
                document.execCommand($(this).data("role"), false, null);    
                break;    
        }    
    })    
});

 


源码下载:http://download.csdn.net/detail/dkbnull/9726334

 

 

展开阅读全文

没有更多推荐了,返回首页