首頁 / 精選專題 / 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. 將專欄顯示於首頁

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


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


SlimWeb Developer Eric
一個在五濁亂世中
    不願靠話術生存的工程師
Eric Chen
最後更新 2024-11-28 14:53:13發表日期 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
177

$29,999 $29,999

SlimWeb 全功能電商系統

90

$19,999 $29,999

SlimGPT/應用型人工智能

  • SlimWeb 全功能電商系統

    $29,999 $29,999

  • SlimGPT/應用型人工智能

    $19,999 $29,999

綠界金流

Google登入

最便宜的電商系統

後端設計

電子商務