js实现富文本编辑器，支持上传图片base64

2021-04-22 网页编程网 网页编程网

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Editor</title>
</head>
<style>
  * { margin: 0; padding: 0; }
  html, body { height: 100%; width: 100%; }
  ul { list-style: none; }
  .wrap-editor{ width: 800px; height: 500px; border: 1px solid #ccc; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0; margin: auto; overflow: hidden; }
  .wrap-editor .menu{ width: 100%; height: 35px; border-bottom: 1px solid #ccc;
    cursor: pointer; font-size: 0; line-height: 35px; user-select: none;font-weight: bold; }
  .wrap-editor .menu li{ display: inline-block; font-size: 16px; padding: 0 10px; }
  .wrap-editor .editor{ width: 100%; height: 465px; outline: 0; overflow: auto; padding: 8px; box-sizing: border-box; }
  .color{ position: relative; }
  .color>ul{ display: none;position: absolute;border: solid #ccc;border-width: 0 1px 1px 1px; width: 52px;
  left: 0;top: 36px;background: #fff; }
  .color>ul .red{ color: red; }
  .color>ul .blue{ color: blue; }
  .add-img{ position: relative; }
  .inster-img{ position: absolute;display: block;width: 100%;height: 100%;top: 0;left: 0;opacity: 0; }
</style>
<body>
  <div class="wrap-editor">
    
    <ul class="menu">
      <li class="bold">B</li>
      <li class="h1">H1</li>
      <li class="color">
        A
        <ul>
          <li class="red">红色</li>
          <li class="blue">蓝色</li>
        </ul>
      </li>
      <li class="add-img">
        添加图片
        <input class="inster-img" type="file" />
      </li>
    </ul>
    
    <div class="editor" contenteditable="true">
    </div>
  </div>
</body>
<script>
var editor = document.querySelector('.editor') // 编辑器
var bold = document.querySelector('.bold') // 加粗按钮
var h1 = document.querySelector('.h1') // H1
var insterImg = document.querySelector('.inster-img') // 插入图片
// 文字颜色
var color = document.querySelector('.color')
var colorList = document.querySelector('.color>ul')
var red = document.querySelector('.red')
var blue = document.querySelector('.blue')

editor.innerHTML = '请输入内容' // 给编辑器一个初始内容

// 执行命令
function execCommand(commandName, value) {
  value = value ? value : null
  document.execCommand(commandName, false, value)
}

// 定义一个变量
var selectedRange

// 保存选择区域
function saveSelection() {
  var sel = window.getSelection()
  if (sel.getRangeAt && sel.rangeCount) {
    selectedRange = sel.getRangeAt(0)
  }
}

// 恢复选择区域
function restoreSelection() {
  var selection = window.getSelection()
  if (selectedRange) {
    try {
      selection.removeAllRanges()
    } catch (ex) {
      document.body.createTextRange().select()
      document.selection.empty()
    }
    selection.addRange(selectedRange)
  }
}

// 将图片读为base64格式
function imgToBase64(file) {
  return new Promise((resolve, reject) => {
    var reader = new FileReader()
    reader.readAsDataURL(file);
    reader.onload = function () {
      resolve(this.result)
    }
  })
}

// 在editor内做了鼠标键盘操作就保存一下选择区域
editor.onmouseup = editor.onkeyup = editor.onmouseout = function () {
  saveSelection();
}

bold.onclick = function (e) {
  restoreSelection() // 恢复选择区域
  editor.focus() // focus一下
  execCommand('bold')
  saveSelection() // 再保存一下选择区域
}

h1.onclick = function () {
  execCommand('formatBlock', '<h1>')
}

insterImg.onchange = function (e) {
  restoreSelection() // 恢复选择区域
  editor.focus() // focus一下

var file = e.target.files[0]
  imgToBase64(file).then((val) => {
    var base64Url = val
    execCommand('insertImage', base64Url)
    saveSelection() // 再保存一下选择区域
  }) 
}

color.onclick = function () {
  colorList.style.display = 'block'
  // execCommand('formatBlock', '<h1>')
}
color.onmouseleave = function () {
  colorList.style.display = 'none'
}
red.onclick = function () {
  restoreSelection()
  editor.focus()
  execCommand('foreColor', 'red')
  saveSelection()
}
blue.onclick = function () {
  restoreSelection()
  editor.focus()
  execCommand('foreColor', 'blue')
  saveSelection()
}
</script>
</html>

阅读原文

阅读 3146

123 显示电脑版