配置TinyMCE讓WEB端編輯器「完美」支持小程序富文本組件

最近給小程序新增了文章資訊內容，發現小程序並不能直接展現HTML代碼，僅支持部分HTML節點及屬性，只能被迫搞一個方便本身複製粘貼的CMS後臺富文本編輯器

TinyMCE

TinyMCE是一個輕量級的基於瀏覽器的所見即所得HTML富文本編輯器，支持目前流行的各類瀏覽器，由JavaScript寫成。功能配置靈活簡單（兩行代碼就能夠將編輯器嵌入網頁中），支持AJAX。

由於以前項目使用過，因此直接照着搬了過來，具體怎麼怎麼加載js這些就不講了，不會的本身谷歌百度~

rich-text

rich-text是小程序的富文本組件，可是微信限制了一部分能力。
它的關鍵屬性是nodes,注意一句話：nodes 屬性推薦使用 Array 類型，因爲組件會將 String 類型轉換爲 Array 類型，於是性能會有所降低，這篇文章暫時不考慮性能問題，只支持String，若是你想支持Array，本身想辦法。。
rich-text支持節點看官方文檔：rich-text

TinyMCE配置

TinyMCE的配置網上不少不少了這裏就不講了，只寫一下小程序rich-text用到的，代碼+註釋

tinymce.init({
    selector:'textarea#content',
    height: 400,
    menubar: false,
    //這些插件能夠自由配置，而且能夠本身定製，好比支持圖片直接上傳到第三方雲儲存
    plugins: [
        'paste,preview,fullscreen,searchreplace,code,wordcount'
    ],
    toolbar1: "fullscreen preview code",
    toolbar2: "undo redo | searchreplace",
    //只有這裏配置的節點和屬性，編輯器才支持，不符合的會自動過濾(下面是目前rich-text支持的全部節點和屬性)
    valid_elements: "p[style|class],a[style|class],abbr[style|class],b[style|class],blockquote[style|class],br[style|class],code[style|class],col[style|class|span|width],colgroup[style|class|span|width],dd[style|class],del[style|class],div[style|class],dl[style|class],dt[style|class],em[style|class],fieldset[style|class],h1[style|class],h2[style|class],h3[style|class],h4[style|class],h5[style|class],h6[style|class],hr[style|class],i[style|class],img[style|class|alt|src|height|width],ins[style|class],label[style|class],legend[style|class],li[style|class],ol[style|class|start|type],p[style|class],q[style|class],span[style|class],strong[style|class],sub[style|class],sup[style|class],table[style|class|width],tbody[style|class],td[style|class|colspan|height|rowspan|width],tfoot[style|class],th[style|class|colspan|height|rowspan|width],thead[style|class],tr[style|class],ul[style|class]",
    //若是配置了這個，編輯器會自動抹掉節點的屬性(若是要保留請設置爲false)
    paste_as_text: true,
    plugin_preview_height: 670,
    plugin_preview_width: 370,
    //一個漢字算一個字符，爲了統計相對準確
    wordcount_countregex: /([\w\u2019\x27\-\u00C0-\u1FFF]+)|([^\x00-\xff])/g,
    //rich-text不支持html實體，因此咱們得將實體轉爲字符
    entities : 'nbsp,160,iexcl,161,cent,162,pound,163,curren,164,yen,165,brvbar,166,sect,167,uml,168,copy,169,ordf,170,'
     + 'laquo,171,not,172,shy,173,reg,174,macr,175,deg,176,plusmn,177,sup2,178,sup3,179,acute,180,micro,181,para,182,'
     + 'middot,183,cedil,184,sup1,185,ordm,186,raquo,187,frac14,188,frac12,189,frac34,190,iquest,191,Agrave,192,Aacute,193,'
     + 'Acirc,194,Atilde,195,Auml,196,Aring,197,AElig,198,Ccedil,199,Egrave,200,Eacute,201,Ecirc,202,Euml,203,Igrave,204,'
     + 'Iacute,205,Icirc,206,Iuml,207,ETH,208,Ntilde,209,Ograve,210,Oacute,211,Ocirc,212,Otilde,213,Ouml,214,times,215,'
     + 'Oslash,216,Ugrave,217,Uacute,218,Ucirc,219,Uuml,220,Yacute,221,THORN,222,szlig,223,agrave,224,aacute,225,acirc,226,'
     + 'atilde,227,auml,228,aring,229,aelig,230,ccedil,231,egrave,232,eacute,233,ecirc,234,euml,235,igrave,236,iacute,237,'
     + 'icirc,238,iuml,239,eth,240,ntilde,241,ograve,242,oacute,243,ocirc,244,otilde,245,ouml,246,divide,247,oslash,248,'
     + 'ugrave,249,uacute,250,ucirc,251,uuml,252,yacute,253,thorn,254,yuml,255,fnof,402,Alpha,913,Beta,914,Gamma,915,Delta,916,'
     + 'Epsilon,917,Zeta,918,Eta,919,Theta,920,Iota,921,Kappa,922,Lambda,923,Mu,924,Nu,925,Xi,926,Omicron,927,Pi,928,Rho,929,'
     + 'Sigma,931,Tau,932,Upsilon,933,Phi,934,Chi,935,Psi,936,Omega,937,alpha,945,beta,946,gamma,947,delta,948,epsilon,949,'
     + 'zeta,950,eta,951,theta,952,iota,953,kappa,954,lambda,955,mu,956,nu,957,xi,958,omicron,959,pi,960,rho,961,sigmaf,962,'
     + 'sigma,963,tau,964,upsilon,965,phi,966,chi,967,psi,968,omega,969,thetasym,977,upsih,978,piv,982,bull,8226,hellip,8230,'
     + 'prime,8242,Prime,8243,oline,8254,frasl,8260,weierp,8472,image,8465,real,8476,trade,8482,alefsym,8501,larr,8592,uarr,8593,'
     + 'rarr,8594,darr,8595,harr,8596,crarr,8629,lArr,8656,uArr,8657,rArr,8658,dArr,8659,hArr,8660,forall,8704,part,8706,exist,8707,'
     + 'empty,8709,nabla,8711,isin,8712,notin,8713,ni,8715,prod,8719,sum,8721,minus,8722,lowast,8727,radic,8730,prop,8733,infin,8734,'
     + 'ang,8736,and,8743,or,8744,cap,8745,cup,8746,int,8747,there4,8756,sim,8764,cong,8773,asymp,8776,ne,8800,equiv,8801,le,8804,ge,8805,'
     + 'sub,8834,sup,8835,nsub,8836,sube,8838,supe,8839,oplus,8853,otimes,8855,perp,8869,sdot,8901,lceil,8968,rceil,8969,lfloor,8970,'
     + 'rfloor,8971,lang,9001,rang,9002,loz,9674,spades,9824,clubs,9827,hearts,9829,diams,9830,OElig,338,oelig,339,Scaron,352,scaron,353,'
     + 'Yuml,376,circ,710,tilde,732,ensp,8194,emsp,8195,thinsp,8201,zwnj,8204,zwj,8205,lrm,8206,rlm,8207,ndash,8211,mdash,8212,lsquo,8216,'
     + 'rsquo,8217,sbquo,8218,ldquo,8220,rdquo,8221,bdquo,8222,dagger,8224,Dagger,8225,permil,8240,lsaquo,8249,rsaquo,8250,euro,8364,'
});

結束

畢竟尚未長期大量使用，是否是徹底沒問題，不敢100%保證，若是有問題，你們隨時給我反饋，啊哈哈~

開發了一個數獨小程序「惟一數獨」，歡迎掃描玩起來~