首頁 / 精選專題 / TinyMCE 編輯器介紹

TinyMCE 編輯器介紹

即使不會寫程式,也能輕鬆做出想要的頁面


終於~TinyMCE Editor 的改造吿一段落了,這裡將我所修改的地方列出來,如果大家覺得有什麼不足之處可以再跟我說~
為什麼要重新弄一個編輯器呢,因為之前的雖說是小巧玲瓏,但實在也沒什麼亮點,尤其是他沒有做環境隔離,像是~貼一段爆炸動畫的程式碼,結果~後台就爆了~  

所以這次決心要弄一個好用的線上編輯器,也就是現在的 Tiny 啦~我改造了不少地方先列出來,如果大家覺得有不足之處再跟我說~


01. Source Code 編輯

Tiny 內建的原始碼編輯實在太陽春,所以二話不說就把之前寫的 ACE 拿進來用,直接支援Emmet,並且將 fontawsome 整合到他的 Auto Complete 內(用了很Dirty的方法才讓他能顯示圖形  ),至於他的一些細部設定可以透過 Cmd + , 打開面板去設定,ACE 我就不多講了,畢竟是工程師的玩具,不是同一掛的會感覺無聊~



02. ICON插入

當然也要照顧到不寫程式的老闆們,所以在 Tiny 下我也加上了直接插入 ICON 的介面,只要打上字母搜尋,點選顏色與尺寸,就能將 ICON 插入到內容中



03. 插入設計元素

Tiny 用 iframe 將編輯環境與真實環境做了很好的隔離,不用怕 CSS 或是 JS 會影響到現實環境,所以我就將一些常用元素放進來,內容要比之前的區塊編輯器更加豐富,當然也更加好用,只要在空白處按下右鍵就可以插入這些元素,你只要更換圖片及修改文字內容即可~具體內容請參考上一篇介紹



04. 設定為商品連結

在任何圖片、影片、文字上按下右鍵選擇-設定為商品連結,即可直接開啟商品資訊或者加入購物車~


05. 元素使用表

由於 HTML 的特性,使用文字編輯的方式,某些地方一定會難以操作,最常見的就是標籤沒清乾淨,導致後面整個大跑版,所以我加上了這個元素使用表,你可以在表上進行刪除、重新排序,或是單獨開啟元素的原始碼。


 
06. CSS結構表

大部分初學者單看 HTML 會覺得還蠻好理解,反正除了一些歷史共業的 Tag 外,就是成雙成對的概念,但加上了 CSS,事情就開始變得不單純了,要想迅速知道一份 HTML/CSS 的結構,用 Chrome 的工作管理員是最快,相對也是最複雜的,現在許多網站都使用前端框架,DIV 好像不用錢似的拼命用,讓 HTML 的深度越來越恐怖,我在 Tiny 上做的 HTML/CSS 結構相對來說很單純,在你想要參照的元素上點右鍵,他就會列出你所點選的元素以及他所有的直系物件,一直到 BODY 標籤,此外也會列出相關的 CSS 屬性給你參考,如果你本身已經會用 Chrome 的 Console, 那麼可以忽略此功能~

這張表另一個主要功能就是用來清除元素,如果只用鍵盤滑鼠,你可能只能清除掉最末端的文字或圖片,透過這個列表你可以判斷應該要清除哪一個元素。



07. 專屬及全域的外部 CSS/JS

現在你可以自由地增加外部連結的 CSS/JS 檔案,當你進入文件編輯後,所導入的 CSS/JS 就屬於專屬專屬連結,只會做用在你目前的文件上,如果從後台的文章管理及頁面管理設定連結的話,就屬於全域連結,會做用在所有的文章或自訂頁面上。

兩者有很大的不同,舉例來說~當你看到一個有趣的特效,需要加入某個 CDN 連結,那麼使用專屬連結即可,因為只有一個頁面需要它~
當你每次打字的時候都覺得字體過大或太小,又或者行距間距不滿意,就可以寫一個 CSS 來定義你想要樣式,並將它加到全域連結內,那就一勞永逸的解決這個問題~



08. 將專欄顯示於首頁

現在你可以任意選擇要讓哪些專欄顯示在首頁上,通常商品的變化如果不大,很容易讓人覺得網站沒有在更新,但就沒那麼多變化怎辦~?
所以將你所寫的專欄放到首頁上是不錯的選擇,寫商品相關是必要的,但也不用太拘泥於所謂官網形象,發揮個人特色,把你被劈腿的慘痛經驗寫上去,也是不錯的選擇~


08. 加入 transForm 操作

transForm 是個神奇的東西,高手用它做特效,菜鳥用它補坑洞,怎麼說呢~如果你今天準備要給客戶做 Demo, 卻發現有幾段字怎樣都喬不好,凸起的那個頭破壞了整個版型,已經沒時間讓你慢慢分析CSS(或者你根本不想虐待自己的話),就是 transForm 上場的好時機了,我以前初學CSS時常幹這種事~
 

我將transForm常用到的像移動,旋轉縮放等屬性都集結起來,透過滑鼠就可以完成,你可以任意地加上 transForm 的效果讓版面更活潑~

Software

This is the card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
Software

This is the card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
Software

This is the card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project



 


以上是這次修改的大項,我另外會錄一支影片來實地操作一遍,相信這個工具會讓你更輕鬆地經營自己的網站~


SlimWeb Developer Eric
一個在五濁亂世中
    不願靠話術生存的工程師
Eric Chen
最後更新 2024-12-01 23:47:00發表日期 2024-11-27 15:27:09

延伸閱讀...

SlimWeb與資訊公司的差異 SlimWeb与资讯公司的差异 The difference between SlimWeb and IT companies SlimWebとIT企業の違い網站概念-新手必讀 网站概念-新手必读 Website concept-newbie must read ウェブサイトのコンセプト - 初心者必読讓ChatGPT成為您專屬的~線上客服我想做電商,但又怕業績不好~

相關商品

Related Products
211

$29,999 $29,999

SlimWeb 全功能電商系統

108

$19,999 $29,999

SlimGPT/應用型人工智能

  • SlimWeb 全功能電商系統

    $29,999 $29,999

  • SlimGPT/應用型人工智能

    $19,999 $29,999

線上客服

後端設計

ChatGPT應用

人工智能

網頁設計