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