不得不佩服，美觀小巧的網頁內容編輯器——ContentTools

  • 2020 年 2 月 14 日
  • 筆記

介紹

ContentTools是一個美觀小巧的網頁內容工具（一個JS庫），具備所見即所得（WYSIWYG）的編輯器功能，只需幾個簡單的步驟，即可將ContentTools添加到任何HTML頁面。如下圖所示頁面通過實時ContentTool的彈出層實現實時編輯功能。用小而美來形容它最好不過了！

Github地址

https://github.com/GetmeUK

特性

ContentTools是用於HTML頁面的美觀小巧的內容編輯器。它被設計為：

  • 與框架無關的庫不使用任何JavaScript框架（沒有JQuery），但可以很好地使用它們。
  • 靈活的ContentTools軟件包由5個庫組成，每個庫或可以獨立使用。
  • 可擴展的軟件包旨在易於擴展。
  • 小巧完整的編輯器（JS，CSS，圖像和圖標字體）為241kb（壓縮後為49kb）。

功能簡介

ContentTools具有字體加粗、斜體、超鏈接、對齊、列表、表格、圖片、視頻、代碼、撤銷、重做、刪除等功能

1、加粗顯示

2、斜體顯示

3、超鏈接

4、H標題

5、正文

6、有序和無序列表

7、插入表格

8、插入圖片

9、視頻

以上截圖中的功能還不完整，如果想體驗以下完整的功能可以直接去DEMO頁面體驗，如果需要在HTML級別上更改元素的內容，那也是可以的。通過屬性對話框中的最後一個選項卡，可以查看所選元素的內部HTML代碼並直接對其進行更新。

使用

  • 第一步是下載JS，CSS和其他關聯的項目文件：

下載倉庫並打開/ build文件夾，包括預構建的源文件。將文件夾的內容複製到項目的適當位置（例如，content-tools.min.js> /www/scripts/content-tools.min.js）。但是，/ images文件夾和icons.woff字體需要複製到與content-tools.min.css相同的文件夾中，文件結構應類似於：

  • HTML
<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>
  • 準備CSS

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提供了一個編輯器，但是在初始化它之前，我們需要配置一些東西，即：

  1. 我們希望用戶能夠將CSS樣式應用於元素。
  2. 我們希望頁面的區域是可編輯的。
  3. 一種保存我們的內容的機制。
  4. 我們可能還會配置圖像處理程序等等

將以下代碼添加到我們之前創建的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！

來都來了，走啥走，留個言唄~

IT大咖說 | 關於版權

由「IT大咖說（ID：itdakashuo）」原創的文章，轉載時請註明作者、出處及微信公眾號。投稿、約稿、轉載請加微信：ITDKS10（備註：投稿），茉莉小姐姐會及時與您聯繫！

感謝您對IT大咖說的熱心支持！

VirMach 便宜 VPS

QNews

QNews