ContentTools是一個(gè)美觀小巧的網(wǎng)頁內(nèi)容工具(一個(gè)JS庫),具備所見即所得(WYSIWYG)的編輯器功能,只需幾個(gè)簡單的步驟,即可將ContentTools添加到任何HTML頁面。如下圖所示頁面通過實(shí)時(shí)ContentTool的彈出層實(shí)現(xiàn)實(shí)時(shí)編輯功能。用小而美來形容它最好不過了!
https://github.com/GetmeUK
ContentTools是用于HTML頁面的美觀小巧的內(nèi)容編輯器。它被設(shè)計(jì)為:
ContentTools具有字體加粗、斜體、超鏈接、對(duì)齊、列表、表格、圖片、視頻、代碼、撤銷、重做、刪除等功能
1、加粗顯示
2、斜體顯示
3、超鏈接
4、H標(biāo)題
5、正文
6、有序和無序列表
7、插入表格
8、插入圖片
9、視頻
以上截圖中的功能還不完整,如果想體驗(yàn)以下完整的功能可以直接去DEMO頁面體驗(yàn),如果需要在HTML級(jí)別上更改元素的內(nèi)容,那也是可以的。通過屬性對(duì)話框中的最后一個(gè)選項(xiàng)卡,可以查看所選元素的內(nèi)部HTML代碼并直接對(duì)其進(jìn)行更新。
下載倉庫并打開/ build文件夾,包括預(yù)構(gòu)建的源文件。將文件夾的內(nèi)容復(fù)制到項(xiàng)目的適當(dāng)位置(例如,content-tools.min.js> /www/scripts/content-tools.min.js)。但是,/ images文件夾和icons.woff字體需要復(fù)制到與content-tools.min.css相同的文件夾中,文件結(jié)構(gòu)應(yīng)類似于:
<head> <title>My page</title> <link rel="stylesheet" type="text/css" href="assets/content-tools.min.css"> ... </head> <body> ... <script src="assets/content-tools.min.js"></script> <script src="assets/editor.js"></script> </body>
包括一個(gè)名為editor.js的附加JS文件。包含初始化我們的編輯器的代碼,繼續(xù)
<div data-editable data-name="main-content"> <blockquote> Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. </blockquote> <p>John F. Woods</p> </div>
data-name屬性用于在保存時(shí)標(biāo)識(shí)區(qū)域(默認(rèn)情況下使用id屬性),標(biāo)記可編輯HTML時(shí),常見的誤解是將單個(gè)元素標(biāo)記為可編輯,例如:
<h1 data-editable data-name="heading">Content</h1>
正確的使用方式如下,也就是說必須要在特定的容器元素內(nèi)
<div data-editable data-name=heading> <h1>Content</h1> </div>
ContentTools使用CSS類來對(duì)齊文本,圖像,視頻和iframe,需要在自己的CSS中為這些對(duì)齊類定義樣式,例如:
[data-editable] iframe, [data-editable] image, [data-editable] [data-ce-tag=img], [data-editable] img, [data-editable] video { clear: both; display: block; margin-left: auto; margin-right: auto; max-width: 100%; } /* 左對(duì)齊 */ [data-editable] .align-left { clear: initial; float: left; margin-right: 0.5em; } /* 右對(duì)齊 */ [data-editable].align-right { clear: initial; float: right; margin-left: 0.5em; } /* 可編輯區(qū)域中文本的對(duì)齊樣式 */ [data-editable] .text-center { text-align: center; } [data-editable] .text-left { text-align: left; } [data-editable] .text-right { text-align: right; }
ContentTools提供了一個(gè)編輯器,但是在初始化它之前,我們需要配置一些東西,即:
將以下代碼添加到我們之前創(chuàng)建的editor.js文件中:
window.addEventListener('load', function() { var editor; });
就像文字處理程序一樣,可以為內(nèi)容配置一系列預(yù)定義樣式。當(dāng)用戶從視口底部的檢查器欄中選擇標(biāo)簽時(shí),這些標(biāo)簽就會(huì)出現(xiàn)。盡管可以將樣式設(shè)置為適用于所有標(biāo)簽,但是僅顯示適用于標(biāo)簽類型的樣式。
我們將添加可應(yīng)用于段落<p>標(biāo)記的單一樣式.author。在var編輯器下方聲明添加:
ContentTools.StylePalette.add([ new ContentTools.Style('Author', 'author', ['p']) ]);
StylePalette.add方法使我們可以向編輯器添加樣式列表。每種樣式均聲明為一個(gè)Style實(shí)例,該實(shí)例使用顯示名稱,CSS類和可以應(yīng)用該樣式的標(biāo)簽列表初始化。我們需要添加相關(guān)的CSS來支持這種樣式,因此在HTML的開頭添加:
<head> ... <style> .author { font-style: italic; font-weight: bold; } </style> </head>
接下來,我們需要初始化編輯器,并讓它知道頁面上的哪些元素是可編輯的。為此,將以下代碼添加到editor.js中:
editor = ContentTools.EditorApp.get(); editor.init('*[data-editable]', 'data-name');
我們使用用于頁面可編輯區(qū)域的CSS選擇器和屬性名稱(“數(shù)據(jù)名稱”)來初始化編輯器,以告知編輯器元素的哪個(gè)屬性包含其區(qū)域名稱。區(qū)域名稱在同一頁面中必須唯一。
最后,我們希望在用戶保存頁面時(shí)得到通知,以便我們可以將每個(gè)區(qū)域的更新內(nèi)容存儲(chǔ)在文件或數(shù)據(jù)庫中。為此,我們監(jiān)聽由編輯器觸發(fā)的保存事件。在editor.init語句之后,將以下代碼添加到editor.js中:
editor.addEventListener('saved', function (ev) { var name, payload, regions, xhr; // 檢查是否已更改 regions = ev.detail().regions; if (Object.keys(regions).length == 0) { return; } // 保存更改時(shí)將編輯器設(shè)置為忙 this.busy(true); // 將每個(gè)區(qū)域的內(nèi)容收集到一個(gè)FormData實(shí)例中 payload = new FormData(); for (name in regions) { if (regions.hasOwnProperty(name)) { payload.append(name, regions[name]); } } // 將更新內(nèi)容發(fā)送到要保存的服務(wù)器 function onStateChange(ev) { // 檢查請(qǐng)求是否完成 if (ev.target.readyState == 4) { editor.busy(false); if (ev.target.status == '200') { // 保存成功,通知前臺(tái) new ContentTools.FlashUI('保存成功'); } else { // 保存失敗,通知前臺(tái) new ContentTools.FlashUI('保存失敗'); } } }; xhr = new XMLHttpRequest(); xhr.addEventListener('readystatechange', onStateChange); xhr.open('POST', '/save-my-page'); xhr.send(payload); });
當(dāng)用戶保存頁面時(shí),我們可以使用AJAX將每個(gè)區(qū)域的內(nèi)容發(fā)送到服務(wù)器進(jìn)行保存。在瀏覽器中打開頁面,尋找左上方的藍(lán)色編輯按鈕,然后單擊它以開始編輯。
這樣一個(gè)美觀且強(qiáng)大的即時(shí)編輯器可謂是非常的實(shí)用,特別是對(duì)于一些內(nèi)容編輯網(wǎng)站,如CMS、靜態(tài)文檔網(wǎng)站、博客等內(nèi)容型網(wǎng)站尤其有用,希望對(duì)你有所幫助,Enjoy it!
說得簡單點(diǎn),在線HTML編輯器就是在網(wǎng)上發(fā)帖子、寫博客的那個(gè)帶編輯功能的框框,可以進(jìn)行圖文排版等操作。
當(dāng)年本菜鳥做網(wǎng)站的時(shí)候,曾經(jīng)自己用javascript編寫過一個(gè)比較簡單的在線HTML編輯器,用于文本內(nèi)容的排版。但是因?yàn)樗接邢蓿芏喙δ芏紵o法實(shí)現(xiàn)。后來有了eWebEditor,功能確實(shí)強(qiáng)大,但這個(gè)編輯器是個(gè)收費(fèi)的軟件,并且正因?yàn)楣δ軓?qiáng)大,也就顯得過重,一些輕量的場合不是太適用。那有沒有既免費(fèi)、又功能強(qiáng)大、還能適應(yīng)輕量場合的在線HTML編輯器呢?
答案肯定是有的。這首先要感謝這些年來有一批奉獻(xiàn)精神的程序猿們不斷推進(jìn)共享軟件的開發(fā),讓我們得以享受他們的成果。
UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器,具有輕量,可定制,注重用戶體驗(yàn)等特點(diǎn),開源基于MIT協(xié)議,允許自由使用和修改代碼。特別要說的是,頭條號(hào)后臺(tái)發(fā)布文章的編輯器就是用的UEditor!
百度UEditor
UEditor還有一個(gè)輕量版的,叫做UMeditor,簡稱UM。UM是為滿足廣大門戶網(wǎng)站對(duì)于簡單發(fā)帖框,或者回復(fù)框需求所定制的在線HTML編輯器。 主要特點(diǎn)是容量和加載速度上的改變,主文件的代碼量為139k,而且放棄了使用傳統(tǒng)的iframe模式,采用了div的加載方式, 以達(dá)到更快的加載速度和零加載失敗率。UM的第一個(gè)使用者是百度貼吧,以經(jīng)受貼吧每天幾億的pv的考驗(yàn),功能設(shè)計(jì)應(yīng)當(dāng)是最優(yōu)化的了。 當(dāng)然隨著代碼的減少,UM的功能對(duì)于UE來說還是有所減少,但也有增加,比如拖拽圖片上傳,chrome的圖片拖動(dòng)改變大小等。
百度UEditor界面
xhEditor是一個(gè)基于jQuery開發(fā)的簡單迷你并且高效的可視化HTML編輯器,基于網(wǎng)絡(luò)訪問并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。
xhEditor完全基于Javascript開發(fā),可以應(yīng)用在任何的服務(wù)端語言環(huán)境下,例如:PHP、ASP、ASP.NET、JAVA等。可以在CMS、博客、論壇、商城等互聯(lián)網(wǎng)平臺(tái)上完美的嵌入運(yùn)行,能夠非常靈活簡單的和您的系統(tǒng)實(shí)現(xiàn)完美的無縫銜接。
主要特點(diǎn):
精簡迷你:初始加載4個(gè)文件,包括:1個(gè)js(50k)+2個(gè)css(10k)+1個(gè)圖片(5k),總共65k。若js和css文件進(jìn)行g(shù)zip壓縮傳輸,可以進(jìn)一步縮減為24k左右。
使用簡單:簡單的調(diào)用方式,加一個(gè)class屬性就能將textarea變成一個(gè)功能豐富的可視化編輯器。
無障礙訪問:提供WAI-ARIA全面支持,全鍵盤精細(xì)操作,全程語音向?qū)В峁┩昝罒o障礙訪問體驗(yàn),充分滿足殘疾人的上網(wǎng)需求。
內(nèi)置Ajax上傳:內(nèi)置強(qiáng)大的Ajax上傳,包括HTML4和HTML5上傳支持(多文件上傳、真實(shí)上傳進(jìn)度及文件拖放上傳),剪切板上傳及遠(yuǎn)程抓取上傳。
Word自動(dòng)清理:實(shí)現(xiàn)Word代碼自動(dòng)檢測(cè)并清理,生成代碼最優(yōu)化精簡,卻不丟失細(xì)節(jié)效果。
UBB可視化編輯:支持UBB可視化編輯,在獲得安全高效代碼存儲(chǔ)的同時(shí),又能享受可視化編輯的便捷。
KindEditor 也是一個(gè)開源的在線HTML編輯器, 使用 JavaScript 編寫,可以無縫地與 Java、.NET、PHP、ASP 等程序集成,比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用。本菜鳥感覺這個(gè)編輯器上手比較容易,功能也很強(qiáng)大,界面比較友好,很適合菜鳥使用。可惜的是最近好像停止更新了,官網(wǎng)好象也能不正常訪問。
KindEditor界面
主要特點(diǎn):
快速:體積小,加載速度快
開源:開放源代碼,高水平,高品質(zhì)
底層:內(nèi)置自定義 DOM 類庫,精確操作 DOM
擴(kuò)展:基于插件的設(shè)計(jì),所有功能都是插件,可根據(jù)需求增減功能
風(fēng)格:修改編輯器風(fēng)格非常容易,只需修改一個(gè) CSS 文件
兼容:支持大部分主流瀏覽器,比如 IE、Firefox、Safari、Chrome、Opera
嚴(yán)格來說,KISSY不僅僅是一個(gè)在線HTML編輯器,而是由阿里集團(tuán)前端工程師們發(fā)起創(chuàng)建的一個(gè)開源 JS 框架,具有跨終端、模塊化、使用簡單的特點(diǎn)。里面帶有HTML編輯器這個(gè)模塊。
阿里的KISSY
正因?yàn)镵ISSY采取模塊化設(shè)計(jì),因此具有高擴(kuò)展性、組件齊全,接口一致、自主開發(fā)、適合多種應(yīng)用場景等優(yōu)點(diǎn)。KISSY 除了完備的工具集合諸如 DOM、Event、Ajax、Anim 等,KISSY 還面向團(tuán)隊(duì)協(xié)作做了獨(dú)特設(shè)計(jì),提供了經(jīng)典的面向?qū)ο蟆?dòng)態(tài)加載、性能優(yōu)化解決方案。作為一款全終端支持的 JavaScript 框架,KISSY還 為移動(dòng)終端做了大量適配和優(yōu)化,搞移動(dòng)web開發(fā)的可以好好研究一下KISSY的運(yùn)用。
關(guān)于菜鳥手記:
菜鳥最怕就是看大神的攻略,全是術(shù)語看頭就頭大!本人作為一名對(duì)啥都感興趣的資深菜鳥,潛心研究各類技術(shù)二十余年,做網(wǎng)站、寫程序、搞美工、練書法、學(xué)畫畫、作文章、抓管理、裝逼格,屬于搞IT里面最懂美工的,搞HR里面最懂畫畫的,搞文字里面最懂程序的,最終一事無成,博而不精,徒留一堆手記。從菜鳥角度寫手記,同樣的”白”更易懂,你值得擁有!感興趣的,請(qǐng)別忘點(diǎn)右角關(guān)注菜鳥手記。
TML編輯器是一種用于創(chuàng)建、編輯和預(yù)覽HTML(超文本標(biāo)記語言)代碼的工具或應(yīng)用程序。它提供了一個(gè)直觀的界面,使用戶能夠輕松地編寫和設(shè)計(jì)網(wǎng)頁內(nèi)容。本文主要介紹HTML 常用編輯器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。
參考文檔:https://www.cjavapy.com/article/3299/
Visual Studio Code(簡稱VS Code)是一款由微軟開發(fā)的跨平臺(tái)源代碼編輯器,支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā),包括編輯HTML、CSS、JavaScript等前端技術(shù)。VS Code是一款輕量級(jí)的代碼編輯器,啟動(dòng)迅速,占用資源少。VS Code提供了豐富的擴(kuò)展和插件,可以根據(jù)需求安裝插件來增強(qiáng)編輯器功能。
1)安裝和配置
官網(wǎng)地址:Visual Studio Code - Code Editing. Redefined
根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的VS Code。打開VS Code后,可以根據(jù)自己的喜好配置編輯器設(shè)置,如主題、字體等。
2)新建HTML文件
在 VS Code 安裝完成后,選擇" 文件(F)->新建文件(N) ",在新建的文件中輸入以下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>
3)編輯HTML文件
在VS Code中,點(diǎn)擊左上角的"文件"菜單,選擇"打開文件",或者使用快捷鍵Ctrl+O(Windows)或Cmd+O(macOS)來打開HTML文件。
在編輯器中可以直接修改HTML文件的內(nèi)容。VS Code會(huì)自動(dòng)識(shí)別HTML標(biāo)記,并提供代碼高亮和智能提示功能。編輯完成后,使用快捷鍵Ctrl+S(Windows)或Cmd+S(macOS)來保存HTML文件。
4)插件推薦
HTML CSS Support:提供對(duì)HTML和CSS的支持,包括代碼片段、自動(dòng)補(bǔ)全等功能。
Live Server:啟動(dòng)一個(gè)本地開發(fā)服務(wù)器,實(shí)時(shí)預(yù)覽HTML頁面的效果。
Prettier:格式化HTML代碼,使代碼結(jié)構(gòu)更整潔。
Auto Close Tag:自動(dòng)閉合HTML標(biāo)簽,提高編碼效率。
Bracket Pair Colorizer:對(duì)成對(duì)的括號(hào)進(jìn)行著色,方便識(shí)別代碼塊。
Sublime Text是一款流行的跨平臺(tái)源代碼編輯器,支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā),包括編輯HTML、CSS、JavaScript等前端技術(shù)。
Sublime Text的界面非常簡潔,沒有多余的菜單和工具欄,更便于專注于代碼編輯。Sublime Text支持多種編程語言,包括HTML、CSS、JavaScript、Python、Java等。Sublime Text擁有強(qiáng)大的插件系統(tǒng),用戶可以根據(jù)需要安裝插件來擴(kuò)展編輯器功能。用戶可以自定義快捷鍵、主題、顏色方案等,以滿足個(gè)性化需求。Sublime Text啟動(dòng)迅速,響應(yīng)快速,適合于快速編輯代碼。
1)安裝和配置
官網(wǎng)地址:Sublime Text - Text Editing, Done Right
根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Sublime Text。打開Sublime Text后,可以根據(jù)自己的喜好進(jìn)行編輯器設(shè)置,如字體、主題等。
2)新建HTML文件
在Sublime Text 安裝完成后,選擇" File->New File ",在新建的文件中輸入以下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>
3)編輯HTML文件
在Sublime Text中,點(diǎn)擊左上角的"File"菜單,選擇"Open File",或者使用快捷鍵Ctrl+O(Windows)或Cmd+O(macOS)來打開HTML文件。在編輯器中可以直接修改HTML文件的內(nèi)容。Sublime Text會(huì)自動(dòng)識(shí)別HTML標(biāo)記,并提供代碼高亮和智能提示功能。編輯完成后,使用快捷鍵Ctrl+S(Windows)或Cmd+S(macOS)來保存HTML文件。
4)插件推薦
Emmet:提供HTML/CSS快速編寫和自動(dòng)完成功能,可以大大提高編碼效率。
Sublime Linter:對(duì)代碼進(jìn)行實(shí)時(shí)語法檢查,幫助發(fā)現(xiàn)潛在的錯(cuò)誤和警告。
Color Highlighter:對(duì)CSS中的顏色進(jìn)行高亮顯示,方便調(diào)試和修改樣式。
SideBarEnhancements:增強(qiáng)側(cè)邊欄功能,提供更多文件操作選項(xiàng)。
Dreamweaver是由Adobe公司開發(fā)的一款全球知名的網(wǎng)頁設(shè)計(jì)和開發(fā)工具。它為開發(fā)人員和設(shè)計(jì)師提供了一個(gè)可視化的界面,可以直觀地創(chuàng)建和編輯網(wǎng)頁內(nèi)容,同時(shí)也支持手動(dòng)編輯代碼。Dreamweaver提供可視化界面,可以直觀地拖拽和編輯網(wǎng)頁元素,無需手動(dòng)編寫代碼。除了可視化界面,Dreamweaver也支持手動(dòng)編輯代碼,適合于開發(fā)人員和設(shè)計(jì)師。Dreamweaver可在Windows和macOS等多個(gè)平臺(tái)上運(yùn)行。Dreamweaver集成了代碼編輯器、預(yù)覽窗口、文件管理器等功能,提供全面的開發(fā)環(huán)境。
1)安裝和配置
官網(wǎng)地址:Website design software | Adobe Dreamweaver
根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Dreamweaver。打開Dreamweaver后,,根據(jù)需要進(jìn)行編輯器設(shè)置,如界面語言、字體、代碼顏色等。
2)編輯HTML文件
在Dreamweaver中,點(diǎn)擊左上角的"File"菜單,選擇"New",然后選擇"HTML",即可新建一個(gè)空白的HTML文件。內(nèi)容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>
使用可視化界面,可以直接拖拽頁面元素、調(diào)整布局、插入圖片等。若需要手動(dòng)編輯HTML代碼,可以在下方的代碼編輯器中進(jìn)行修改。Dreamweaver會(huì)自動(dòng)提供代碼補(bǔ)全和語法高亮功能。在Dreamweaver中,可以實(shí)時(shí)預(yù)覽網(wǎng)頁效果,點(diǎn)擊右上角的"Live View"按鈕即可。
3)CSS和JavaScript支持
Dreamweaver也支持CSS和JavaScript的編輯和預(yù)覽,可以幫助創(chuàng)建更豐富的網(wǎng)頁效果。在編輯器中可以直接編輯CSS樣式和JavaScript代碼,并實(shí)時(shí)查看效果。
4)網(wǎng)頁上傳和發(fā)布
Dreamweaver集成了FTP功能,可以直接將編輯好的網(wǎng)頁上傳到服務(wù)器。點(diǎn)擊"Site"菜單,選擇"Manage Sites",配置好站點(diǎn)設(shè)置,即可進(jìn)行上傳和發(fā)布。
5)Dreamweaver模板和庫
Dreamweaver提供模板和庫功能,可以保存和復(fù)用常用的網(wǎng)頁元素和樣式,提高開發(fā)效率。
參考文檔:https://www.cjavapy.com/article/3299/
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。