家好，今天我們一起來探討一下Banner的設計，在這一次的教程中我會介紹一些平時總結下來的可以讓banner迅速達成效果的簡單小竅門，如果你在平時有大量的banner設計工作，并且總覺得時間不夠用，那么希望本次的教程可以幫助到你。

好了，那么我們進入正題。

首先讓我們認識一下banner，平時大家在各種網站或者移動端的app里經常可以見到，印象里他們大都長這個樣子：

當然了，這就是我們常說的banner，但其實banner還有幾個遠房表兄、同父異母什么的兄弟姐妹們，它們可能長這個樣子：

恩……其實以上這些在廣義上來說都可以歸納為Banner，就形狀來說現在的banner也已經不再局限于從前大家所理解和看到的那些出現在固定廣告位的長條形廣告了，他可以是長的、方的、必要的時候也可以是其他什么亂七八糟的形狀，總之，不管是側邊欄廣告、焦點圖、專題頁的頭圖、我們都可以理解為是banner，在設計方法上，其實都是共通的。

如果要是分類的話其實可以大概分為兩類：

1.“促使點擊”

2.“渲染氣氛”

第一種就是大家經常在各種大大小小的網站都能看到的廣告banner或者焦點圖，她們有大有小可長可短，但是他們共同的作用就是通過各種方式引導你去點擊。

通常你在做這種類型的banner時，一般會是上圖這個場面。

第二種大家通常可以在各種游戲網站，房地產網站，各種活動專題頁中見到，也就是大家常說的頭圖，這種類型的banner通常并不是引導用戶去觸發點擊，而是服務于內容，為整個頁面做好氣氛的渲染。

通常你在做這種類型的banner時，一般會是上圖這個場面

說這么多，其實我是希望通過這種介紹和分類方式，讓大家在拿到設計需求時可以確定一個正確的設計方向，降低設計成本，從而提高工作效率。

下面我們介紹幾個設計小竅門，也許通過這些方法可以讓你在最短的時間內有效的達成效果。

首先我們來說一下字體和字形，大家都知道我們從圖形上解讀信息的能力是要大于單純的閱讀文字，但是在banner的設計中，大多數情況下我們都是通過文字來了解信息，圖片只是起到一個襯托的作用，在我自己平時做banner的時間分配里對字形的處理可能要占到百分之五十甚至更多的時間，所以今天我們重點來說一下這方面的處理技巧。

1.鋼筆造字

鋼筆造字是在做字形設計上一個比較討巧的方法，但卻又十分有效。對平時沒有太多字形設計經驗的同學來說非常適合的，只要你了解基本的字形設計規律（筆畫的粗細，字體的重心等），那么此方法可以讓你快速的讓banner高大上起來，具體的設計方法大家可以移步字形設計大師@劉兵克老濕的設計教程：http://v.youku.com/v_show/id_XNDI4MDMwMTg4.html

2.筆畫鏈接

當你沒有時間完整的設計banner上字體的字形時，筆畫鏈接未嘗不是一種好的方法，在做筆畫鏈接時只有合理的安排需要鏈接的筆畫，做到不突兀，不影響易讀性，那么都會出來一個比較好的視覺效果，在做筆畫連接的時候我推薦大家使用一些筆畫粗細比較統一的非襯線字體比方說雅黑、悅黑、幼圓等等。

3. 隨“意”變形

顧名思義就是根據文字的具體含義來設計字形的一種方法，當上面介紹的兩種技巧都讓你感覺頭大的時候不妨試試這種處理技巧，你只需要腦洞大開，了解文字的具體含義并用相應的圖形在文字上加以體現就可以了，就醬簡單！

4. 3D

如果要在banner中想突出文字，把文字做成3D效果可謂是最“粗暴”的一種解決方法，只要處理方法得當也可以達到很好的效果，如何處理3D這種細節問題這里就不提及了，網上有大堆大堆的教程可供參考。切記，處理3D文字的時配色是關鍵，稍不注意就會顯得山寨和俗氣。

好了，以上是一些在設計banner時可以用到的字形設計技巧，可能有童鞋要說我平時banner的設計工作很繁重，時間也很緊張，沒有精力去做字形，或者由于版權的問題，在大多數情況下不得不使用那么幾種字體，像這樣的情況有沒有好的辦法讓banner中的文字出效果呢。答案當然是有啦，下面就給大家介紹幾個方法。看看如何在使用簡單的默認字體的同時打破字體的沉默。

字體如何打破沉默——不破不立

看到沒有，同樣是簡單的字體，只是打破了整段的文字，做單個字體的傾斜，整體看起來就活潑跳動了很多，或者可以做單個字體的疊加，凹凸效果同樣可以讓簡單的默認字體變得跳躍起來。

如何打破字體的沉默——空間獨立

說起這種方法我們就不得不提到banner中的空間關系，在設計banner時通常我們如果我們想突出文字，那么就要使文字和背景拉開空間，而為文字做一個簡單的純色底色不可謂不是一個省事的辦法。

如何打破字體的沉默——斜能壓正

文字必須橫平豎直才是最好看的嘛？當然不是，在一些設計中一個傾斜的文字排版不僅可以打破默認字體的沉默還可以幫助整個畫面的構圖，真是百試不爽。

如何打破字體的沉默——長短粗細變換自如

通常我們在做一段文字的排版時，經常會根據段落中的關鍵字做相印的加粗或者高亮，這種方法看似簡單，但是在實際操作的過程中稍有不當就會導致整段字體看起來凌亂不堪，其實只要設計的時候把文字看作圖形，注意整個字體排版的走向是否有規律可循就容易很多。

OK，以上就是今天為大家總結的一些字形與字體的處理方法，希望對大家有所啟發，在banenr的設計中還有很多種有效的技巧可以用到，如果你有什么特別的技巧也可以告訴我們。

作者：LipengBian 轉自/uec.nq

更多視頻教程學習請關注:視覺設計聯盟公眾號：shijueshejilianmeng，回復“教程”

、UEditor

因為已經不再維護了，需要大量修改源碼，很多都是專門為jsp等服務器渲染項目寫的代碼需要刪除， 然后越刪越害怕越刪越不敢用，依賴jquery，需要專門用js去parse編輯完成的內容，parse完的內容還可能污染全局css，兼容老瀏覽器還不錯， 但是，我們不怎么考慮兼容IE。所以，告辭。

2、wangEditor

中文文檔，上手快，依賴jquery，功能少點要花時間去寫插件，需要單獨為圖片上傳功能寫個接口，老項目忙著上線臨時用過，感覺并不適合當前業務這么重的編輯功能于是放棄了。

3、Quill

api友好, 功能少，需要特定的css去解析文本（這點我不大喜歡），ui好看，適合作為論壇回帖功能使用。

4、CKEditor

CKEditor目前主流的還是4.x的版本，但是文檔看著很瞎眼實在是提不起興致去配置，草草用了下就放棄了，5.x版本剛從beta結束，需要指定專門的node以及npm版本，雖然功能強大配置靈活ui漂亮不過目前糟糕的兼容性基本是不可能出現在大眾視野了。

5、KingEditor

丑，不喜歡，不愛用

6、Draft-js

知乎最近剛改的文本編輯器就是在draft的基礎上開發的，依賴react， 棄。

7、Medium-editor：

雖然看著感覺很酷炫，但是，不適合我們的業務場景啊， api也簡陋可怕。

8、trix：

嗯，又一個小而美，放棄

9、Slate

react，放棄

10、Bootstrap-wysiwyg：

bootstrap, jquery, 放棄

11、vue-quill-editor

輕量級，工具條配置少，IE10+ 根據quillJs封裝。

擴展使用：www.jianshu.com/p/dc2492160…

12、tinymce

文檔好，功能強，bug少，無外部依賴，大家用了都說好，嗯，沒錯就是它了。

編輯器配置方面只要能看得懂英文耍起來還是比較簡單的，適配中碰到的大部分問題都可以通過看文檔解決，即便看文檔解決不了網上也有大量的文章能告訴你怎么配置能解決。

當然了，主要是我這里需要解決一些別人覺得超簡單自己一想都很煩人的需求，比如：

• word文檔粘貼進來要帶格式
• 兼容移動端
• word文檔粘貼進來要正常顯示并且還要兼容移動端
• 電腦網頁里粘貼進來內容要正常顯示并且排版還不能亂
• 電腦網頁拷過來的內容還要兼容到移動端

高級使用方式

你可能還想要通過一些更高級的方式來使用tinyMCE。

比如npm: npm install tinymce

bower: bowerinstall tinymce 或者

bower install tinymce-src=git://github.com/tinymce/tinymce

composer: php composer.phar require"tinymce/tinymce" ">=4"

nuget: Install-PackageTinyMCE

sdk: 你可以在這里下載：www.tinymce.com/download/

jQuery: 如果你希望得到一個jQuery插件形式的tinyMCE，你可以在這里定制：www.tinymce.com/download/cu…。你可以根據你的意愿，定制你需要的功能。這樣，你可以得到一個盡可能小的適用的tinyMCE。

1、插件

tinyMCE有很多插件可以使用，比如代碼編輯模式、高亮模式，圖片上傳等等。插件拓展或新增了tinyMCE的功能。或者，你也可以自定義一些插件。

關于插件的內容過多，不進行翻譯，后續一些插件也以掛出官網的鏈接形式展示。

2、自主義UI

1、主題和皮膚

你可以定制主題和皮膚，通過threm和spin來配置它們。

2、尺寸

這些配置幫助你定制尺寸，width、height、min_width、max_width、min_height、max_height。

你可能還需要自適應尺寸（www.tinymce.com/docs/plugin…）的插件來幫助你使尺寸更智能。或者，你可以使用resize配置。

3、樣式

content_css 可用幫助你定制主體區域的樣式。

statusbar 設為false可以隱藏狀態欄。

4、源碼模式

www.tinymce.com/docs/get-st…。頁尾。

5、上傳圖片

https://www.tinymce.com/docs/get-started/upload-images/

6、拼寫檢查

www.tinymce.com/docs/get-st…

7、內容過濾

https://www.tinymce.com/docs/get-started/filter-content/

兼容性

移動端：

PC端：

初始化

因為tinymce的Plugins是按需加載的

為了能先快速上手這個編輯器

就先在vue-cli的index.html中默認塞入一條在線cdn地址

<script src="https://cdn.bootcss.com/tinymce/4.7.4/tinymce.min.js"></script>
復制代碼

記得去下載語言包到本地,

然后就在文件內引入

import './zh_CN.js'
復制代碼

后面有機會再寫下單獨打包的事項，畢竟這貨體積還不小。

插入vue組件模板

<template>
 <div>
 <textarea :id="Id"></textarea>
 </div>
</template>
復制代碼

記得一定要在textarea外面包一層div，不然...你自己試試看就知道了。

組件基礎配置

將tinymce通過指定的selector掛載到組件中

<template>
 <div>
 <textarea :id="Id"></textarea>
 </div>
</template>
<script>
 import './zh_CN.js'
 export default {
 data () {
 const Id=Date.now()
 return {
 Id: Id,
 Editor: null,
 DefaultConfig: {}
 }
 },
 props: {
 value: {
 default: '',
 type: String
 },
 config: {
 type: Object,
 default: ()=> {
 return {
 theme: 'modern',
 height: 300
 }
 }
 }
 },
 mounted () {
 this.init()
 },
 beforeDestroy () {
 // 銷毀tinymce
 this.$emit('on-destroy')
 window.tinymce.remove(`#${this.Id}`)
 },
 methods: {
 init () {
 const self=this
 this.Editor=window.tinymce.init({
 // 默認配置
 ...this.DefaultConfig,
 
 // prop內傳入的的config
 ...this.config, 
 
 // 掛載的DOM對象
 selector: `#${this.Id}`,
 
 setup: (editor)=> {
 // 拋出 'on-ready' 事件鉤子
 editor.on(
 'init', ()=> {
 self.loading=false
 self.$emit('on-ready')
 editor.setContent(self.value)
 }
 )
 // 拋出 'input' 事件鉤子，同步value數據
 editor.on(
 'input change undo redo', ()=> {
 self.$emit('input', editor.getContent())
 }
 )
 }
 })
 }
 }
 }
</script>
復制代碼

好了，組件基本的初始化完成，后面正式開始踩坑之旅

API

具體內容看官網的API就行，英語不好的用chrome翻譯下對照著demo也能看個七七八八，當然主要原因還是我比較懶。

我這邊根據自身業務需求在組件的data內寫了個默認配置

DefaultConfig: {
 // GLOBAL
 height: 500,
 theme: 'modern',
 menubar: false,
 toolbar: `styleselect | fontselect | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | image media | table | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | preview removeformat hr | paste code link | undo redo | fullscreen `,
 plugins: `
 paste
 importcss
 image
 code
 table
 advlist
 fullscreen
 link
 media
 lists
 textcolor
 colorpicker
 hr
 preview
 `,
 
 // CONFIG
 forced_root_block: 'p',
 force_p_newlines: true,
 importcss_append: true,
 // CONFIG: ContentStyle 這塊很重要， 在最后呈現的頁面也要寫入這個基本樣式保證前后一致， `table`和`img`的問題基本就靠這個來填坑了
 content_style: `
 * { padding:0; margin:0; }
 html, body { height:100%; }
 img { max-width:100%; display:block;height:auto; }
 a { text-decoration: none; }
 iframe { width: 100%; }
 p { line-height:1.6; margin: 0px; }
 table { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
 .mce-object-iframe { width:100%; box-sizing:border-box; margin:0; padding:0; }
 ul,ol { list-style-position:inside; }
 `,
 insert_button_items: 'image link | inserttable',
 // CONFIG: Paste
 paste_retain_style_properties: 'all',
 paste_word_valid_elements: '*[*]', // word需要它
 paste_data_images: true, // 粘貼的同時能把內容里的圖片自動上傳，非常強力的功能
 paste_convert_word_fake_lists: false, // 插入word文檔需要該屬性
 paste_webkit_styles: 'all',
 paste_merge_formats: true,
 nonbreaking_force_tab: false,
 paste_auto_cleanup_on_paste: false,
 // CONFIG: Font
 fontsize_formats: '10px 11px 12px 14px 16px 18px 20px 24px',
 // CONFIG: StyleSelect
 style_formats: [
 {
 title: '首行縮進',
 block: 'p',
 styles: { 'text-indent': '2em' }
 },
 {
 title: '行高',
 items: [
 {title: '1', styles: { 'line-height': '1' }, inline: 'span'},
 {title: '1.5', styles: { 'line-height': '1.5' }, inline: 'span'},
 {title: '2', styles: { 'line-height': '2' }, inline: 'span'},
 {title: '2.5', styles: { 'line-height': '2.5' }, inline: 'span'},
 {title: '3', styles: { 'line-height': '3' }, inline: 'span'}
 ]
 }
 ],
 // FontSelect
 font_formats: `
 微軟雅黑=微軟雅黑;
 宋體=宋體;
 黑體=黑體;
 仿宋=仿宋;
 楷體=楷體;
 隸書=隸書;
 幼圓=幼圓;
 Andale Mono=andale mono,times;
 Arial=arial, helvetica,
 sans-serif;
 Arial Black=arial black, avant garde;
 Book Antiqua=book antiqua,palatino;
 Comic Sans MS=comic sans ms,sans-serif;
 Courier New=courier new,courier;
 Georgia=georgia,palatino;
 Helvetica=helvetica;
 Impact=impact,chicago;
 Symbol=symbol;
 Tahoma=tahoma,arial,helvetica,sans-serif;
 Terminal=terminal,monaco;
 Times New Roman=times new roman,times;
 Trebuchet MS=trebuchet ms,geneva;
 Verdana=verdana,geneva;
 Webdings=webdings;
 Wingdings=wingdings,zapf dingbats`,
 // Tab
 tabfocus_elements: ':prev,:next',
 object_resizing: true,
 // Image
 imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions'
}
復制代碼

因為本人比較懶，以上配置導出的代碼可能會有代碼注入的風險，建議保存的時候再前后端都做下注入過濾，不過一般數據安全問題主要還是服務器那邊的事情?。

后面的圖片上傳可以單獨拆出來做個小配置，直接寫到props里好了。

url: {
 default: '',
 type: String
 },
 accept: {
 default: 'image/jpeg, image/png',
 type: String
 },
 maxSize: {
 default: 2097152,
 type: Number
 },
 withCredentials: {
 default: false,
 type: Boolean
 }
復制代碼

然后把這套東西塞到init配置里

// 圖片上傳
 images_upload_handler: function (blobInfo, success, failure) {
 if (blobInfo.blob().size > self.maxSize) {
 failure('文件體積過大')
 }
 
 if (self.accept.indexOf(blobInfo.blob().type) >=0) {
 uploadPic()
 } else {
 failure('圖片格式錯誤')
 }
 function uploadPic () {
 const xhr=new XMLHttpRequest()
 const formData=new FormData()
 xhr.withCredentials=self.withCredentials
 xhr.open('POST', self.url)
 xhr.onload=function () {
 if (xhr.status !==200) {
 // 拋出 'on-upload-fail' 鉤子
 self.$emit('on-upload-fail')
 failure('上傳失敗: ' + xhr.status)
 return
 }
 const json=JSON.parse(xhr.responseText)
 // 拋出 'on-upload-success' 鉤子
 self.$emit('on-upload-complete' , [
 json, success, failure
 ])
 }
 formData.append('file', blobInfo.blob())
 xhr.send(formData)
 }
 }
復制代碼

至此， 一個組件的封裝基本算是完成了

看下初階成果

<template>
 <div>
 <textarea :id="Id"></textarea>
 </div>
</template>
<script>
 import './zh_CN.js'
 export default {
 data () {
 const Id=Date.now()
 return {
 Id: Id,
 Editor: null,
 DefaultConfig: {
 // GLOBAL
 height: 500,
 theme: 'modern',
 menubar: false,
 toolbar: `styleselect | fontselect | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | image media | table | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | preview removeformat hr | paste code link | undo redo | fullscreen `,
 plugins: `
 paste
 importcss
 image
 code
 table
 advlist
 fullscreen
 link
 media
 lists
 textcolor
 colorpicker
 hr
 preview
 `,
 
 // CONFIG
 forced_root_block: 'p',
 force_p_newlines: true,
 importcss_append: true,
 // CONFIG: ContentStyle 這塊很重要， 在最后呈現的頁面也要寫入這個基本樣式保證前后一致， `table`和`img`的問題基本就靠這個來填坑了
 content_style: `
 * { padding:0; margin:0; }
 html, body { height:100%; }
 img { max-width:100%; display:block;height:auto; }
 a { text-decoration: none; }
 iframe { width: 100%; }
 p { line-height:1.6; margin: 0px; }
 table { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
 .mce-object-iframe { width:100%; box-sizing:border-box; margin:0; padding:0; }
 ul,ol { list-style-position:inside; }
 `,
 insert_button_items: 'image link | inserttable',
 // CONFIG: Paste
 paste_retain_style_properties: 'all',
 paste_word_valid_elements: '*[*]', // word需要它
 paste_data_images: true, // 粘貼的同時能把內容里的圖片自動上傳，非常強力的功能
 paste_convert_word_fake_lists: false, // 插入word文檔需要該屬性
 paste_webkit_styles: 'all',
 paste_merge_formats: true,
 nonbreaking_force_tab: false,
 paste_auto_cleanup_on_paste: false,
 // CONFIG: Font
 fontsize_formats: '10px 11px 12px 14px 16px 18px 20px 24px',
 // CONFIG: StyleSelect
 style_formats: [
 {
 title: '首行縮進',
 block: 'p',
 styles: { 'text-indent': '2em' }
 },
 {
 title: '行高',
 items: [
 {title: '1', styles: { 'line-height': '1' }, inline: 'span'},
 {title: '1.5', styles: { 'line-height': '1.5' }, inline: 'span'},
 {title: '2', styles: { 'line-height': '2' }, inline: 'span'},
 {title: '2.5', styles: { 'line-height': '2.5' }, inline: 'span'},
 {title: '3', styles: { 'line-height': '3' }, inline: 'span'}
 ]
 }
 ],
 // FontSelect
 font_formats: `
 微軟雅黑=微軟雅黑;
 宋體=宋體;
 黑體=黑體;
 仿宋=仿宋;
 楷體=楷體;
 隸書=隸書;
 幼圓=幼圓;
 Andale Mono=andale mono,times;
 Arial=arial, helvetica,
 sans-serif;
 Arial Black=arial black, avant garde;
 Book Antiqua=book antiqua,palatino;
 Comic Sans MS=comic sans ms,sans-serif;
 Courier New=courier new,courier;
 Georgia=georgia,palatino;
 Helvetica=helvetica;
 Impact=impact,chicago;
 Symbol=symbol;
 Tahoma=tahoma,arial,helvetica,sans-serif;
 Terminal=terminal,monaco;
 Times New Roman=times new roman,times;
 Trebuchet MS=trebuchet ms,geneva;
 Verdana=verdana,geneva;
 Webdings=webdings;
 Wingdings=wingdings,zapf dingbats`,
 // Tab
 tabfocus_elements: ':prev,:next',
 object_resizing: true,
 // Image
 imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions'
 }
 }
 },
 props: {
 value: {
 default: '',
 type: String
 },
 config: {
 type: Object,
 default: ()=> {
 return {
 theme: 'modern',
 height: 300
 }
 }
 },
 url: {
 default: '',
 type: String
 },
 accept: {
 default: 'image/jpeg, image/png',
 type: String
 },
 maxSize: {
 default: 2097152,
 type: Number
 },
 withCredentials: {
 default: false,
 type: Boolean
 }
 },
 mounted () {
 this.init()
 },
 beforeDestroy () {
 // 銷毀tinymce
 this.$emit('on-destroy')
 window.tinymce.remove(`$#{this.Id}`)
 },
 methods: {
 init () {
 const self=this
 
 this.Editor=window.tinymce.init({
 // 默認配置
 ...this.DefaultConfig,
 
 // 圖片上傳
 images_upload_handler: function (blobInfo, success, failure) {
 if (blobInfo.blob().size > self.maxSize) {
 failure('文件體積過大')
 }
 
 if (self.accept.indexOf(blobInfo.blob().type) >=0) {
 uploadPic()
 } else {
 failure('圖片格式錯誤')
 }
 function uploadPic () {
 const xhr=new XMLHttpRequest()
 const formData=new FormData()
 xhr.withCredentials=self.withCredentials
 xhr.open('POST', self.url)
 xhr.onload=function () {
 if (xhr.status !==200) {
 // 拋出 'on-upload-fail' 鉤子
 self.$emit('on-upload-fail')
 failure('上傳失敗: ' + xhr.status)
 return
 }
 const json=JSON.parse(xhr.responseText)
 // 拋出 'on-upload-complete' 鉤子
 self.$emit('on-upload-complete' , [
 json, success, failure
 ])
 }
 formData.append('file', blobInfo.blob())
 xhr.send(formData)
 }
 },
 // prop內傳入的的config
 ...this.config, 
 
 // 掛載的DOM對象
 selector: `#${this.Id}`,
 setup: (editor)=> {
 // 拋出 'on-ready' 事件鉤子
 editor.on(
 'init', ()=> {
 self.loading=false
 self.$emit('on-ready')
 editor.setContent(self.value)
 }
 )
 // 拋出 'input' 事件鉤子，同步value數據
 editor.on(
 'input change undo redo', ()=> {
 self.$emit('input', editor.getContent())
 }
 )
 }
 })
 }
 }
 }
</script>
復制代碼

直接引入組件調用就行了

<template>
 <mce-editor 
 :config="Config"
 v-model="Value"
 :url="Url"
 :max-size="MaxSize"
 :accept="Accept"
 :with-credentials=false
 @on-ready="onEditorReady"
 @on-destroy="onEditorDestroy"
 @on-upload-success="onEditorUploadComplete"
 @on-upload-fail="onEditorUploadFail"
 ></mce-editor>
</template>
復制代碼

但是作為一名優秀的程序員，這怎么可能夠嘛。

下面說下打包的事情

塞入webpack

為了加快頁面載入速度就要首先解決載入文件過多的問題，而大部分時間用戶并不需要每次打開頁面都先加載一遍editor的核心文件，而editor本身也要按需加載內容，一開始想把每個plugin都搞成獨立組件模塊按需載入，但是這就要涉及到修改編輯器本身源碼，或者說對window.tinymce刪掉點特性，這些都太麻煩也都有風險，對后面的代碼維護影響也大，索性就都先留著。

后面邊做邊改吧

還是以vue-cli為例

把官網下載的包塞到stataic文件夾中

然后刪掉index.html模版中的cdn代碼吧不需要了

當然這里有倆選擇

要么做成一個異步組件，單獨打包，按需載入

要么直接引入到main.js中將包打成為一個巨無霸

所以我選擇前者，

首先老規矩 引入編輯器主體

import '../../static/tinymce/tinymce.min.js'
復制代碼

然后刷新下頁面，不出意外應該是報這么個錯Uncaught SyntaxError: Unexpected token <

眼尖的朋友應該知道是怎么回事了theme.js:1

在默認配置下， tinymce載入的theme的路徑居然是這個

Request URL:http://localhost:8080/themes/modern/theme.js

然后我跑去官網搜了下api 只搜到一個叫document_base_url的api，但是根據多年程序員的直覺經驗告訴我 不是這貨（嗯，我在這里卡住了），網上翻了下各地文獻，都沒有啊，

那怎么辦呢

于是我就跑去看源碼...但是4萬行...算了...

然后我就在控臺打印了下tinymce對象，然后發現了一個叫baseURL的string對象，嗯，有希望了。

在源碼里搜了下baseURL

蹦出來這段代碼 .... 算了有很多段...

大致思想就是通過當前URI拆出來個baseURL,改掉就行了

window.tinymce.baseURL='/static/tinymce'
復制代碼

如果需要載入的地址是另一個比如自己公司的cdn的路徑，那改成全路徑就行了

window.tinymce.baseURL='http://cdn.xxx.com/static/tinymce'
復制代碼

貌似路徑的問題解決了

但是新的問題又出現了，

插件下過來都是帶min的，但默認載入的插件都是不帶min的，一定是我源碼沒看仔細，

然后我又搜了一下代碼

if (!baseURL && document.currentScript) {
 src=document.currentScript.src;
 if (src.indexOf('.min') !=-1) {
 suffix='.min';
 }
 baseURL=src.substring(0, src.lastIndexOf('/'));
}
復制代碼

希望就在眼前，貌似是業務我載入的方式是直接導入到模塊的，于是一個叫suffix的默認值為空了，于是我去又加了行代碼：

window.tinymce.suffix='.min'
復制代碼

成功！

你看嘛，超級簡單的是不是，根本不用改源碼，網上說的動不動就去改源碼什么的不要信啊不要信，大部分面向對象的事情改個默認值就行了。

對了,還記得前面的語言包嘛，

下過來塞到/static/tinymce/langs文件夾里

然后刪掉

import './zh_CN.js'
復制代碼

這行代碼

在DefaultConfig中放入一個新配置項

language: 'zh_CN'
復制代碼

好了，后面就是模塊打包的事情了,

打包

前面打的包有一個問題是默認配置是載入tinyMce本體，那么就會造成這個包大概有500k的體積，如果這個組件不做異步載入的處理，那么對于某些業務來說就是災難。雖然這么做打開只用載入一個文件，業務比較穩定。

但我覺得這樣不優雅所以最后還是把它單獨拎出來了。

同理，根據這個庫本身的特性，我們完全可以把這么多個必須的plugin按需要直接統一打成一個包，直接載入。這樣，我們就又多了一個幾百k的plugins包。

然后把plugins包和tinyMce主體包在不阻塞頁面加載的情況下，做個懶加載提前緩存好文件方便后面使用，而組件本身在掛載前做個監聽window.tinymce全局變量的方法，然后cdn控制下文件的過期時間即可。

這樣，在保證了靈活度的前提下也保證了業務載入的速度。