通过JavaScript的自定义富文本实现短信模板功能

前言

公司最近有一个发送短信模板的功能实现需求。在网上找到一篇范文，发现并不适合我们的项目，引用了 40% 的内容,20% 的代码，改成了自己的一个封装函数。
此 demo 在于实现自定义的短信模板，比如有需求是为每个客户发送本月消费情况，需要在里面添加诸如“姓名”” 手机号 ” 等需要随客户不同而变化的关键词，这个 demo 便派上用场。

如上面所说，此项目仅仅是个 demo，大家可以自行修改 css 样式甚至是 js 代码，如果有更好的想法可以在 git 的 issues 上提出来，或者在项目基础上写了更好的实现方式也可以新建分支提交代码.

项目 git 地址：https://github.com/charCR2/utils/tree/master/smsTemplate
项目 demo 截图：

功能介绍

1. 初始化

// 参数为 dom 元素的 id,class。（本质是一个 querySelector）textarea = new AntiTemplate('#smsTemplated')

2. 获取参数

textarea.getAllData()

3. 添加参数

textarea.addKeyword({
    // 必须要有 keyword 属性
    keyword:vm.options[vm.selectValue].label,
    // 其他参数任意命名，任意填写
    data:vm.options[vm.selectValue]
});

4. 渲染后台保存的数据

当我们第二次打开页面，需要展示之前填写过的模板时，需要在初始化之后调用他

textarea.resetTemplate('你好棒 {{ 黄金糕}}',
    [{value: '选项 1',label: '黄金糕'}]
)

5. 清除数据

this.textarea.clear()

6. 启用禁用

this.textarea.disabled() // 启用
this.textarea.able() // 禁用 

已知问题和解决方法

1. 不能换行

没有做换行操作，现在只能指定一行一行填写，这需要渲染多个输入框

借鉴文章：
https://www.jianshu.com/p/dbc4ac17ba4c