开发论坛网站编辑器以及自定义表情的实现

最新推荐文章于 2024-11-05 22:07:06 发布

彦青i

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量165

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_41200374/article/details/129734790

版权

在开发一个论坛网站时，由于需要添加自定义表情功能，作者选择了使用div的contenteditable属性替代textarea。通过document.execCommandAPI来插入图片，实现了将文字表情替换为实际的图片。文章提供了匹配和替换表情的函数示例，并引用了外部json文件来存储表情数据。

摘要由CSDN通过智能技术生成

这段时间正在开发一个论坛网站要实现添加自定义表情，其实就是image图片,因为要自定义表情那么就不能使用<textarea>标签,那么久只能使用<div>标签中的contenteditable="true"属性，让目标变成一个可编辑的div，这样就可以插入图片

开发中利用 document.execCommand() API对DOM进行插入操作，虽然mdnWebDocs中已经说明该API已被启用，但很多浏览器还是支持的，最重要的是目前只想到这个方法😂

以下是替换自定义表情的方法

export function replaceEmoji(v) {
  if (!v) {
    return v;
  } else {
    const reg = new RegExp(/\[([0-9\u4e00-\u9fa5]{1,4})\]/, "g");
    const emoList = [...new Set(v.match(reg))];
    if (emoList.length > 0) {
      for (let i = 0; i < emoList.length; i++) {
        const r = /\[(.*)\]/;
        const rr = emoList[i].match(r)[1];
        const reg1 = new RegExp(`\\[${rr}\\]`, "g");
        //editorIcon 这个是我引入的文件
        const rrr = editorIcon.data.filter((i) => {
          return i.name == rr;
        });
        if (rrr.length !== 0) {
          v = v.replace(
            reg1,
            `<img src="${rrr[0].gifLink}" data-src="${rrr[0].name}" class="emoWH">`
          );
        }

      }
    }
    return v;
  }
}

editorIcon.json文件

这个文件是为了把文字替换成表情两个路径用的是相对路径避免出错

{
  "data": [
    {
      "name": "大笑",
      "gifLink": "./editorIcon/大笑.gif",
      "pngLink": "./editorIcon/大笑.png"
    },
    {
      "name": "你好棒",
      "gifLink": "./editorIcon/你好棒.gif",
      "pngLink": "./editorIcon/你好棒.png"
    },
  ]
}

使用方法

<div ref="mEditorContent" contenteditable="true">
</div>

const text = '[大笑]'
const emo = replaceEmoji(text)
//这里replaceEmoji(text) 转成了`<img src="./editorIcon/大笑.gif" data-src="大笑" class="emoWH">`

//1.放入之前鼠标必须要聚焦到可编辑的div中 
 this.setCaretPosition(this.$refs.mEditorContent, this.lastEditRange)
 	//this.$refs.mEditorContent -->dom
 	// this.lastEditRange range节点设置光标位置
//2.运用execCommand('inserthtml')实现自定义表情
 document.execCommand('inserthtml', false, emo)