切图网(qietu.com)是国内首屈一指的html5前端开发服务商,为cctv7、腾讯、智联招聘等都提供了专业的web前端开发服务,而在近期的一个web前端项目中,因为实现一个功能,我们手写了一个编辑器, 关于如何去制作html5编辑器的原理,我们简单的分享一下:
使一部分 HTML 的 DOM 作为容器进入编辑状态,只需要为这个 DOM 添加一个 contentEditable
属性。 一般来讲,是使用div
或者article
元素作为这样的容器。
被添加 contentEditable
属性的容器元素的子元素都就可以由用户修改了, 如果想在这个容器下面嵌套一个不可修改的子元素,需要显式地在这个子元素中添加 contentEditable='false'
这样的声明。
当然要做出一个像样的编辑器,还需要很多代码,比如获取用户的鼠标焦点,获得用户选择的内容并且进行加粗,变色等等的操作,以上只是代码的一部分。
html5前端切图电话: 027-81777732
关注“qietuwang”微信公众号,获取一手干货内容推送
本文由切图网原创,转载请保留版权:
微信扫一扫二维码访问