仿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"><divcontenteditable="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-popoverplacement="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-itemprop="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="d-value-list"><li v-for="(value, key, index) in dValue":key="index"class="d-value-item"><el-form-item:prop="key"><div>参数<font v-pre>{{</font>{{ key }}<font>}}</font><el-button type="text" @click="delDValue(key)" class="del-btn">删除</el-button></div><el-input v-model="dValue[key]" placeholder="输入样例内容"size="small"@input="initFormData"></el-input></el-form-item></li></ul></el-form></div>
</template><script>
import {emojiList} from '@/config/config'
import {emotionUrl} from "@/config/env";
import Emotion from '@/pages/wp/chat/component/Emotion.vue'
import { bodyTips, setCursorPosition, getCursorPosition } from "../data"
export default {props: {formData: {type: Object,default: () => ({})},},watch: {formData(val){let contentEdit = document.getElementById('contentEdit');contentEdit.innerHTML = val.textif(this.formData.examples){this.formData.examples.forEach((item, index) => {this.dValue[index+1+''] = item})}}},components: {Emotion},computed: {dValueRules(){let rules = {}Object.keys(this.dValue).forEach(key => {rules[key] = [{required: true, message: "请输入样例内容", trigger: "change"}]})return rules},},data(){return {wordNum: 0,bodyTips,hasPlaceholder: false,index: 1,dValue: {},bodyRules: {text: [{required: true, message: "请输入模板内容", trigger: "change"},{validator: this.validator, trigger: "change"}],examples: [{ required: true, message: "请输入样例内容", trigger: "change" }]},rules: {text: [{ required: true, message: "标题文本不能为空", trigger: "change" },{ validator: this.checkText, trigger: "change"}],}}},methods: {handleBlur(){},handleEmotion(index) {this.focuson()let _index = emojiList.indexOf(index);let src = `${emotionUrl}${_index}.png`;// document.execCommand("insertImage", false, src);document.execCommand("insertText", false, index);this.getWordNum()this.$refs.pop.showPopper = false;},focuson() {let contentEdit = document.getElementById('contentEdit');if (contentEdit.innerHTML == '') {contentEdit.focus();}else{contentEdit.innerHTML = contentEdit.innerHTML.replace(/&nbsp;/g, ' ').replace(/<div>/g,'\n').replace(/<\/div>/g,'').replace(/<br>/g, '\n')const len = contentEdit.innerHTML.lengthif(this.cursorPosition > len){this.cursorPosition = len}setCursorPosition( this.$refs.editor, this.cursorPosition)}},getWordNum(e) {let contentEdit = document.getElementById('contentEdit');let innerHtml = contentEdit.innerHTML;let imglist = innerHtml.match(/<img .*?src="(.*?)".*?\/?>/g);let text = innerHtml.replace(/<.*?>/g, "").replace(/&nbsp;/g, ' ');// let text = innerHtml.replace(/<.*?>/g,"");if (imglist) {this.wordNum = imglist.length + text.length;} else {this.wordNum = text.length;}let innerLength = innerHtml.length;if (this.wordNum > 1024) {this.moreInnerHtml = innerHtml.substr(0, innerLength - 1)e.target.innerHTML = '';document.execCommand('insertHTML', false, innerHtml.substr(0, innerLength - 1));}this.NoNumText = text.replace(/[0-9]/ig, "");this.getText()},//获取光标的位置getCursor () {this.editEle = this.$refs.editorthis.cursorPosition = getCursorPosition(this.editEle);},addValue(){this.focuson()document.execCommand('insertText', false, `{{${Object.keys(this.dValue).length+1}}}`);this.cursorPosition += (Object.keys(this.dValue).length+1+'').length + 4},delDValue(index){let contentEdit = document.getElementById('contentEdit');let text = contentEdit.innerHTML.replace(`{{${index}}}`, '')contentEdit.innerHTML = textthis.getText()delete this.dValue[index]setCursorPosition(this.$refs.editor)},validator(rule, value, callback){const matchs = value.match(/\{\{(.*?)\}\}/g)if(matchs){// 顺序要对 必须是1 2 3 4... 不能是4 5 6（缺数）， 不能是3 2 1 4 5（乱序）const indexs = matchs.map(item => {return item.slice(2, -2)})// 判断是否是一个从1开始递增（低增值为1）的数组const isValid = indexs.every((item, index) => {return item - index === 1})if(isValid){this.setPlaceHolderValue(indexs)callback()this.hasPlaceholder = true}else{this.resetPlaceHolderValue()callback(new Error('无效占位符顺序'))}}else{callback()this.hasPlaceholder = falsethis.dValue = {}this.initFormData()}},setPlaceHolderValue(arr){let obj = {}arr.forEach((item, index) => {obj[item+''] = this.dValue[item+'']})this.dValue = objthis.initFormData()},resetPlaceHolderValue(){this.hasPlaceholder = falsethis.dValue = {}this.initFormData()this.getText()this.formData.examples = []},// 获取formData数据getText(){const contentEdit = document.getElementById('contentEdit');const text = contentEdit.innerHTML.replace(/&nbsp;/g, ' ').replace(/<div>/g,'\n').replace(/<\/div>/g,'').replace(/<br>/g, '\n')this.formData.text = text    },initFormData(){this.formData.examples = Object.keys(this.dValue).map(key => this.dValue[key])},validate(){return Promise.all([this.$refs.textForm.validate(),this.$refs.dValueForm.validate()]).then(([res1, res2]) => {return res1 && res2})}},
}
</script><style lang="scss">
.template-body-wrapper{.textarea-box{border: 1px solid #DCDFE6;width: 100%;margin-bottom: 20px;textarea{border-radius: 0;border: none;border-bottom: 1px solid #DCDFE6!important;}.el-form .hide-form-item{margin: 0;}}.el-textarea .el-input__count{position: absolute;bottom: -32px;}.edit-content {height: 100px;width: 100%;position: relative;.edit-wrapper {height: 100%;width: 100%;padding: 8px 12px;outline: none;overflow-y: auto;padding-bottom: 40px;line-height: 20px;vertical-align: top;font-size: 14px;&:empty:before {font-size: 14px;content: attr(placeholder);color: #bbb;}&:focus {content: none;}img {height: 30px;width: auto;display: inline-block;/*vertical-align: middle;*/}/*background: #ffffff;*/}.send-btn-box {display: inline-block;float: right;height: 30px;line-height: 30px;.send-tip {font-size: 12px;font-weight: 400;color: #90959E;line-height: 22px;margin-right: 8px;}.send-btn {margin-right: 8px;}}}.button-no-style{border: none;cursor: pointer;background: none;}.hz-icon-weixiao{font-size: 20px;}.d-value{font-size: 16px;line-height: 20px;vertical-align: text-bottom;background: none;}.textarea-bottom{border-top: 1px solid #DCDFE6;}.send-word-num {width: 42px;height: 30px;font-size: 12px;font-weight: 400;color: #90959E;line-height: 30px;margin-right: 12px;float: right;&.active_word_num {color: #E6A23C;}}.tip-item{color: #90959E;line-height: 30px;font-size: 12px;}.el-form-item{margin-bottom: 10px;}.del-btn{margin-left: 8px;}.edit-wrapper{white-space: pre-line;}
}
</style>

data/index.js

export const setCursorPosition = (element, cursorPosition) => {const range = document.createRange()const lastChild = element.lastChildif(lastChild.innerHTML){if(cursorPosition === undefined){range.setStart(lastChild.firstChild, lastChild.innerHTML.length)range.setEnd(lastChild.firstChild, lastChild.innerHTML.length)}else{range.setStart(lastChild.firstChild, cursorPosition)range.setEnd(lastChild.firstChild, cursorPosition)}}else{if(cursorPosition === undefined){range.setStart(lastChild, lastChild.length)range.setEnd(lastChild, lastChild.length)}else{range.setStart(lastChild, cursorPosition)range.setEnd(lastChild, cursorPosition)}}const sel = window.getSelection()sel.removeAllRanges()sel.addRange(range)
}export const getCursorPosition = (element) => {let caretOffset = 0const doc = element.ownerDocument || element.documentconst win = doc.defaultView || doc.parentWindowconst sel = win.getSelection()if (sel.rangeCount > 0) {const range = win.getSelection().getRangeAt(0)const preCaretRange = range.cloneRange()preCaretRange.selectNodeContents(element)preCaretRange.setEnd(range.endContainer, range.endOffset)const divs = preCaretRange.commonAncestorContainer.innerHTML.match(/<div>/g)const len = divs ? divs.length : 0caretOffset = preCaretRange.toString().length + len}return caretOffset
}