富文本编辑器

方案一:使用iframe

给iframe指定一个非常简单的HTML页面作为其内容来源:



<html>
<head>
    <title>这里是富文本的iframe页面title>
head>
<body>
body>
html>

要让它可以编辑,必须要将designMode设置为on


<iframe name='richedit' style='height:100px;width:100px;' src='iframe.html'>

<script type='text/javascript'>
EventUtils.addHander(window, 'load', function() {
    frames['richedit'].document.designMode = 'on';
})
script>

EventUtil请参考【事件处理程序】这篇博客

方案二:直接使用contenteditable属性(推荐)

contenteditable给页面中的任何元素,然后用户立即就可以编辑该元素。

这种方法之所以受欢迎,是因为它不需要iframe、空白页和JavaScript,只要为元素设置contenteditable属性即可。

<div id='richedit' class='editable' contenteditable>div>

通过在这个元素上设置contenteditable属性,也能打开或关闭编辑模式。

let div = document.getElementById('richedit');
div.conteneditable = true;

操作富文本

与富文本编辑器交互的主要方式,就是使用document.execCommand()

这是对选中文本的操作。

它包含三个参数:

  1. 要执行的命令名称;
  2. 为了确保跨浏览器的兼容性,第二个参数应该始终设置为false因为FireFox会在该参数为true时抛出错误;
  3. 命令对应的值;
  • 方案一的实现
// 转换粗体文本
frames['richedit'].document.execCommand('bold', false, null);
// 格式为1级标题
frames['richedit'].document.execCommand('formatblock', false, '

');

  • 方案二的实现

document:当前窗口的document对象。

// 转换粗体文本
document.execCommand('bold', false, null);
// 格式为1级标题
document.execCommand('formatblock', false, '

');

注意:虽然所有浏览器都支持这些命令,但这些命令所产生的HTML仍然有很大不同。例如:执行bold命令时,IE和Oprea会使用标签包围文本,Safari和Chorme使用标签,而Firefox使用标签。

检测命令


  • queryCommandEnabled()

    检测是否可以针对当前选择的文本,或者当前插入字符所在位置执行某个命令。

    // 检测'bold'命令是否可用
    document.queryCommandEnabled('bold'); // true/false
    
  • queryCommandState()

    检测当前选择的文本状态。

    // 检测'bold'是否已应用到文本上
    document.queryCommandEnabled('bold'); // true/false
    
  • queryCommandValue()

    检测执行命令传入的值(即execCommand的第三个参数)。

    // 检测对选中文本执行'fontsize'命令时,传入的参数,比如是7
    document.queryCommandValue('fontsize'); // 7
    

富文本选区


在富文本编辑器中,使用框架(iframe)的getSelection()方法,可以确定实际选择的文本。

这个方法是window对象和document对象的属性,调用它会返回一个表示当前选择文本的Selection对象Selection 对象属性。

由于可以直接操作选择文本的DOM表现,因此访问DOM范围与使用execCommand()相比,能够对富文本编辑器进行更加细化的控制。

/**为富文本编辑器中被选择的文本添加黄色的背景**/
var selection = frames["richedit"].getSelection();
//取得选择的文本
var selectedText = selection.toString();
//取得代表选区的范围
var range = selection.getRangeAt(0);
//突出显示选择的文本
var span = frames["richedit"].document.createElement("span");
span.style.backgroundColor = "yellow";
range.surroundContents(span);

你可能感兴趣的:(javascript)