代码小记：tinymce使用心得

序

公司后台的编辑器从我刚接触的bootstrap-wysihtml5更新到summernote，后来发现summernote也是巨坑无比（坑：粘贴没有过滤、插件结构最近又更新一遍了感觉还是个不怎么完整的东西来）。之后摸索到tinymce感觉与前两个编辑器比较还是算完整的（可能没接触到坑）。

这里简单介绍一下tinymce的使用，推荐tinymce的原因是它对于富文本编辑有完整支持，其中比较重要的 粘贴格式清除、自定义toolbar、自定义文本样式 这些对于编辑需求比较高的都基本能解决。

简单使用

<textarea></textarea>

<script>
tinymce.init({
  selector: 'textarea'  // change this value according to your HTML
});
</script>

直接使用可以使用这种方式，方便快捷。但是满足不了大部分人，你们需要的是自定义！！！

使用手册传送门： https://www.tinymce.com/docs/get-started/basic-setup/
API速查传送门：http://archive.tinymce.com/wiki.php/api4:class.tinymce

手脚架

提供给看完文档后无从下手的伙伴，这配置够用了。

module.exports = {
    "menubar": false,
    "height": 500,
    "language": "zh_CN",
    "plugins": [
        "advlist autolink link image lists charmap print hr anchor pagebreak spellchecker",
        "searchreplace visualblocks visualchars code fullscreen media nonbreaking",
        "table directionality emoticons template textcolor paste textcolor colorpicker textpattern"
    ],
    "toolbar_items_size": "small",
    "block_formats": "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;",
    "toolbar1": "insertfile undo redo | formatselect | bullist numlist | link unlink | uploadimg image media | fullscreen",
    "toolbar2": "fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | removeformat"
}

本地化语言包下载传送门：http://archive.tinymce.com/i18n/index.php

语言包下载后放到tinymce/langs目录下方可使用。

常用“姿势”

设置文本

var config = require('tinymce.config')
config.setup = function(editor){
    //init
    editor.on('init', function(){
        editor.setContent('<p>上来就是一把！</p>')
    })
}
tinymce.init(config)

指定DOM初次化

有些情况下不能使用查找方式找到DOM，可以使用以下方式直接传入DOM

tinymce.init({
    target: document.querySelector('#editor')
})

获得内容

if(tinymce.activeEditor) //activeEditor可能为空
    tinymce.activeEditor.getContent()

直接编辑内容

插入图片例子

// editor.undoManager记录DOM变化，回滚操作才会奏效。
editor.undoManager.transact(function() {
    var dom = editor.dom,
        imgElm;

    var data = {
        src: 'http://www.jingyanbus.com/uploads/150307/4175-15030GFS02a.jpg'
    };
    data.id = '__mcenew';
    editor.focus();
    editor.selection.setContent(dom.createHTML('img', data));
    imgElm = dom.get('__mcenew');
    dom.setAttrib(imgElm, 'id', null);
})