如何实现一个微信PC端富文本输入框？

微信PC端输入框支持图片、文件、文字、Emoji四种消息类型，本篇文章就这四种类型的消息输入进行实现。我们选用HTML5新增标签属性contenteditable来实现。

contenteditable属性

contenteditable是一个全局属性，表示当前元素可编辑。

该属性拥有一下三个属性值：

• 
  
• true或空字符串: 表示元素可编辑
  
• false: 表示元素不可编辑
  
• plaintext-only: 表示只有原始文本可编辑，禁用富文本编辑
  

给div元素添加contenteditable, 将元素变为可编辑的状态

<div contenteditable></div>

文字输入

当鼠标聚焦在输入框内时，会有outline展示，所以要去掉该样式

<!-- index.html -->
<div contenteditable class="editor"></div>

.editor:focus {
outline:none;

}

此时文本就可以正常输入了

图片输入

图片输入分为两部分

• 
  
• 截图粘贴
  
• 图片文件复制粘贴
  

有的浏览器是直接支持截图图片的粘贴的，不过图片文件的复制粘贴就不是我们想要的效果(会把图片粘贴成一个文件的图标俺不是展示图片)。

我们这里要自己做一个图片的粘贴展示，以兼容所有的浏览器。

这里我们使用浏览器提供的粘贴事件paste来实现

paste事件函数中存在e.clipboardData.files 属性，该属性是一个数组，当该数组大于0时，就证明用户粘贴的是文件；通过判断 file 的 type 属性是否为image/... 来确定粘贴的内容是否为图片。

const editor = document.querySelector(".editor");

/**

 * 处理粘贴图片

 * @param {File} imageFile 图片文件

 */
function handleImage(imageFile) {
// 创建文件读取器
const reader = new FileReader();
// 读取完成

  reader.onload = (e) => {
// 创建img标签
const img = new Image();

    img.src = e.target.result;

    editor.appendChild(img);

  };


  reader.readAsDataURL(imageFile);

}

// 添加paste事件

editor.addEventListener("paste", (e) => {
const files = e.clipboardData.files;
const filesLen = files.length;
console.log("files", files);
// 粘贴内用是否存在文件
if (filesLen > 0) {
//禁止默认事件

    e.preventDefault();
for (let i = 0; i < filesLen; i++) {
const file = files[i];
if (file.type.indexOf("image") === 0) {
// 粘贴的文件为图片
handleImage(file);
continue;

      }
// 粘贴内容是普通文件

    }

  }

});

现在就可以粘贴图片了，无论是截图的图片还是复制的文件图片都可以粘贴到文本框内了。

现在存在的问题就是，图片尺寸太大，会按原尺寸展示图片。微信输入框展示的尺寸为最大宽高150x150

.image {
max-width: 150px;
max-height: 150px;

}

现在图片的粘贴展示部分就是解释正常的了

细心的同学注意到了，粘贴图片后光标不会向后移动，这是因为我们禁用了粘贴的默认事件，这里需要我们手动处理光标；因为我们使用了appendChild 将图片插入到了输入框的最后面，就会出现无论光标在哪里，粘贴的图片都是出现在输入框的最后面，我们希望的是在光标所在的地方粘贴内容，接下来我们处理一下光标。

光标处理

处理光标主要以来两个WebAPI , Selection和 Range

• 
  
• Selection：Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。通过window.getSelection() 获取 Selection 对象。 具体可查阅MDN-Selection
  
• Range：Range 接口表示一个包含节点与文本节点的一部分的文档片段。可以使用 Document.createRange 方法创建 Range。也可以用 Selection对象的 getRangeAt()方法或者 Document对象的caretRangeFromPoint() 方法获取 Range 对象。具体可查阅MDN-Range
  

我们使用window.getSelection获取当前位置，通过 getRangeAt()获取当前选中的范围，将选中的内容删除，再把我们自己的内容插入到当前的 Range 中，就实现了文件的输入。在这时插入的文件是选中状态的，所以要将选择范围折叠到结束位置，即在粘贴文本的后面显示光标。

/**

 *  将指定节点插入到光标位置

 * @param {DOM} fileDom dom节点

 */
function insertNode(dom) {
// 获取光标
const selection = window.getSelection();
// 获取选中的内容
const range = selection.getRangeAt(0);
// 删除选中的内容

  range.deleteContents();
// 将节点插入范围最前面添加节点

  range.insertNode(dom);
// 将光标移到选中范围的最后面

  selection.collapseToEnd();

}

/**

 * 处理粘贴图片

 * @param {File} imageFile 图片文件

 */

function handleImage(imageFile) {

  // 创建文件读取器

  const reader = new FileReader();

  // 读取完成

  reader.onload = (e) => {

    // 创建img标签

    const img = new Image();

    img.src = e.target.result;
-   editor.appendChild(img);
+   insertNode(img);

  };

  reader.readAsDataURL(imageFile);

}

到这里粘贴到光标位置就正常了

文件输入

文件输入分为两部分粘贴文件和选择文件

• 
  
• 粘贴文件
  

• 
  
• 选择文件
  

粘贴文件

微信是以卡片的方式展示的文件，所以我们先要准备一个类似的dom结构。

/**

 * 返回文件卡片的DOM

 * @param {File} file 文件

 * @returns 返回dom结构

 */
function createFileDom(file) {
const size = file.size / 1024;
const templte = `

          <div class="file-container">

            <img src="./assets/PDF.png" class="image" />

            <div class="title">

              <span>${file.name || "未命名文件"}</span>

              <span>${size.toFixed(1)}K</span>

            </div>

          </div>`;
const dom = document.createElement("span");

  dom.style = "display:flex;";

  dom.innerHTML = templte;
return dom;

}

.file-container {
height: 75px;
width: 405px;
box-sizing: border-box;
border: 1px solid rgb(208, 208, 208);
padding: 13px;
display: flex;
justify-content: start;
gap: 13px;
background-color: #ffffff;

}
.file-container .image {
height: 100%;
object-fit: scale-down;

}
.file-container .title {
display: flex;
flex-direction: column;
gap: 2px;

}

按照微信样式卡片准备DOM的生成函数，如上。

将生成后的DOM加入到光标位置

/**

 * 处理粘贴文件

 * @param {File} file 文件

 */
function handleFile(file) {
insertNode(createFileDom(file));

}

在页面上就可以看到效果啦

可以看到以上的卡片还是存在问题的，

• 
  
• 光标位置不在卡片的最后面
  
• Backspace 不会将整个卡片都删除掉
  

卡片的删除

因为我们的卡片是DOM，其父元素也就是输入框，开启了contenteditable ，因此它的该属性也继承了父元素的值，所以本身也是可以编辑的。分析到这里，就会涌现出一个方案——将卡片最外层 div 的contenteditable 属性值设为 false 。

但是，设置了 contenteditable="false" 后就变成了不可编辑元素，光标在他周围就不显示了🥹🥹🥹

再接着考虑，思绪一下又回到了图片身上，我们能不能做一个一样的图片呢？答案是肯定的。

说到做图片我们又会有两种方案：

• 
  
• svg
  
• canvas
  

这里就考虑使用SVG制作卡片。

SVG在这里就不多介绍了，直接开始

<svg width="409" height="77" nsxml="http://www.w3.org/2000/svg">
<!-- 矩形边框 -->
<rect
x="2"
y="0"
width="405"
height="75"
fill="none"
stroke="rgb(208,208,208)"

  />
<!-- 右侧文件图标 -->
<polygon
points="15 13,36 13,50 30,50 60,15 60"
fill="rgb(156,193,233)"
stroke="rgb(0,105,255)"
stroke-width="2"

  />
<!-- 图标折叠三角部分 -->
<polygon points="36 13,36 30,50 30" fill="rgb(0,105,255)" />
<!-- 文件类型 -->
<text
x="32"
y="50"
font-size="10"
text-anchor="middle"
fill="rgb(0,105,255)"

  >

    xmind
</text>
<!-- 文件名称 -->
<text x="63" y="30" font-size="16">JavaScript.xmind</text>
<!-- 文件大小 -->
<text x="63" y="52" font-size="14">206.6K</text>
</svg>

然后就得到了一个卡片

现在我们只要将该卡片使用JS封装，在上传文件的时候调用生成图片就好了。

封装如下：

/**

 * 返回文件卡片的DOM

 * @param {File} file 文件

 * @returns 返回dom结构

 */
function createFileDom(file) {
const size = file.size / 1024;
let extension = "未知文件";
if (file.name.indexOf(".") >= 0) {
const fileName = file.name.split(".");

    extension = fileName.pop();

  }
const templte = `

  <rect

    x="2"

    y="0"

    width="405"

    height="75"

    fill="none"

    stroke="rgb(208,208,208)"

  />

  <polygon

    points="15 13,36 13,50 30,50 60,15 60"

    fill="rgb(156,193,233)"

    stroke="rgb(0,105,255)"

    stroke-width="2"

  />

  <polygon points="36 13,36 30,50 30" fill="rgb(0,105,255)" />

  <text

    x="32"

    y="50"

    font-size="10"

    text-anchor="middle"

    fill="rgb(0,105,255)"

  >
${extension}

  </text>

  <text x="63" y="30" font-size="16">${file.name || "未命名文件"}</text>

  <text x="63" y="52" font-size="14">${size.toFixed(1)}K</text>

`;
const dom = document.createElementNS("http://www.w3.org/2000/svg", "svg");

  dom.setAttribute("width", "409");

  dom.setAttribute("height", "77");

  dom.innerHTML = templte;
const svg = new XMLSerializer().serializeToString(dom);
const blob = new Blob([svg], {
type: "image/svg+xml;charset=utf-8",

  });
const imageUrl = URL.createObjectURL(blob);
const img = new Image();

  img.src = imageUrl;
return img;

}

到这里我们的文件粘贴就完成了，来展示

上传文件

上传文件又包含两部分：图片和普通文件

我们需要在这里做一个判断，如果是图片需要将其内容渲染出来，文件用卡片显示。

<div class="controls">
<img src="./assets/emoji.png" alt="表情" title="表情" />
<img
src="./assets/file.png"
alt="发送文件"
title="发送文件"
class="file"

    />
</div>

const fileDom = document.querySelector(".file");


fileDom.addEventListener("click", () => {
const input = document.createElement("input");

  input.setAttribute("type", "file");

  input.setAttribute("multiple", "true");

  input.addEventListener("change", () => {
const files = input.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
fileTypeCheck(file);

    }

  });

  input.click();

});

以上代码，在输入框上方添加了一个文件的icon , 给这个icon 添加点击事件，选择文件并展示。

到这里文件上传就做好了，但是还是存在问题的。

输入框的光标，在鼠标点击页面其他地方的时候会从输入框移出，如果在这时选择文件不会添加到输入框中。

所以，我们在点击文件上传的时候需要叫光标聚焦到输入框。

const fileDom = document.querySelector(".file");


fileDom.addEventListener("click", () => {
+  // 光标聚焦到输入框
+  editor.focus();

  const input = document.createElement("input");

  input.setAttribute("type", "file");

  input.setAttribute("multiple", "true");

  input.addEventListener("change", () => {

    const files = input.files;

    for (let i = 0; i < files.length; i++) {

      const file = files[i];

      fileTypeCheck(file);

    }

  });

  input.click();

});

到这里文件上传就完美了。

总结

以上的源码已经上传到了Github， 想要源码的小伙伴自己去拉。代码读取文件那部分可以使用Promise 进行优化。最后，欢迎大佬批评指正。