富文本API

这个笔记来自网络资料的总结
简书大佬三省吾身_9862
tuobaye个人博客

富文本有相关3个API和一个新属性

  • var selection = window.getSelection();
  • var range = selection.getRangeAt;
  • document.execCommand(x,y,z);
  • 新属性 contenteditable="true"

第一步

<!-- 让标签变成可输入的区域 -->
<div contenteditable="true" id="rich-editor">

selection 对象和 range 对象来操作光标
通常情况下我们不会直接操作 selection 对象,而是需要操作用 seleciton 对象所对应的用户选择的 ranges (区域),俗称拖蓝

var selection = window.getSelection();
var range = selection.getRangeAt(0);
// 由于浏览器当前可能存在多个文本选取,所以 getRangeAt 函数接受一个索引值。在富文本编辑其中,我们不考虑多选取的可能性,就当上面是固定写法

image.png

这是光标位置的打印,因为光标和console不能同时操作,所以用了计时器

image.png

这是拖蓝位置的打印,因为光标和console不能同时操作,所以用了计时器

上面两个图的的属性

  • startContainer: range 范围的起始节点。
  • endContainer: range 范围的结束节点
  • startOffset: range 起点位置的偏移量。
  • endOffset: range 终点位置的偏移量。
  • commonAncestorContainer: 返回包含 startContainer 和 endContainer 的最深的节点。
  • collapsed: 返回一个用于判断 Range 起始位置和终止位置是否相同的布尔值。

selection的方法有

selection.getRangeAt()
selection.removeAllRanges()
selection.addRange()

range的方法有

range.setStart(): 设置 Range 的起点
range.setEnd(): 设置 Range 的终点
range.selectNode(): 设定一个包含节点和节点内容的 Range
range.collapse(): 向指定端点折叠该 Range
range.insertNode(): 在 Range 的起点处插入节点。
range.cloneRange(): 返回拥有和原 Range 相同端点的克隆 Range 对象

所以富文本编辑器的基本操作就是,删除原有的 ranges 来保证光标一定会变动到我们想要的位置

let selection  =  window.getSelection();
selection.removeAllRanges();
let range  =  document.createRange();
range.setStart(startContainer,startOffset);
range.setEnd(endContainer,endOffset);
selection.addRange(range);

对文本的操作

// 一句代码实现富文本编辑器的核心
document.execCommand(x,y,z)

// x参数
// 有选中文字,加粗,下划线,删除线,斜体
// 有有当前光标所在行,左 居中 右 两端
// 有有光标所在行, 右缩进 左缩进
// 有有插入,有序列表,无序列表
// 有有选中文字变成,上标 下标
// 有有,全选 复制 剪切
// 有有选中字体,字体大小
// 有有选中字体,字体风格
// 有有选择字体,字体颜色

// y参数,就是false

// z参数是需要选中的功能传进来的value

具体查看上面第二个大佬的代码

》》还需要在这上面添加几个功能,修几个bug

插入 ul 和 ol 位置错误
当我们调用 document.execCommand("insertUnorderedList", false, null) 来插入一个列表的时候,新的列表会被插入

标签中,为此我们需要每次调用该命令前做一次修正,参考代码如下:

function  adjustList(){
   let lists = document.querySelectorAll("ol, ul");
   for(let i = 0;i < lists.length;i++)  {
      let ele = lists[i];  // ol
      let parentNode = ele.parentNode;
      if(parentNode.tagName === 'P' && parentNode.lastChild === parentNode.firstChild){
         parentNode.insertAdjacentElement('beforebegin',ele);
         parentNode.remove()
      }
   } 
}

插入分割线
调用 document.execCommand('insertHorizontalRule', false, null); 会插入一个<hr>标签
光标和<hr>的效果一致了。为此要判断当前光标是否在<li>里面,如果是则在<hr>后面追加一个空的文本节点 #text 不是的话追加 <p><br></p>。然后将光标定位在里面,可用如下方式查找。

function  findParentByTagName(root, name){
    let parent=root;
    if  (typeof name === "string"){
        name = [name];
    }
    while(name.indexOf(parent.nodeName.toLowerCase())===-1&&parent.nodeName!=="BODY"&&parent.nodeName!=="HTML"){
        parent=parent.parentNode;
    }
    return  parent.nodeName === "BODY" || parent.nodeName === "HTML"?null:parent;
}

插入链接
调用 document.execCommand('createLink', false, url); 方法我们可以插入一个 url 链接,但是该方法不支持插入指定文字的链接。同时对已经有链接的位置可以反复插入新的链接。为此我们需要重写此方法。

function  insertLink(url,title){
    let selection = document.getSelection(),
    range = selection.getRangeAt(0);
    if(range.collapsed){
        let start = range.startContainer,
        parent=Util.findParentByTagName(start,'a');
        if(parent){
            parent.setAttribute('src',url);
        }else{
            this.insertHTML(`<a href="${url}">${title}</a>`);
        }
    }else{
        document.execCommand('createLink',false,url);
    }
}

处理 paste 粘贴
在富文本编辑器中,粘贴效果默认采用如下规则:

  1. 如果是带有格式的文本,则保留格式(格式会被转换成html标签的形式)
  2. 粘贴图文混排的内容,图片可以显示,src 为图片真实地址。
  3. 通过复制图片来进行粘贴的时候,不能粘入内容
  4. 粘贴其他格式内容,不能粘入内容

为了能够控制粘贴的内容,我们监听 paste 事件。该事件的 event 对象中会包含一个 clipboardData 剪切板对象。

对于规则一和规则二,我们可以利用该对象的 getData 方法来获得带有格式和不带格式的内容

// 先判断格式
let plainText = event.clipboardData.getData('text/plain');  // 无格式文本
let plainHTML = event.clipboardData.getData('text/html'); // 有格式文本
// 再选择调用
document.execCommand('insertText', false, plainText);
// 或
document.execCommand('insertHTML', false, plainHTML); 
来重写编辑上的paste效果。

然而对于规则 3 ,上述方案就无法处理了。这里我们要引入 event.clipboardData.items,这是一个数组包含了所有剪切板中的内容对象,当你复制了一张图片来粘贴,那么 event.clipboardData.items 的长度就为二

// items[0] 为图片的名称
// items[0].kind 为 string
// items[0].type 为 text/plain 或 text/html
// 获取内容方式如下:
items[0].getAsString(str => {
    // 处理 str 即可
})

// items[1] 为图片的二进制数据
// items[1].kind 为 file
// items[1].type 为 图片的格式
// 想要获取里面的内容,我们就需要创建 FileReader 对象了,示例代码如下:

let file = items[1].getAsFile();
// file.size 为文件大小
let reader = new FileReader();
reader.onload = function()  {
    // reader.result 为文件内容,就可以做上传操作了
}

if(/image/.test(item.type))  {
    reader.readAsDataURL(file); // 读取为 base64 格式
}

插入图片失败

document.execCommand('insertImage', 'false', url);

如果编辑器失去了焦点,那么 selection 和 range 对象将销毁。因此调用 insertImage 时,并不能获得光标所在位置,因此失败。为此需要增加,backupRange() 和 restoreRange() 函数。当页面失去焦点的时候记录 range 信息,插入图片前恢复 range 信息

// 需要在光标离开时记录位置,使用的是最上面的两句代码
var selection = window.getSelection();
var range = selection.getRangeAt(0);

// 当用户选择了图片文件后,执行fous()
document.querySelector("#rich-editor").focus()

// 然后移动光标到之前的位置
// 再执行
document.execCommand('insertImage', 'false', url);
posted @ 2019-12-14 01:03  一个年轻淫  阅读(1060)  评论(0编辑  收藏  举报