HTML編輯器自己做！布丁版TinyMCE編緝器/ An Online HTML ...

2024-11-29

文章推薦指數： 80 %

投票人數：10人

TinyMCE一般只是作為網站裡面將轉變為所見即得編輯器的小工具，能像是編輯Word一樣地編輯HTML網頁，最後產生的HTML程式碼又乾淨又漂亮。 我因為太常使用TinyMCE來 ... ::: HOME SITEMAP ABOUT MENU HOME回到首頁 SITEMAP網站地圖 ABOUT關於布丁 PUBLICATIONS發表 WORKS作品 ARCHIVES文章列表 LABELS標籤 DONATE捐款 SUBSCRIBE訂閱 CONTACT聯絡布丁 HELP ::: HTML編輯器自己做！布丁版TinyMCE編緝器/AnOnlineHTMLEditor:CustomizedTinyMCEEditor 8月31,2017 程式語言/JavaScript , GitHub , JavaScript , Programming/JavaScript , Service/GitHub , Work , Work/Widget 15Comments Edit Copy Download 說到編輯HTML的編輯器，你會想到那個工具呢？純寫程式碼用的SublimeText、Notepad++？給不會程式碼用的Word轉存HTML格式？混合編輯的Dreamweaver？真要我說的話，目前我看過最好、最乾淨、各種編輯器之間轉換最漂亮的編輯器，就是TinyMCE。 TinyMCE一般只是作為網站裡面將<textarea>轉變為所見即得編輯器的小工具，能像是編輯Word一樣地編輯HTML網頁，最後產生的HTML程式碼又乾淨又漂亮。 我因為太常使用TinyMCE來編輯HTML網頁程式碼，特別是表格的編輯，所以乾脆索性把TinyMCE做成獨立的布丁版TinyMCE編輯器，讓人需要的時候就直接打開網頁、使用TinyMCE編輯網頁吧。 布丁版TinyMCE編輯器：https://pulipulichen.github.io/TinyMCE-Online-Editor/布丁版TinyMCE編輯器/CustomizedTinyMCEEditor開新視窗：布丁版TinyCE編輯器程式碼/CodeRepository布丁版TinyMCE編輯器的原始碼都放在GitHub上，有需要的人可以用fork建立分支，或是直接下載所有程式碼。 布丁版TinyMCE編輯器完全是在客戶端的瀏覽器上執行，不需要後端伺服器或特別的環境，建議使用GoogleChrome執行。 GitHub儲存庫：https://github.com/pulipulichen/TinyMCE-Online-Editor功能/Features布丁版TinyMCE編輯器增加了原本TinyMCE沒有的功能，概述如下：開啟檔案/OPEN可以載入本地端電腦上的HTML、txt等純文字檔案。 開新檔案/NEW可建立空白的新檔案。 預覽網頁PREVIEW可開啟預覽視窗。 在TinyMCE上編輯的結果會直接呈現在預覽視窗上。 操作畫面如下圖所示：複製HTML原始碼/COPYHTML可直接複製TinyMCE編輯器產生的HTML原始碼。 TinyMCE產生的HTML表格非常好用且漂亮，不論是Word貼過來、Excel、Google文件貼過來、或是從TinyMCE貼到其他地方，轉換結果都相當完美。 這點是我很欣賞TinyMCE的地方。 儲存檔案/SAVE可以將編輯結果儲存成單一檔案，格式可選擇HTML網頁(*.html)，可以用瀏覽器或Word開啟。 或是可以存成OpenDocumentText開放文件格式(*.odt)，使用LibreOffice開啟。 即時儲存/Auto-Save所有編輯的內容都會即時儲存在您瀏覽器中。 即使不小心關閉視窗，下次開啟布丁版TinyMCE編輯器的時候，它會自動載入您上次編輯的內容。 網址載入/LoadParametersfromURL布丁版TinyMCE編輯器接受使用網址的GET參數來載入預設的內容。 參數包括：filename：設定檔案名稱。 以下網址會開啟一個預設檔案名稱為「DefaultFilename」的編輯器：https://pulipulichen.github.io/TinyMCE-Online-Editor/?filename=Default%20Filenamecontent：設定檔案內容。 以下網址會開啟一個預設檔案內容為「DefaultContent」的編輯器：https://pulipulichen.github.io/TinyMCE-Online-Editor/?content=Default%20Contentfilename跟content兩個參數可以合併一起使用，例如以下網址會開啟預設檔案名稱為「DefaultFilename」跟預設檔案內容為「DefaultContent」的編輯器：https://pulipulichen.github.io/TinyMCE-Online-Editor/?filename=Default%20Filename&content=Default%20Content您可以用以下工具來建立帶有預設檔案名稱或檔案內容的網址：結語/Inclosing我將TinyMCE做成獨立網頁已經有好一陣子了。 一開始是用Dropbox的公開網頁功能來做。 不過後來Dropbox關閉了公開網頁功能，於是我就轉移到CodePen上建立TinyMCE網頁。 然而CodePen上沒辦法做太複雜的功能，最後我還是回到GitHub上建立比較複雜的專案，最後就變成這個布丁版TinyMCE編輯器了。 在為原本的TinyMCE加上幾個功能的時候，我深深覺得編輯器這種操作界面實在是很難設計的很好。 要如何兼顧美觀跟實用，實在是個兩難。 我只是單純考慮到實用而把按鈕擺在哪裡，但實在很難說得上美觀。 不過，使用一段時間之後，就會覺得其實還蠻好用的吧？XD這個專案會隨著我的需求不斷修改TinyMCE內部的設定。 如果未來看到介面跟這篇Blog寫的不太一樣的話，不要覺得奇怪喔。 布丁布丁吃布丁 HTML編輯器自己做！布丁版TinyMCE編緝器/AnOnlineHTMLEditor:CustomizedTinyMCEEditor 是由布丁布丁吃布丁製作，以創用CC姓名標示-非商業性-相同方式分享3.0台灣授權條款釋出。 這個布丁是在無聊的世界中找尋樂趣的一種不能吃的食物，喜愛動漫畫、遊戲、程式，以及跟世間脫節的生活步調。 L P 關於布丁訂閱BLOG 贊助 RelatedPosts 總共15則留言 ( 我要發問 , 隱藏留言顯示留言 ) 布丁布丁吃布丁2017年9月12日晚上10:14修正下列問題：-文件過長時，捲軸超過頁面的問題：現在文件再長也不會讓捲軸超過頁面-水平線hr等標籤消失問題：刪除載入多餘的CSS檔案後解決此問題回覆刪除回覆回覆匿名2017年9月21日下午6:14非常好用，真心感謝版大！！回覆刪除回覆布丁布丁吃布丁2017年9月21日晚上10:15我也覺得很好用，不客氣刪除回覆回覆回覆Unknown2017年12月28日下午5:58好猛喔=="我做個divcontenteditable的版本就做到快死了QQ回覆刪除回覆布丁布丁吃布丁2017年12月28日晚上7:01To林信嘉，divcontenteditable要達到的目標不太一樣加油刪除回覆回覆回覆Soomean2018年5月18日下午6:59您好，打擾了，請問原本TinyMCElangs/資料夾下面可以加入語系翻譯，這個版本還支援此功能嗎?回覆刪除回覆布丁布丁吃布丁2018年5月18日晚上7:28ToSoomean:我也不確定，但我試了一下沒反應你可以自行下載或fork程式碼來修改：https://github.com/pulipulichen/TinyMCE-Online-Editor如果不會下載GitHub，請看「如何從GitHub下載檔案？」這篇：http://blog.pulipuli.info/2016/05/github-how-to-download-files-in-github.htmlTinyMCE的語言檔案下載位置https://www.tinymce.com/download/language-packages/刪除回覆回覆Soomean2018年5月18日晚上7:59XDD感謝嘗試，我剛剛也試了好一陣子，看了一下你的修改紀錄幾乎是一樣的方法最後我將jquery.tinymce.min.js也加進去就能正常翻譯了刪除回覆回覆Soomean2018年5月18日晚上8:05不...她失效了，我再研究研究看看刪除回覆回覆Soomean2018年5月18日晚上10:35搞定了，首先暫存的問題要先排除，再來是目前版本是編輯器本身直接去遠端抓取，遠端langs沒有對應的字形檔，需要先修改成讀取本地，再把tinymce.min.js以外的檔案補齊刪除回覆回覆布丁布丁吃布丁2018年5月18日晚上10:35OAO好像挺複雜的，請加油吧！刪除回覆回覆布丁布丁吃布丁2018年5月18日晚上10:41感謝啟發原來我是用遠端的TinyMCE啊orz真是不好意思，給人家添麻煩了更新後預設使用正體中文版本囉刪除回覆回覆回覆布丁布丁吃布丁2018年6月11日晚上8:16https://simplemde.com/最近覺得Markdown也挺不錯的，之後也可以來個Markdown編輯器自己做！回覆刪除回覆回覆Unknown2020年2月2日晚上9:56想問一下大大我想把這編輯器放在自製的論壇上請問需要加上大大的名字嗎?回覆刪除回覆布丁布丁吃布丁2020年2月2日晚上10:24好啊，加上個網頁連結吧刪除回覆回覆回覆新增留言載入更多… CommentTools: Chooseone... UploadImage(imgur) UploadVideo(Streamable) UploadTemporaryFile(Upload.express) CodeFormatter(forHTMLorXMLcode) CommentsFeed(JSONformat) CommentsFeed(XMLformat) 較新的文章首頁較舊的文章訂閱：張貼留言(Atom) ::: AboutMe 布丁布丁吃布丁這個布丁是在無聊的世界中找尋樂趣的一種不能吃的食物，喜愛動漫畫、遊戲、程式，以及跟世間脫節的生活步調。 FacebookFanpage NowLoading... RandomPosts Guestbook RecentPosts Comments ::: 聯絡布丁信箱：blog@pulipuli.info 提問：留言板聯絡時間：週一~週日24小時 BuyMeACoffee(Donate) 如果有幫到您的話，請布丁喝杯咖啡吧！進入贊助捐款網頁 Labels (AllLabels) 日記 (235) 輔大圖資 (166) 電腦軟體 (129) 政大圖檔 (113) 期刊論文閱讀 (98) Programming/JavaScript (85) 作品 (84) Blogger (77) 網路管理 (71) 記事 (58) DSpace (56) JavaScript (56) OS/ProxmoxVE (52) 程式寫作 (50) 碩士畢業論文 (47) Proxmox (42) Android (39) OS/Android (37) Presentation (36) OS/Linux (34) DataMining (31) Software/Weka (31) Course (30) Linux (29) 研究方法 (29) 虛擬機器 (29) DLLL-CIAS (26) OS/Windows (26) Software/Zotero (26) Work/Widget (26) Zotero (26) 新玩具 (26) Software/Windows (25) 程式語言/JavaScript (25) 網站服務 (25) 雲端科技與圖書館行動服務研習班(2014) (24) Software/GoogleDoc (23) Software/LibreOffice (23) Programming/PHP (22) 作業報告 (22) 研究所推甄 (19) 演講心得 (18) Windows/電腦軟體 (17) 資訊計量學 (17) Series/BigDataAnalysisCourse (16) 無題 (16) 課程/圖書資訊學研究趨勢 (16) PHP (15) Programming/AutoIt (15) GitHub (14) Programming/R (14) Statistics (14) 圖資學術界 (13) Software/Word (12) 課程/國際檔案學 (12) Series/LibreOfficeCalcTemplate (11) Software/OwnCloud (11) Software/R (11) VirtualMachine/VirtualBox (11) VirtualBox (11) 極短 (11) AutoIt (10) NetBeans (10) Server/ownCloud (10) Software (10) Software/Google (10) Software/NetBeans (10) Zentyal (10) 作業系統/Linux (10) KALS (9) Programing/PHP (9) Programming/PhoneGap (9) Research (9) Research/TextMining (9) 教學課程 (9) 課程/檔案應用研究 (9) 輔漫 (9) GLPI (8) Koha (8) OS/Chromebook (8) OS/Koha (8) Series/NOUWord (8) Software/SPSS (8) Work (8) 政大平價美食 (8) 數位圖書館 (8) CSS (7) OS/Zentyal (7) Plurk (7) Programming/CSS (7) Programming/Node.js (7) Drawing (6) OS/FreeNAS (6) Programming/APP (6) Service/GitHub (6) Software/PostgreSQL (6) Software/PostreSQL (6) Tool/NetBeans (6) VirtualMachine/OpenVZ (6) 報告/教學課程 (6) 發表 (6) 2009詐欺案件 (5) Note/Paper (5) Programming/Electron (5) Programming/Java (5) Programming/Python (5) Software/Firefox (5) Software/Inkscape (5) Work/Windows (5) 評論 (5) 3C (4) IDE (4) Library/ORCID (4) LibreOfficeCalcCourse (4) Programming/Database (4) Programming/SeleniumIDE (4) Programming/Vue.js (4) Research/SequentialAnalysis (4) Selenium (4) Server/OCS (4) Software/Browser (4) Software/Notepad++ (4) Software/PDF (4) Software/Pentaho (4) WebService (4) 博士班考試 (4) 問答訪談 (4) 課程/資訊行為與資訊服務 (4) 讀者服務研討 (4) CKEditor (3) Drupal (3) GAME (3) GoogleAnalytics (3) Hardware (3) Hardware/Notebook (3) OCS (3) Programming/CKEditor (3) Series/WekaImageClassification (3) Server/ApacheSolr (3) Software/Cortana (3) Software/Drupal (3) VirtualMachine (3) 活動籌辦 (3) 演講 (3) 生活/日記 (3) 網站系統/ownCloud (3) 課程/檔案學 (3) 遊戲 (3) 閱讀學習 (3) AngularJS (2) EMAIL-KM (2) GAME/PokemonGO (2) IPFire (2) MachineLearning (2) OS/IPFire (2) OS/pfSense (2) OSSIM (2) Programming/AdonisJs (2) Research/SocialNetworkAnalysis (2) Server/GitLab (2) Software/CWISE (2) Software/Office (2) Software/OpenLiveWriter (2) Software/WordPress (2) Software/mRemoteNG (2) Sponsored (2) VirtualMachine/Docker (2) pfSense (2) ニコニコ動画 (2) 國立政治大學 (2) 圖書資訊學研討 (2) 布丁通信 (2) 技術服務研討 (2) 生活/政大平價美食 (2) 研究方法\序列分析 (2) 研究領域/閱讀學習 (2) 硬體設備 (2) 系統/WordPress (2) 輕小說 (2) 電腦軟體/R (2) 3C/Note8 (1) Auto (1) Hardware/Teclast (1) Linux/WINE (1) Programming/AngularJS (1) Programming/HTML (1) Programming/SVG (1) Programming/Svelte (1) Programming/WebDesign (1) Programming/Webpack (1) Publication/Conference (1) RIME (1) Research/Infometric (1) SecondLife (1) Server/Apache (1) Software/ApacheTika (1) Software/DSpace (1) Software/FileZilla (1) Software/ImageMagick (1) Software/中州韻輸入法 (1) TimemarktoSSA (1) Travel (1) Userscript (1) 國家考試 (1) 國立空中大學 (1) 專題 (1) 課程/計算智能與商業分析 (1) 販售 (1) 資訊管理/網站管理 (1) 電視 (1)