整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
家好，今天我們一起來(lái)探討一下Banner的設(shè)計(jì)，在這一次的教程中我會(huì)介紹一些平時(shí)總結(jié)下來(lái)的可以讓banner迅速達(dá)成效果的簡(jiǎn)單小竅門(mén)，如果你在平時(shí)有大量的banner設(shè)計(jì)工作，并且總覺(jué)得時(shí)間不夠用，那么希望本次的教程可以幫助到你。
好了，那么我們進(jìn)入正題。
首先讓我們認(rèn)識(shí)一下banner，平時(shí)大家在各種網(wǎng)站或者移動(dòng)端的app里經(jīng)常可以見(jiàn)到，印象里他們大都長(zhǎng)這個(gè)樣子：
當(dāng)然了，這就是我們常說(shuō)的banner，但其實(shí)banner還有幾個(gè)遠(yuǎn)房表兄、同父異母什么的兄弟姐妹們，它們可能長(zhǎng)這個(gè)樣子：
恩……其實(shí)以上這些在廣義上來(lái)說(shuō)都可以歸納為Banner，就形狀來(lái)說(shuō)現(xiàn)在的banner也已經(jīng)不再局限于從前大家所理解和看到的那些出現(xiàn)在固定廣告位的長(zhǎng)條形廣告了，他可以是長(zhǎng)的、方的、必要的時(shí)候也可以是其他什么亂七八糟的形狀，總之，不管是側(cè)邊欄廣告、焦點(diǎn)圖、專題頁(yè)的頭圖、我們都可以理解為是banner，在設(shè)計(jì)方法上，其實(shí)都是共通的。
如果要是分類(lèi)的話其實(shí)可以大概分為兩類(lèi)：
1.“促使點(diǎn)擊”
2.“渲染氣氛”
第一種就是大家經(jīng)常在各種大大小小的網(wǎng)站都能看到的廣告banner或者焦點(diǎn)圖，她們有大有小可長(zhǎng)可短，但是他們共同的作用就是通過(guò)各種方式引導(dǎo)你去點(diǎn)擊。
通常你在做這種類(lèi)型的banner時(shí)，一般會(huì)是上圖這個(gè)場(chǎng)面。
第二種大家通常可以在各種游戲網(wǎng)站，房地產(chǎn)網(wǎng)站，各種活動(dòng)專題頁(yè)中見(jiàn)到，也就是大家常說(shuō)的頭圖，這種類(lèi)型的banner通常并不是引導(dǎo)用戶去觸發(fā)點(diǎn)擊，而是服務(wù)于內(nèi)容，為整個(gè)頁(yè)面做好氣氛的渲染。
通常你在做這種類(lèi)型的banner時(shí)，一般會(huì)是上圖這個(gè)場(chǎng)面
說(shuō)這么多，其實(shí)我是希望通過(guò)這種介紹和分類(lèi)方式，讓大家在拿到設(shè)計(jì)需求時(shí)可以確定一個(gè)正確的設(shè)計(jì)方向，降低設(shè)計(jì)成本，從而提高工作效率。
下面我們介紹幾個(gè)設(shè)計(jì)小竅門(mén)，也許通過(guò)這些方法可以讓你在最短的時(shí)間內(nèi)有效的達(dá)成效果。
首先我們來(lái)說(shuō)一下字體和字形，大家都知道我們從圖形上解讀信息的能力是要大于單純的閱讀文字，但是在banner的設(shè)計(jì)中，大多數(shù)情況下我們都是通過(guò)文字來(lái)了解信息，圖片只是起到一個(gè)襯托的作用，在我自己平時(shí)做banner的時(shí)間分配里對(duì)字形的處理可能要占到百分之五十甚至更多的時(shí)間，所以今天我們重點(diǎn)來(lái)說(shuō)一下這方面的處理技巧。
1.鋼筆造字
鋼筆造字是在做字形設(shè)計(jì)上一個(gè)比較討巧的方法，但卻又十分有效。對(duì)平時(shí)沒(méi)有太多字形設(shè)計(jì)經(jīng)驗(yàn)的同學(xué)來(lái)說(shuō)非常適合的，只要你了解基本的字形設(shè)計(jì)規(guī)律（筆畫(huà)的粗細(xì)，字體的重心等），那么此方法可以讓你快速的讓banner高大上起來(lái)，具體的設(shè)計(jì)方法大家可以移步字形設(shè)計(jì)大師@劉兵克老濕的設(shè)計(jì)教程：http://v.youku.com/v_show/id_XNDI4MDMwMTg4.html
2.筆畫(huà)鏈接
當(dāng)你沒(méi)有時(shí)間完整的設(shè)計(jì)banner上字體的字形時(shí)，筆畫(huà)鏈接未嘗不是一種好的方法，在做筆畫(huà)鏈接時(shí)只有合理的安排需要鏈接的筆畫(huà)，做到不突兀，不影響易讀性，那么都會(huì)出來(lái)一個(gè)比較好的視覺(jué)效果，在做筆畫(huà)連接的時(shí)候我推薦大家使用一些筆畫(huà)粗細(xì)比較統(tǒng)一的非襯線字體比方說(shuō)雅黑、悅黑、幼圓等等。
3. 隨“意”變形
顧名思義就是根據(jù)文字的具體含義來(lái)設(shè)計(jì)字形的一種方法，當(dāng)上面介紹的兩種技巧都讓你感覺(jué)頭大的時(shí)候不妨試試這種處理技巧，你只需要腦洞大開(kāi)，了解文字的具體含義并用相應(yīng)的圖形在文字上加以體現(xiàn)就可以了，就醬簡(jiǎn)單！
4. 3D
如果要在banner中想突出文字，把文字做成3D效果可謂是最“粗暴”的一種解決方法，只要處理方法得當(dāng)也可以達(dá)到很好的效果，如何處理3D這種細(xì)節(jié)問(wèn)題這里就不提及了，網(wǎng)上有大堆大堆的教程可供參考。切記，處理3D文字的時(shí)配色是關(guān)鍵，稍不注意就會(huì)顯得山寨和俗氣。
好了，以上是一些在設(shè)計(jì)banner時(shí)可以用到的字形設(shè)計(jì)技巧，可能有童鞋要說(shuō)我平時(shí)banner的設(shè)計(jì)工作很繁重，時(shí)間也很緊張，沒(méi)有精力去做字形，或者由于版權(quán)的問(wèn)題，在大多數(shù)情況下不得不使用那么幾種字體，像這樣的情況有沒(méi)有好的辦法讓banner中的文字出效果呢。答案當(dāng)然是有啦，下面就給大家介紹幾個(gè)方法。看看如何在使用簡(jiǎn)單的默認(rèn)字體的同時(shí)打破字體的沉默。
字體如何打破沉默——不破不立
看到?jīng)]有，同樣是簡(jiǎn)單的字體，只是打破了整段的文字，做單個(gè)字體的傾斜，整體看起來(lái)就活潑跳動(dòng)了很多，或者可以做單個(gè)字體的疊加，凹凸效果同樣可以讓簡(jiǎn)單的默認(rèn)字體變得跳躍起來(lái)。
如何打破字體的沉默——空間獨(dú)立
說(shuō)起這種方法我們就不得不提到banner中的空間關(guān)系，在設(shè)計(jì)banner時(shí)通常我們?nèi)绻覀兿胪怀鑫淖郑敲淳鸵刮淖趾捅尘袄_(kāi)空間，而為文字做一個(gè)簡(jiǎn)單的純色底色不可謂不是一個(gè)省事的辦法。
如何打破字體的沉默——斜能壓正
文字必須橫平豎直才是最好看的嘛？當(dāng)然不是，在一些設(shè)計(jì)中一個(gè)傾斜的文字排版不僅可以打破默認(rèn)字體的沉默還可以幫助整個(gè)畫(huà)面的構(gòu)圖，真是百試不爽。
如何打破字體的沉默——長(zhǎng)短粗細(xì)變換自如
通常我們?cè)谧鲆欢挝淖值呐虐鏁r(shí)，經(jīng)常會(huì)根據(jù)段落中的關(guān)鍵字做相印的加粗或者高亮，這種方法看似簡(jiǎn)單，但是在實(shí)際操作的過(guò)程中稍有不當(dāng)就會(huì)導(dǎo)致整段字體看起來(lái)凌亂不堪，其實(shí)只要設(shè)計(jì)的時(shí)候把文字看作圖形，注意整個(gè)字體排版的走向是否有規(guī)律可循就容易很多。
OK，以上就是今天為大家總結(jié)的一些字形與字體的處理方法，希望對(duì)大家有所啟發(fā)，在banenr的設(shè)計(jì)中還有很多種有效的技巧可以用到，如果你有什么特別的技巧也可以告訴我們。
作者：LipengBian 轉(zhuǎn)自/uec.nq
更多視頻教程學(xué)習(xí)請(qǐng)關(guān)注:視覺(jué)設(shè)計(jì)聯(lián)盟公眾號(hào)：shijueshejilianmeng，回復(fù)“教程”
、UEditor
因?yàn)橐呀?jīng)不再維護(hù)了，需要大量修改源碼，很多都是專門(mén)為jsp等服務(wù)器渲染項(xiàng)目寫(xiě)的代碼需要?jiǎng)h除， 然后越刪越害怕越刪越不敢用，依賴jquery，需要專門(mén)用js去parse編輯完成的內(nèi)容，parse完的內(nèi)容還可能污染全局css，兼容老瀏覽器還不錯(cuò)， 但是，我們不怎么考慮兼容IE。所以，告辭。
2、wangEditor
中文文檔，上手快，依賴jquery，功能少點(diǎn)要花時(shí)間去寫(xiě)插件，需要單獨(dú)為圖片上傳功能寫(xiě)個(gè)接口，老項(xiàng)目忙著上線臨時(shí)用過(guò)，感覺(jué)并不適合當(dāng)前業(yè)務(wù)這么重的編輯功能于是放棄了。
3、Quill
api友好, 功能少，需要特定的css去解析文本（這點(diǎn)我不大喜歡），ui好看，適合作為論壇回帖功能使用。
4、CKEditor
CKEditor目前主流的還是4.x的版本，但是文檔看著很瞎眼實(shí)在是提不起興致去配置，草草用了下就放棄了，5.x版本剛從beta結(jié)束，需要指定專門(mén)的node以及npm版本，雖然功能強(qiáng)大配置靈活ui漂亮不過(guò)目前糟糕的兼容性基本是不可能出現(xiàn)在大眾視野了。
5、KingEditor
丑，不喜歡，不愛(ài)用
6、Draft-js
知乎最近剛改的文本編輯器就是在draft的基礎(chǔ)上開(kāi)發(fā)的，依賴react， 棄。
7、Medium-editor：
雖然看著感覺(jué)很酷炫，但是，不適合我們的業(yè)務(wù)場(chǎng)景啊， api也簡(jiǎn)陋可怕。
8、trix：
嗯，又一個(gè)小而美，放棄
9、Slate
react，放棄
10、Bootstrap-wysiwyg：
bootstrap, jquery, 放棄
11、vue-quill-editor
輕量級(jí)，工具條配置少，IE10+ 根據(jù)quillJs封裝。
擴(kuò)展使用：www.jianshu.com/p/dc2492160…
12、tinymce
文檔好，功能強(qiáng)，bug少，無(wú)外部依賴，大家用了都說(shuō)好，嗯，沒(méi)錯(cuò)就是它了。
編輯器配置方面只要能看得懂英文耍起來(lái)還是比較簡(jiǎn)單的，適配中碰到的大部分問(wèn)題都可以通過(guò)看文檔解決，即便看文檔解決不了網(wǎng)上也有大量的文章能告訴你怎么配置能解決。
當(dāng)然了，主要是我這里需要解決一些別人覺(jué)得超簡(jiǎn)單自己一想都很煩人的需求，比如：
高級(jí)使用方式
你可能還想要通過(guò)一些更高級(jí)的方式來(lái)使用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: 如果你希望得到一個(gè)jQuery插件形式的tinyMCE，你可以在這里定制：www.tinymce.com/download/cu…。你可以根據(jù)你的意愿，定制你需要的功能。這樣，你可以得到一個(gè)盡可能小的適用的tinyMCE。
1、插件
tinyMCE有很多插件可以使用，比如代碼編輯模式、高亮模式，圖片上傳等等。插件拓展或新增了tinyMCE的功能。或者，你也可以自定義一些插件。
關(guān)于插件的內(nèi)容過(guò)多，不進(jìn)行翻譯，后續(xù)一些插件也以掛出官網(wǎng)的鏈接形式展示。
2、自主義UI
1、主題和皮膚
你可以定制主題和皮膚，通過(guò)threm和spin來(lái)配置它們。
2、尺寸
這些配置幫助你定制尺寸，width、height、min_width、max_width、min_height、max_height。
你可能還需要自適應(yīng)尺寸（www.tinymce.com/docs/plugin…）的插件來(lái)幫助你使尺寸更智能。或者，你可以使用resize配置。
3、樣式
content_css 可用幫助你定制主體區(qū)域的樣式。
statusbar 設(shè)為false可以隱藏狀態(tài)欄。
4、源碼模式
www.tinymce.com/docs/get-st…。頁(yè)尾。
5、上傳圖片
https://www.tinymce.com/docs/get-started/upload-images/
6、拼寫(xiě)檢查
www.tinymce.com/docs/get-st…
7、內(nèi)容過(guò)濾
https://www.tinymce.com/docs/get-started/filter-content/
兼容性
移動(dòng)端：
PC端：
初始化
因?yàn)閠inymce的Plugins是按需加載的
為了能先快速上手這個(gè)編輯器
就先在vue-cli的index.html中默認(rèn)塞入一條在線cdn地址
<script src="https://cdn.bootcss.com/tinymce/4.7.4/tinymce.min.js"></script> 復(fù)制代碼
記得去下載語(yǔ)言包到本地,
然后就在文件內(nèi)引入
import './zh_CN.js' 復(fù)制代碼
后面有機(jī)會(huì)再寫(xiě)下單獨(dú)打包的事項(xiàng)，畢竟這貨體積還不小。
插入vue組件模板
<template> <div> <textarea :id="Id"></textarea> </div> </template> 復(fù)制代碼
記得一定要在textarea外面包一層div，不然...你自己試試看就知道了。
組件基礎(chǔ)配置
將tinymce通過(guò)指定的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 () {
// 銷(xiāo)毀tinymce
this.$emit('on-destroy')
window.tinymce.remove(`#${this.Id}`)
},
methods: {
init () {
const self=this
this.Editor=window.tinymce.init({
// 默認(rèn)配置
...this.DefaultConfig,
// prop內(nèi)傳入的的config
...this.config,
// 掛載的DOM對(duì)象
selector: `#${this.Id}`,
setup: (editor)=> {
// 拋出 'on-ready' 事件鉤子
editor.on(
'init', ()=> {
self.loading=false
self.$emit('on-ready')
editor.setContent(self.value)
}
)
// 拋出 'input' 事件鉤子，同步value數(shù)據(jù)
editor.on(
'input change undo redo', ()=> {
self.$emit('input', editor.getContent())
}
)
}
})
}
}
}
</script>
復(fù)制代碼
好了，組件基本的初始化完成，后面正式開(kāi)始踩坑之旅
API
具體內(nèi)容看官網(wǎng)的API就行，英語(yǔ)不好的用chrome翻譯下對(duì)照著demo也能看個(gè)七七八八，當(dāng)然主要原因還是我比較懶。
我這邊根據(jù)自身業(yè)務(wù)需求在組件的data內(nèi)寫(xiě)了個(gè)默認(rèn)配置
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 這塊很重要， 在最后呈現(xiàn)的頁(yè)面也要寫(xiě)入這個(gè)基本樣式保證前后一致， `table`和`img`的問(wèn)題基本就靠這個(gè)來(lái)填坑了
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, // 粘貼的同時(shí)能把內(nèi)容里的圖片自動(dòng)上傳，非常強(qiáng)力的功能
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: '首行縮進(jìn)',
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: `
微軟雅黑=微軟雅黑;
宋體=宋體;
黑體=黑體;
仿宋=仿宋;
楷體=楷體;
隸書(shū)=隸書(shū);
幼圓=幼圓;
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'
}
復(fù)制代碼
因?yàn)楸救吮容^懶，以上配置導(dǎo)出的代碼可能會(huì)有代碼注入的風(fēng)險(xiǎn)，建議保存的時(shí)候再前后端都做下注入過(guò)濾，不過(guò)一般數(shù)據(jù)安全問(wèn)題主要還是服務(wù)器那邊的事情?。
后面的圖片上傳可以單獨(dú)拆出來(lái)做個(gè)小配置，直接寫(xiě)到props里好了。
url: {
default: '',
type: String
},
accept: {
default: 'image/jpeg, image/png',
type: String
},
maxSize: {
default: 2097152,
type: Number
},
withCredentials: {
default: false,
type: Boolean
}
復(fù)制代碼
然后把這套東西塞到init配置里
// 圖片上傳
images_upload_handler: function (blobInfo, success, failure) {
if (blobInfo.blob().size > self.maxSize) {
failure('文件體積過(guò)大')
}
if (self.accept.indexOf(blobInfo.blob().type) >=0) {
uploadPic()
} else {
failure('圖片格式錯(cuò)誤')
}
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)
}
}
復(fù)制代碼
至此， 一個(gè)組件的封裝基本算是完成了
看下初階成果
<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 這塊很重要， 在最后呈現(xiàn)的頁(yè)面也要寫(xiě)入這個(gè)基本樣式保證前后一致， `table`和`img`的問(wèn)題基本就靠這個(gè)來(lái)填坑了
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, // 粘貼的同時(shí)能把內(nèi)容里的圖片自動(dòng)上傳，非常強(qiáng)力的功能
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: '首行縮進(jìn)',
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: `
微軟雅黑=微軟雅黑;
宋體=宋體;
黑體=黑體;
仿宋=仿宋;
楷體=楷體;
隸書(shū)=隸書(shū);
幼圓=幼圓;
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 () {
// 銷(xiāo)毀tinymce
this.$emit('on-destroy')
window.tinymce.remove(`$#{this.Id}`)
},
methods: {
init () {
const self=this
this.Editor=window.tinymce.init({
// 默認(rèn)配置
...this.DefaultConfig,
// 圖片上傳
images_upload_handler: function (blobInfo, success, failure) {
if (blobInfo.blob().size > self.maxSize) {
failure('文件體積過(guò)大')
}
if (self.accept.indexOf(blobInfo.blob().type) >=0) {
uploadPic()
} else {
failure('圖片格式錯(cuò)誤')
}
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內(nèi)傳入的的config
...this.config,
// 掛載的DOM對(duì)象
selector: `#${this.Id}`,
setup: (editor)=> {
// 拋出 'on-ready' 事件鉤子
editor.on(
'init', ()=> {
self.loading=false
self.$emit('on-ready')
editor.setContent(self.value)
}
)
// 拋出 'input' 事件鉤子，同步value數(shù)據(jù)
editor.on(
'input change undo redo', ()=> {
self.$emit('input', editor.getContent())
}
)
}
})
}
}
}
</script>
復(fù)制代碼
直接引入組件調(diào)用就行了
<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> 復(fù)制代碼
但是作為一名優(yōu)秀的程序員，這怎么可能夠嘛。
下面說(shuō)下打包的事情
塞入webpack
為了加快頁(yè)面載入速度就要首先解決載入文件過(guò)多的問(wèn)題，而大部分時(shí)間用戶并不需要每次打開(kāi)頁(yè)面都先加載一遍editor的核心文件，而editor本身也要按需加載內(nèi)容，一開(kāi)始想把每個(gè)plugin都搞成獨(dú)立組件模塊按需載入，但是這就要涉及到修改編輯器本身源碼，或者說(shuō)對(duì)window.tinymce刪掉點(diǎn)特性，這些都太麻煩也都有風(fēng)險(xiǎn)，對(duì)后面的代碼維護(hù)影響也大，索性就都先留著。
后面邊做邊改吧
還是以vue-cli為例
把官網(wǎng)下載的包塞到stataic文件夾中
然后刪掉index.html模版中的cdn代碼吧不需要了
當(dāng)然這里有倆選擇
要么做成一個(gè)異步組件，單獨(dú)打包，按需載入
要么直接引入到main.js中將包打成為一個(gè)巨無(wú)霸
所以我選擇前者，
首先老規(guī)矩 引入編輯器主體
import '../../static/tinymce/tinymce.min.js' 復(fù)制代碼
然后刷新下頁(yè)面，不出意外應(yīng)該是報(bào)這么個(gè)錯(cuò)Uncaught SyntaxError: Unexpected token <
眼尖的朋友應(yīng)該知道是怎么回事了theme.js:1
在默認(rèn)配置下， tinymce載入的theme的路徑居然是這個(gè)
Request URL:http://localhost:8080/themes/modern/theme.js
然后我跑去官網(wǎng)搜了下api 只搜到一個(gè)叫document_base_url的api，但是根據(jù)多年程序員的直覺(jué)經(jīng)驗(yàn)告訴我 不是這貨（嗯，我在這里卡住了），網(wǎng)上翻了下各地文獻(xiàn)，都沒(méi)有啊，
那怎么辦呢
于是我就跑去看源碼...但是4萬(wàn)行...算了...
然后我就在控臺(tái)打印了下tinymce對(duì)象，然后發(fā)現(xiàn)了一個(gè)叫baseURL的string對(duì)象，嗯，有希望了。
在源碼里搜了下baseURL
蹦出來(lái)這段代碼 .... 算了有很多段...
大致思想就是通過(guò)當(dāng)前URI拆出來(lái)個(gè)baseURL,改掉就行了
window.tinymce.baseURL='/static/tinymce' 復(fù)制代碼
如果需要載入的地址是另一個(gè)比如自己公司的cdn的路徑，那改成全路徑就行了
window.tinymce.baseURL='http://cdn.xxx.com/static/tinymce' 復(fù)制代碼
貌似路徑的問(wèn)題解決了
但是新的問(wèn)題又出現(xiàn)了，
插件下過(guò)來(lái)都是帶min的，但默認(rèn)載入的插件都是不帶min的，一定是我源碼沒(méi)看仔細(xì)，
然后我又搜了一下代碼
if (!baseURL && document.currentScript) {
src=document.currentScript.src;
if (src.indexOf('.min') !=-1) {
suffix='.min';
}
baseURL=src.substring(0, src.lastIndexOf('/'));
}
復(fù)制代碼
希望就在眼前，貌似是業(yè)務(wù)我載入的方式是直接導(dǎo)入到模塊的，于是一個(gè)叫suffix的默認(rèn)值為空了，于是我去又加了行代碼：
window.tinymce.suffix='.min' 復(fù)制代碼
成功！
你看嘛，超級(jí)簡(jiǎn)單的是不是，根本不用改源碼，網(wǎng)上說(shuō)的動(dòng)不動(dòng)就去改源碼什么的不要信啊不要信，大部分面向?qū)ο蟮氖虑楦膫€(gè)默認(rèn)值就行了。
對(duì)了,還記得前面的語(yǔ)言包嘛，
下過(guò)來(lái)塞到/static/tinymce/langs文件夾里
然后刪掉
import './zh_CN.js' 復(fù)制代碼
這行代碼
在DefaultConfig中放入一個(gè)新配置項(xiàng)
language: 'zh_CN' 復(fù)制代碼
好了，后面就是模塊打包的事情了,
打包
前面打的包有一個(gè)問(wèn)題是默認(rèn)配置是載入tinyMce本體，那么就會(huì)造成這個(gè)包大概有500k的體積，如果這個(gè)組件不做異步載入的處理，那么對(duì)于某些業(yè)務(wù)來(lái)說(shuō)就是災(zāi)難。雖然這么做打開(kāi)只用載入一個(gè)文件，業(yè)務(wù)比較穩(wěn)定。
但我覺(jué)得這樣不優(yōu)雅所以最后還是把它單獨(dú)拎出來(lái)了。
同理，根據(jù)這個(gè)庫(kù)本身的特性，我們完全可以把這么多個(gè)必須的plugin按需要直接統(tǒng)一打成一個(gè)包，直接載入。這樣，我們就又多了一個(gè)幾百k的plugins包。
然后把plugins包和tinyMce主體包在不阻塞頁(yè)面加載的情況下，做個(gè)懶加載提前緩存好文件方便后面使用，而組件本身在掛載前做個(gè)監(jiān)聽(tīng)window.tinymce全局變量的方法，然后cdn控制下文件的過(guò)期時(shí)間即可。
這樣，在保證了靈活度的前提下也保證了業(yè)務(wù)載入的速度。
文重要內(nèi)容
html中的單位只有一種，那就是像素px，所以單位是可以省略的，但是在CSS中不一樣。 CSS中的單位是必須要寫(xiě)的，因?yàn)樗鼪](méi)有默認(rèn)單位。
1 in=2.54cm=25.4mm=72pt=6pc。
各種單位的含義：
px：像素 em：印刷單位相當(dāng)于12個(gè)點(diǎn) %：百分比，相對(duì)周?chē)奈淖值拇笮?/p>
為什么說(shuō)像素px是一個(gè)相對(duì)單位呢，這也很好理解。比如說(shuō)，電腦屏幕的的尺寸是不變的，但是我們可以讓其顯示不同的分辨率，在不同的分辨率下，單個(gè)像素的長(zhǎng)度肯定是不一樣的啦。
百分比%這個(gè)相對(duì)單位要怎么用呢？這里也舉個(gè)例子：
CSS中，有很多非布局樣式（與布局無(wú)關(guān)），包括：字體、行高、顏色、大小、背景、邊框、滾動(dòng)、換行、裝飾性屬性（粗體、斜體、下劃線）等。
這一段，我們先來(lái)講一下字體屬性。
css樣式中，常見(jiàn)的字體屬性有以下幾種：
p{
font-size: 50px; /*字體大小*/
line-height: 30px; /*行高*/
font-family: 幼圓,黑體; /*字體類(lèi)型：如果沒(méi)有幼圓就顯示黑體，沒(méi)有黑體就顯示默認(rèn)*/
font-style: italic ; /*italic表示斜體，normal表示不傾斜*/
font-weight: bold; /*粗體*/
font-variant: small-caps; /*小寫(xiě)變大寫(xiě)*/
}
CSS中，所有的行，都有行高。盒子模型的padding，絕對(duì)不是直接作用在文字上的，而是作用在“行”上的。
如下圖所示：
上圖中，我們?cè)O(shè)置行高為30px，30px * 5=150px，通過(guò)查看審查元素，這個(gè)p標(biāo)簽的高度果然為150px。而且我們發(fā)現(xiàn)，我們并沒(méi)有給這個(gè)p標(biāo)簽設(shè)置高度，顯然是內(nèi)容將其撐高的。
垂直方向來(lái)看，文字在自己的行里是居中的。比如，文字是14px，行高是24px，那么padding就是5px：
為了嚴(yán)格保證字在行里面居中，我們的工程師有一個(gè)約定： 行高、字號(hào)，一般都是偶數(shù)。這樣可以保證，它們的差一定偶數(shù)，就能夠被2整除。
小技巧：如果一段文本只有一行，如果此時(shí)設(shè)置行高=盒子高，就可以保證單行文本垂直居中。這個(gè)很好理解。
上面這個(gè)小技巧，只適用于單行文本垂直居中，不適用于多行。如果想讓多行文本垂直居中，還需要計(jì)算盒子的padding。計(jì)算方式如下：
vertical-align: middle; /*指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對(duì)齊方式。*/
（1）字號(hào)：
font-size:14px;
（2）行高：
line-height:24px;
（3）字體：（font-family就是“字體”，family是“家庭”的意思）
font-family:"宋體";
是否加粗屬性以及上面這三個(gè)屬性，我們可以連寫(xiě)：（是否加粗、字號(hào) font-size、行高 line-height、字體 font-family）
格式：
font: 加粗 字號(hào)/行高/ 字體
舉例：
font: 400 14px/24px "宋體";
PS：400是nomal，700是bold。
上面這幾個(gè)屬性可以連寫(xiě)，但是有一個(gè)要求，font屬性連寫(xiě)至少要有字號(hào)和字體，否則連寫(xiě)是不生效的（相當(dāng)于沒(méi)有這一行代碼）。
2、字體屬性的說(shuō)明：
（1）網(wǎng)頁(yè)中不是所有字體都能用，因?yàn)檫@個(gè)字體要看用戶的電腦里面裝沒(méi)裝，比如你設(shè)置：
font-family: "華文彩云";
上方代碼中，如果用戶的 Windows 電腦里面沒(méi)有這個(gè)字體，那么就會(huì)變成宋體。
頁(yè)面中，中文我們一般使用：微軟雅黑、宋體、黑體。英文使用：Arial、Times New Roman。頁(yè)面中如果需要其他的字體，就需要單獨(dú)安裝字體，或者切圖。
（2）為了防止用戶電腦里，沒(méi)有微軟雅黑這個(gè)字體。就要用英語(yǔ)的逗號(hào)，提供備選字體。如下：（可以備選多個(gè)）
font-family: "微軟雅黑","宋體";
上方代碼表示：如果用戶電腦里沒(méi)有安裝微軟雅黑字體，那么就是宋體。
（3）我們須將英語(yǔ)字體放在最前面，這樣所有的中文，就不能匹配英語(yǔ)字體，就自動(dòng)的變?yōu)楹竺娴闹形淖煮w：
font-family: "Times New Roman","微軟雅黑","宋體";
上方代碼的意思是，英文會(huì)采用Times New Roman字體，而中文會(huì)采用微軟雅黑字體（因?yàn)槊绹?guó)人設(shè)計(jì)的Times New Roman字體并不針對(duì)中文，所以中文會(huì)采用后面的微軟雅黑）。比如說(shuō)，對(duì)于smyhvae哈哈哈這段文字，smyhvae會(huì)采用Times New Roman字體，而哈哈哈會(huì)采用微軟雅黑字體。
可是，如果我們把中文字體寫(xiě)在前面：(錯(cuò)誤寫(xiě)法)
font-family: "微軟雅黑","Times New Roman","宋體";
上方代碼會(huì)導(dǎo)致，中文和英文都會(huì)采用微軟雅黑字體。
（4）所有的中文字體，都有英語(yǔ)別名。
微軟雅黑的英語(yǔ)別名：
font-family: "Microsoft YaHei";
宋體的英語(yǔ)別名：
font-family: "SimSun";
于是，當(dāng)我們把字號(hào)、行高、字體這三個(gè)屬性合二為一時(shí)，也可以寫(xiě)成：
font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
（5）行高可以用百分比，表示字號(hào)的百分之多少。
一般來(lái)說(shuō)，百分比都是大于100%的，因?yàn)樾懈咭欢ㄒ笥谧痔?hào)。
比如說(shuō)， font:12px/200% “宋體”等價(jià)于font:12px/24px “宋體”。200%可以理解成word里面的2倍行高。
反過(guò)來(lái)， font:16px/48px “宋體”;等價(jià)于font:16px/300% “宋體”。
.div {
font-weight: normal; /*正常*/
font-weight: bold; /*加粗*/
font-weight: 100;
font-weight: 200;
font-weight: 900;
}
在設(shè)置字體是否加粗時(shí)，屬性值既可以填寫(xiě)normal、bold這樣的加粗字體，也可以直接填寫(xiě) 100至900 這樣的數(shù)字。normal的值相當(dāng)于400，bold的值相當(dāng)于700。
CSS樣式中，常見(jiàn)的文本屬性有以下幾種：
這里來(lái)一張表格的圖片吧，一覽無(wú)遺：
ul li{
list-style-image:url(images/2.gif) ; /*列表項(xiàng)前設(shè)置為圖片*/
margin-left:80px; /*公有屬性*/
}
另外還有一個(gè)簡(jiǎn)寫(xiě)屬性叫做list-style，它的作用是：將上面的多個(gè)屬性寫(xiě)在一個(gè)聲明中。
我們來(lái)看一下list-style-image屬性的效果：
給列表前面的圖片加個(gè)邊距吧，不然顯示不完整：
這里來(lái)一張表格的圖片吧，一覽無(wú)遺：
overflow屬性的屬性值可以是：
針對(duì)上面的不同的屬性值，我們來(lái)看一下效果： 舉例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #00cc66;
margin-right: 100px;
float: left;
}
#div1{
overflow: auto;/*超出的部分讓瀏覽器自行解決*/
}
#div2{
overflow: visible;/*超出的部分會(huì)顯示出來(lái)*/
}
#div3{
overflow: hidden;/*超出的部分將剪切掉*/
}
</style>
</head>
<body>
<div id="div1">其實(shí)很簡(jiǎn)單 其實(shí)很自然 兩個(gè)人的愛(ài)由兩人分擔(dān) 其實(shí)并不難 是你太悲觀 隔著一道墻不跟誰(shuí)分享 不想讓你為難 你不再需要給我個(gè)答案</div>
<div id="div2">其實(shí)很簡(jiǎn)單 其實(shí)很自然 兩個(gè)人的愛(ài)由兩人分擔(dān) 其實(shí)并不難 是你太悲觀 隔著一道墻不跟誰(shuí)分享 不想讓你為難 你不再需要給我個(gè)答案</div>
<div id="div3">其實(shí)很簡(jiǎn)單 其實(shí)很自然 兩個(gè)人的愛(ài)由兩人分擔(dān) 其實(shí)并不難 是你太悲觀 隔著一道墻不跟誰(shuí)分享 不想讓你為難 你不再需要給我個(gè)答案</div>
</body>
</html>
效果：
鼠標(biāo)的屬性cursor有以下幾個(gè)屬性值：
比如說(shuō)，我想讓鼠標(biāo)放在那個(gè)標(biāo)簽上時(shí)，光標(biāo)顯示手狀，代碼如下：
p:hover{
cursor: pointer;
}
另外還有以下的屬性：（不用記，需要的時(shí)候查一下就行了）
這里只舉一個(gè)濾鏡的例子吧。比如說(shuō)讓圖片變成灰度圖的效果，可以這樣設(shè)置濾鏡：
<img src="3.jpg" style="filter:gray()">
舉例代碼：
<body>
<table>
<tr>
<td>原始圖片</td>
<td>圖片加入黑白效果</td>
</tr>
<tr>
<td><img src="3.jpg"></td>
<td><img src="3.jpg" style="filter:gray()"></td> /*濾鏡：設(shè)置圖片為灰白效果*/
</tr>
</table>
</body>
效果如下：（IE有效果，google瀏覽器無(wú)效果）
延伸： 濾鏡本身是平面設(shè)計(jì)中的知識(shí)。如果你懂一點(diǎn)PS的話···打開(kāi)PS看看吧：
爆料一下，表示博主有兩年多的平面設(shè)計(jì)經(jīng)驗(yàn)，我做設(shè)計(jì)的時(shí)間其實(shí)比寫(xiě)代碼的時(shí)間要長(zhǎng)，嘿嘿···
現(xiàn)在，我們利用float浮動(dòng)屬性來(lái)把無(wú)序列表做成一個(gè)簡(jiǎn)單的導(dǎo)航欄吧，效果如下：
代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;/*去掉列表前面的圓點(diǎn)*/
width: 420px;
height: 60px;
background-color: black;/*設(shè)置整個(gè)導(dǎo)航欄的背景為灰色*/
}
li{
float: left;/*平鋪*/
margin-right: 30px;
margin-top: 16px;
}
a{
text-decoration: none;/*去掉超鏈的下劃線*/
font-size: 20px;
color: #BBBBBB;/*設(shè)置超鏈的字體為黑色*/
font-family:微軟雅黑;
}
</style>
</head>
<body>
<ul>
<li><a href="">博客園</a></li>
<li><a href="">新隨筆</a></li>
<li><a href="">聯(lián)系</a></li>
<li><a href="">訂閱</a></li>
<li><a href="">管理</a></li>
</ul>
</body>
</html>
實(shí)現(xiàn)效果如下：
國(guó)慶這四天，連續(xù)寫(xiě)了四天的博客，白天和黑夜，從未停歇，只交替沒(méi)交換，為的就是這每日一發(fā)。以后會(huì)不斷更新的。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
