代碼小記：tinymce使用心得

GT 發(fā)布于2019-08-19 17:37 / 3042人閱讀

摘要：簡單使用直接使用可以使用這種方式，方便快捷。但是滿足不了大部分人，你們需要的是自定義使用手冊傳送門速查傳送門手腳架提供給看完文檔后無從下手的伙伴，這配置夠用了。本地化語言包下載傳送門語言包下載后放到目錄下方可使用。

序

公司后臺的編輯器從我剛接觸的bootstrap-wysihtml5更新到summernote，后來發(fā)現(xiàn)summernote也是巨坑無比（坑：粘貼沒有過濾、插件結(jié)構(gòu)最近又更新一遍了感覺還是個不怎么完整的東西來）。之后摸索到tinymce感覺與前兩個編輯器比較還是算完整的（可能沒接觸到坑）。

這里簡單介紹一下tinymce的使用，推薦tinymce的原因是它對于富文本編輯有完整支持，其中比較重要的 粘貼格式清除、自定義toolbar、自定義文本樣式 這些對于編輯需求比較高的都基本能解決。

簡單使用

直接使用可以使用這種方式，方便快捷。但是滿足不了大部分人，你們需要的是自定義?。?！

使用手冊傳送門： 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目錄下方可使用。

常用“姿勢” 設(shè)置文本

var config = require("tinymce.config")
config.setup = function(editor){
    //init
    editor.on("init", function(){
        editor.setContent("上來就是一把！")
    })
}
tinymce.init(config)

指定DOM初次化

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

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

獲得內(nèi)容

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

直接編輯內(nèi)容

插入圖片例子

// 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);
})