通过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