富文本的实现

环境

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);