[精]纯js移动端富文本，支持图片上传

2021-05-10 网页编程网 网页编程网

<!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>
ul,li,p,img{margin:0;padding:0;}
html, body{ height: 100%; width: 100%;}
ul {list-style:none;}
.wrap-editor{width:98%; height: 500px; border: 1px solid #ccc;}
.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:98%; 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 .black{color:black;}
.color>ul .green{color:green;}
.color>ul .red{color:red;}
.color>ul .blue{color:blue;}
.title{position: relative;}
.title>ul{display: none;position: absolute;border: solid #ccc;border-width: 0 1px 1px 1px; width:52px; left: 0;top: 36px;background: #fff;}
.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="italic">斜</li>
    <li class="underline">划</li>
    <li class="title">H1
       <ul>
        <li class="h3">h3</li>
        <li class="h4">h4</li>
        <li class="p">正文</li>
      </ul>       
    </li>
    <li class="color">
      色
      <ul>
        <li class="black">黑色</li>
        <li class="green">绿色</li>
        <li class="red">红色</li>
        <li class="blue">蓝色</li>
      </ul>
    </li>
    <li class="add-img">
      添加图片
      <input class="inster-img" type="file" />
    </li>
    <li class="source">
      源码
    </li>
  </ul>
  
  <div class="editor" contenteditable="true"></div>
  <input type="hidden"  id="article_body" name="article_body" value="">
</div>
<p><a class="submit" href="javaScript:alert(document.querySelector('.editor').innerHTML)">提交文本</a></p>
<p>输入（粘贴）操作前，先点击H1中的正文或标题。</p>

</body>
<script>
function $(id){return document.getElementById(id);}
function $$(id){return document.querySelector('.'+id);}
var insterImg = document.querySelector('.inster-img'); // 插入图片
$$('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 () {
  //execCommand('formatBlock', '<p>')
  saveSelection();
  if($$('source').innerHTML !='源码'){
  $('article_body').value=$$('editor').innerHTML
  }
}
$$('bold').onclick = function (e) {
  execCommand('bold')
}
$$('italic').onclick = function (e) {
  execCommand('italic')
}
$$('underline').onclick = function (e) {
  execCommand('underline')
}
$$('title').onclick = function () {
  document.querySelector('.title>ul').style.display = 'block';
}
$$('title').onmouseleave = function () {
  document.querySelector('.title>ul').style.display = 'none';
}
$$('h3').onclick = function () {
  execCommand('formatBlock', '<h3>');
}
$$('h4').onclick = function () {
  execCommand('formatBlock', '<h4>')
}
$$('p').onclick = function () {
  restoreSelection()
  $$('editor').focus()
  execCommand('formatBlock', '<p>')
  saveSelection()
}
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 () {
  document.querySelector('.color>ul').style.display = 'block'
}
$$('color').onmouseleave = function () {
  document.querySelector('.color>ul').style.display = 'none'
}
$$('black').onclick = function () {
  execCommand('foreColor', 'black')
}
$$('green').onclick = function () {
  execCommand('foreColor', 'green')
}
$$('red').onclick = function () {
  execCommand('foreColor', 'red')
}
$$('blue').onclick = function () {
  execCommand('foreColor', 'blue')
}
$$('source').onclick = function () {
if(this.innerHTML=='源码'){
  this.innerHTML='预览';
  $$('editor').innerHTML=$$('editor').innerText;
  $$('bold').style.color="black";
  $$('italic').style.color="black";
  $$('underline').style.color="black";
  $$('title').style.color="black";
  $$('color').style.color="black";
  $$('add-img').style.color="black";
}else{
  this.innerHTML='源码';
  $$('editor').innerText=$$('editor').innerHTML;
  $$('bold').style.color="#CCC";
   $$('italic').style.color="#CCC";
  $$('underline').style.color="#CCC";
  $$('title').style.color="#CCC";
  $$('color').style.color="#CCC";
  $$('add-img').style.color="#CCC";
}//if
}//source
</script>
</html>

阅读原文

阅读 2699

123 显示电脑版