解决tinymce中富文本中dom元素标签中属性不生效的问题

解决tinymce中富文本中dom元素标签中属性不生效的问题

问题

最近在使用api给tinymce编辑器中内容节点增加属性时，发现有些属性即使使用api增加上去，但是经过tinymce过滤后，并没有呈现到最终的页面的节点上，比如onmousedown
使用onmousedown可以使鼠标光标无法落在该元素内，可以实现很多编辑器编辑操作的限制，但是通过tinymce.activeEditor.selection.setContent()方法添加节点时，发现最后页面上渲染出来的节点中并没有onmousedown属性。
如下

tinymce.activeEditor.selection.setContent(<span onmousedown="return false">测试节点</span>);

实际输出的页面效果

解决方案

官方文档其实有相应介绍，tinymce只对默认的几种属性生效，其他的会过滤掉，但是支持添加自定义生效的标签属性。

// 在tinit中添加属性extended_valid_elements
tinymce.init({
  selector: 'textarea',
  extended_valid_elements: 'span[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]'
});

这样再通过自定义节点或者给标签增加属性时，以上写入的属性都不会被过滤了