使用可编辑div实现插入内容表情+识别敏感词

要实现的需求效果: 需要实现插入指定文本信息、插入表情符号、动态检索敏感词并标红提示

1. 开始

1.1 实现可编辑div

    

      

      
      
{{value?value.length:0}}/{{maxLength}}
    

使用div的contenteditable属性可将该div设置为可编辑！
添加一个length展示当前输入的内容是否在最大可输入范围

---

1.2 添加一个插入指定文本的标签

    

        {{text}}            
    
    // ... 可编辑div

通过传入参数判断是否需要展示 插入按钮

---

1.3 添加emoji表情

        

          
            

              {{ e.content }}
            
            

              
            
          
        
        
      

使用antD-vue的弹窗组件实现点击 icon 展示弹窗进行选择表情；此处的表情内容实用 表情文字 不用其他库！例如

export const emojiList = [
  { content: '' },
  { content: '' },
  { content: '' },
  { content: '' }
]

---

1.4 添加敏感词展示区域

      // ... 表情区域
      

        

      
    

敏感词使用自定义引入方式

export const bannedWordList = [
  '借贷协议',
  '返佣',
  '佣金'
]

computed: {
    // 违禁词
    bannedWord() {
      if (!this.value) return '';
      let bannedWord = ''
      new Set(bannedWordList).forEach(item => {
        if (this.value.includes(item)) {
          bannedWord += bannedWord ? `、${item}` : item
        }
      })
      return bannedWord
    },
    // 违禁词提示
    bannedWordTip() {
      return this.bannedWordTipHtml(this.bannedWord)
    }
  },

x. 整体代码