仿infobip模板功能-可通过占位符配置模板内容

模仿infobip制作的模板功能，正文可在任意位置加参数的功能。如下图所示：在正文中通过{ {\d}}进行占位，在使用模板时，可在此位置自定制内容，并预览效果。

代码：

<template>
  <div class="template-body-wrapper">
    <div class="textarea-box">
      <el-form 
        :model="formData"
        :rules="bodyRules"
        ref="textForm"
      >
        <div class="edit-content">
          <div
            contenteditable="true" 
            @blur="handleBlur"
            ref="editor"
            class="iscroll edit-wrapper"
            @keyup="getCursor" 
            @click="getCursor"
            @input="getWordNum"
            id="contentEdit"
            placeholder="请输入消息"
          ></div>
        </div>
        <div class="textarea-bottom">
          <el-popover
            placement="top-start"
            width="480"
            ref="pop"
            trigger="click">
            <div>
              <emotion @handleEmotion="handleEmotion"></emotion>
            </div>
            <button type="button" class="button-no-style" slot="reference"><i class="hz-icon-weixiao"></i></button>
          </el-popover>
          <button type="text" class="d-value button-no-style" @click.prevent="addValue">{+}</button>
          <span 
            class="send-word-num" 
            :class="wordNum>=1014?'active_word_num':''"
          >{
  {wordNum}}/1024</span>
        </div>
        <el-form-item
          prop="text"
          class="hide-form-item"
        >
          <el-input v-model="formData.text" style="display: none;"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="tip-box">
      <div 
        class="tip-item"
        v-for="(item, index) in bodyTips" 
        :key="index"
      >{
  { item }}</div>
    </div>
    <el-form
      :model="dValue"
      :rules="dValueRules"
      ref="dValueForm"
    >
      <ul v-if="hasPlaceholder" class=