zoukankan      html  css  js  c++  java
  • 实现简易版富文本编辑器

    所谓富文本编辑器(RTE)是指一种可以内嵌于浏览器,所见即所得的文本编辑器,方便用户在线编辑文章或新消息等。由于目前市场上的浏览器种类繁多,对应的RTE还没有一个统一的标准,但对于最基本的功能,各浏览器提供的API基本一致,从而使得编写一个跨浏览器的富文本编辑器成为可能。

    基本原理

    我们通常是利用div和iframe实现文本编辑功能的,其中,如果要在div中编辑文本,需设置其contentEditable=“true”即可,如果要在iframe中编辑文本,需设置designMode=“on”即可。虽然两种方法均可实现文本编辑,但大都是利用iframe来实现富文本编辑的。

    (1)首先,使用iframe可以解决浏览器兼容性问题,可以方便的在不同浏览器中获取选中的文字;

    (2)使用iframe编辑文本可以实现所见即所得的效果,相当于显示了浏览器解析源码后的内容;

    (3)使用iframe可是实现直接在iframe下的document中进行文字操作(通过iframe.contentWindow.document获取iframe下的document),不会影响到当前文档。

    利用iframe开发富文本编辑器时主要用到documen.execCommand(command,show,value)方法,其中

    command:表示要执行的命令名称,

    show:boolean类型,表示是否向用户显示命令特定的对话框或消息框,

    value:string类型,表示要使用该命令分配的值。

    本文的简易版富文本编辑器中所用到的执行命令主要包括:

    加粗命令:documen.execCommand(bold,false,null);

    斜体命令:documen.execCommand(italic,false,null);

    下划线命令:documen.execCommand(underline,false,null);

    删除线命令:documen.execCommand(StrikeThrough,false,null);

    左对齐命令:documen.execCommand(justifyleft,false,null);

    居中对齐命令:documen.execCommand(justifycenter,false,null);

    右对齐命令:documen.execCommand(justifyright,false,null);

    有序排序对齐命令:documen.execCommand(insertorderedlist,false,null);

    无序排序对齐命令:documen.execCommand(insertunorderedlist,false,null);

    上传图片命令:documen.execCommand(insertImage,false,src);

    添加链接命令:documen.execCommand(createLink,false,href);

    documen.execCommand(command,show,value)方法的执行命令非常繁多,远不止本文提到的一星半点,具体的执行命令可以去google上搜索,这里推荐微软MSDN上的execCommand method,链接地址http://msdn.microsoft.com/en-us/library/ms536419(v=vs.85).aspx

    效果展示

  • 相关阅读:
    sql-定义变量
    sql-逻辑循环while if
    iOS生命周期
    iOS系统架构
    SVN记住密码
    视图在控制权限的作用
    20140524数据库课笔记
    char和varchar区别
    多表查找
    create table约束
  • 原文地址:https://www.cnblogs.com/twobin/p/3391337.html
Copyright © 2011-2022 走看看