html generate email signature

When I encountered this requirement, I subconsciously reacted to write inline styles and copy HTML strings, which is indeed the case, and record the problems encountered in development.

A useful example Reading email signature front-end generation tool
key point : The body of the custom signature must be written with the table tag, otherwise there will be unexpected style confusion
Native copy event

At first, because I didn't understand what a mailbox signature is, how to generate it, I thought it was to directly copy a piece of rich text, so I did it with the following code at first, but it can also achieve the effect, and it can be directly pasted into the rich text Input box, for example: input box for writing email, note that if you use html form copy , you cannot paste the copy content into the input box of WeChat and other chat tools, text mode can be pasted casually, the code is as follows:

  const handleCopy = type => {
      const mailDom = document.querySelector('.profile-email-signature')
      let mailContent = ''
      let clipType = ''
      if (type === 'html') {
        mailContent = mailDom.innerHTML
        // 以html格式拷贝
        clipType = 'text/html'
      } else {
        mailContent = mailDom.innerText
        // 以普通文本拷贝
        clipType = 'text/plain'
      }

      const copyHandler = event => {
        console.log('copy事件触发')
        event.clipboardData.setData(clipType, mailContent)
        event.preventDefault()
      }
      // 监听copy事件
      document.addEventListener('copy', copyHandler)

      // 为兼容Safari必须创建textarea
      const textarea = document.createElement('textarea')
      document.body.appendChild(textarea)
      // 隐藏此输入框
      textarea.style.position = 'absolute'
      textarea.style.clip = 'rect(0 0 0 0)'
      // 赋值
      textarea.value = '...'
      // 选中
      textarea.select()

      // 复制 触发 copy 事件
      document.execCommand('copy', true)
      document.body.removeChild(textarea)
      document.removeEventListener('copy', copyHandler)
}

`clipBoard.js`

Use clipBoard.js to copy the target dom into html, and then use the signature html rendering of the email client to achieve a custom signature. The code is as follows:

  const handleCopy = type => {
      new Clipboard('.copy-btn', {
        text: function (trigger) {
          const mailDom = document.querySelector('.profile-email-signature')
          let mailContent = ''
          if (type === 'html') {
            mailContent = getHTMLStr(mailDom.innerHTML)
          } else {
            mailContent = mailDom.innerText
          }
          return mailContent
        },
      })
      toast.success('Copy Success!')
}
// 因为需要特殊的字体，所以需要加载字体文件
const getHTMLStr = body => {
return `<html><head><style>@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);* { margin: 0; padding: 0; }</style></head><body>${body}</body></html>`
}

After copying the html string, you need to go to the signature configuration place of the email client to configure. For example, the following figure is where the configuration of the spark email client is used.

html generate email signature

Native copy event

`clipBoard.js`

大桔子

`引用和评论`

Flutter Overlay 的使用 —— 自定义 Loading、Toast

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合