TinyMCE编辑器无法读取表格内输入值问题（已解决）

嘿，我懂你遇到的这个坑——给TinyMCE加上table插件后，表格里的占位符（比如{name}）居然没法被验证代码识别，只有表格外的能正常触发检查，搞得表单提交一直卡壳。

先贴一下你之前的代码方便回顾：

var moduleTypesMap = {};
$.each(moduleTypesJson, function (index, item){
    moduleTypesMap[item.name] = item;
    moduleTypesMap[item.name]['placeholders'] = item.placeholders.split(',');
});
tinymce.init({
    selector: '#textarea',
    plugins: 'table',
    toolbar: 'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
});
$submitButton.on('click', function (){
    var body = tinymce.get('textarea').getContent(); //获取表格的全部内容
    var isBodyValid = true;
    var type = $template.val(); //我的下拉框值
    $.each(moduleTypesMap[type].placeholders, function (index, item){
        if (body.indexOf(item) === -1) isBodyValid=false;
    });
    if(isBodyValid){
        $form.trigger('submit');
    } else {
        bootbox.alert("please give all placeholders");
    }
});

你提到已经解决了问题，原因是输入内容存在不匹配——这其实特别常见，毕竟TinyMCE生成表格HTML时，可能会自动添加换行、空格这类格式，或者用户输入时不小心给占位符加了多余空白，导致你用indexOf查找的{name}和实际HTML里的内容不完全一致。

举个例子，表格内的占位符可能被编辑器渲染成这样：

<td>
  {name}
</td>

如果你的item是严格的{name}不带前后空格，indexOf其实还是能找到的，但如果占位符被意外改成了{ name }（带空格），或者编辑器对特殊字符做了转义，那肯定会匹配失败。

要是以后再碰到类似问题，可以试试用正则表达式做更灵活的匹配，比如忽略前后的空白字符：

// 替换原来的indexOf判断
var placeholderRegex = new RegExp('\\s*' + item + '\\s*', 'i');
if (!placeholderRegex.test(body)) {
    isBodyValid = false;
}

这种方式能兼容编辑器自动格式化带来的空格、换行问题，比生硬的indexOf健壮很多。

内容的提问来源于stack exchange，提问作者Insane DA