整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
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)系。
