富文本的实现

环境

chrome浏览器

代码

$richedit = document.getElementById('section');
$richedit.contentEditable = 'true';

开启contenteditable后就可以编辑id为section的区域了

可以粘贴图片，会在代码中插入Base64编码

富文本的操作

document.execCommand(value1,value2,value3)

js提供了对应的API，例如加粗

document.execCommand('bold', false, null);

bold 加粗

italic 斜体

justifycenter 居中对齐

insertimage false url 插入图片 

fontsize false size 字体大小

 

精准控制

var selection = document.getSelection();
console.log('当前选中的文本：');
console.log(selection.toString());

// 取得代表选区的范围                                                
var range = selection.getRangeAt(0);
console.log(range);
// 包裹一个标签使得选中内容突出
var span = document.createElement('span');
span.style.backgroundColor = '#f0f';
range.surroundContents(span);

console.log('当前文本编辑器内容：');
console.log($richedit.innerHTML);