代碼小記：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);
})