整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文本編輯器是一種可內嵌于瀏覽器，所見即所得的文本編輯器。它提供類似于Office Word 的編輯功能，方便那些不太懂html用戶使用，富文本編輯器的應用非常廣泛，它的歷史與圖文網頁誕生的歷史幾乎一樣長。
作為一個技術人員，手上備上兩款富文本編輯器還是很有用的，指不定那個項目就要集成一個進去。
到時候現找現用那可就費功夫了，畢竟從開發上講，每個富文本編輯器的用法都是有區別的。
下面是我收集的一些業界比較受歡迎的富文本編輯器，喜歡的朋友、用過的朋友可以一起看看，一起探討。
1、wangEditor
網址：http://www.wangeditor.com/
基于JavaScript和css開發的 Web富文本編輯器， 輕量、簡潔、界面美觀、易用、開源免費。
2、TinyMCE
網址：https://www.tiny.cloud/docs/demo/full-featured/
TinyMCE是一個輕量級的基于瀏覽器的所見即所得編輯器，由JavaScript寫成。它對IE6+和Firefox1.5+都有著非常良好的支持。
功能齊全，界面美觀，就是文檔是英文的，對開發人員英文水平有一定要求。
3、百度ueditor
網址：https://github.com/fex-team/ueditor
UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具有輕量，功能齊全，可定制，注重用戶體驗等特點，開源基于MIT協議，允許自由使用和修改代碼，缺點是已經沒有更新了。
4、kindeditor
網址：http://kindeditor.net/demo.php
KindEditor 是一套開源的在線html編輯器，主要用于讓用戶在網站上獲得所見即所得編輯效果，開發人員可以用 KindEditor 把傳統的多行文本輸入框(textarea)替換為可視化的富文本輸入框。
KindEditor 使用 JavaScript 編寫，可以無縫地與 Java、.NET、php、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。
主要特點
快速：體積小，加載速度快
開源：開放源代碼，高水平，高品質
底層：內置自定義 DOM 類庫，精確操作 DOM
擴展：基于插件的設計，所有功能都是插件，可根據需求增減功能
風格：修改編輯器風格非常容易，只需修改一個 CSS 文件
兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera
5、Textbox
網址：https://www.textbox.io/
Textbox是一款極簡但功能強大的在線文本編輯器，支持桌面設備和移動設備。主要功能包含內置的圖像處理和存儲、文件拖放、拼寫檢查和自動更正。
此外，該工具還實現了屏幕閱讀器等輔助技術，并符合WAI-ARIA可訪問性標準。
6、CKEditor
網址：https://ckeditor.com/ckeditor-5/demo/
CKEditor官方版是一款專業專業的在線文字編輯器，軟件支持各種不同的瀏覽器，可以讓用戶們輕松在線編輯，CKEditor5官方版軟件體積非常小巧，使用起來也十分方便快捷，還能與不同的編程語言相結合，是大家編輯網頁代碼的必備工具。
7、quill
網址：https://quilljs.com/
Quill是輕型的編輯器，樣式一般（黑白風），功能中等，它的代碼高亮功能比較強，同樣支持行內編輯模式，工具條可自定義。
開源免費，項目活躍，一直有人維護。
8、simditor
網址：https://simditor.tower.im/
simditor是Tower平臺使用的富文本編輯器，是一款輕量化的編輯器，界面簡約，功能實用，插件不是很多，功能要求不高的可以使用。
雖然是國內出品，但文檔是英文的。開源免費。
9、summernote
網址：https://summernote.org/
summernote是一款輕量級的富文本編輯器，比較容易上手，使用體驗流暢，支持各種主流瀏覽器。
summernote開源免費，該項目一直比較活躍，一直都有人在維護。summernote同樣依賴于jquery和bootstrap，使用前先引入這兩項。
10、jodit
網址：https://xdsoft.net/jodit/
Jodit是一款使用純TypeScript編寫的（無需使用其他庫），美觀實用的所見即所得（WYSIWYG）開源富文本編輯器，支持中文，超強自定義。
11、Editor.md
網址：https://pandao.github.io/editor.md/
功能非常豐富的編輯器，左端編輯，右端預覽，非常方便，完全免費。
12、froala Editor
網址：https://www.froala.com/wysiwyg-editor
界面非常好看，功能非常強大，非常好用（非免費，可破解）
13、eWebEditor
網址：http://www.ewebeditor.net/
eWebEditor外觀和使用風格都和微軟 Word很類似，功能很多。工具條可以定制，運行速度很快。
導入文件接口很多，支持word、excel、pdf、ppt直接導入，目前版本不支持代碼高亮，不適合純技術平臺使用，適合內容編輯人員使用。
eWebEditor有很長的歷史了，是典型的傳統富文本編輯器，不論是界面，還是功能都比較傳統。eWebEditor是收費的，但也有免費的精簡版，精簡版沒有后臺功能。
14、dhtmlxEditor
網址：https://dhtmlx.com/docs/products/dhtmlxRichText/
DHTMLX組件是一整套基于js的UI庫，功能強大，其中包含編輯器dhtmlxEditor。
該編輯器可以直接集成到Angular，react和vue.js框架中，該編輯器還同時支持Markdown和富文本。
支持普通視圖和類似word一樣的頁面視圖，支持全屏幕，工具支持自定義，包括工具條顏色和樣式等。
dhtmlxEditor分為免費版和收費版，免費版具有絕大多數功能，而且免費版是開源的你可以在代碼級別隨便擴充。
最后
富文本編輯器產品真的非常多，以上只是本人接觸過的一些，相信還有很多很好的富文本存在，其實也沒必要全都試一遍，只有最適合自己的，才是最好的。
使用WordPress制作網站的時候，
經常會需要在網站頁面的某些部分添加表格形式的內容。
因為table表格形式的內容能夠清晰明了地向網站訪客呈現產品或者服務的一些相關參數信息，
所以越來越多電商網站都喜歡在woocommerce產品詳情頁中添加表格內容。
WordPress有一款強大且免費的表格插件叫做tablepress，
這款WordPress插件能夠讓你快速建立或者導入現成的表格到網站中，
并且支持你進行自定義設計表格樣式。
在這篇文章中，
WP花園將會教你如何在WordPress中添加表格形式的內容，
讓你的網站有更多豐富的內容參數展現形式，
吸引更多客戶下單或者詢盤！
Tablepress插件是WordPress網站中運用最多、功能最強大的一款免費的表格生成和制作插件。
通過使用tablepress，
你能夠非常輕松地在WordPress網站上創建和管理精美的表格，
你可以將表格們嵌入到WordPress的頁面page、文章post或者產品products的頁面中。
不僅如此，
你甚至可以將tablepress生成的表格放入到WordPress的小工具widget中，
在側邊欄或者網頁底部展示表格。
對于WordPress建站的新手來說，
你不需要懂得任何HTML或者CSS代碼，
可以按照excel的方式輕松地在網站上創建表格。
簡單說，tablepress有以下特色：
在WordPress的后臺中，找到plugin插件版塊，搜索和安裝tablepress插件，激活就能使用了！
官方文檔：
https://tablepress.org/documentation/
下載地址：
https://wordpress.org/plugins/tablepress/
安裝完表格之后，
你會在WordPress后臺的側邊欄中多出了一個tablepress的欄目，
這里可以看到您網站中創建過的所有表格：
如果你的表格內容不是很多，
可以直接在WordPress后臺使用tablepress直接創建一個新的表格：
點擊【新建表格】之后，你會看到這個頁面，
填寫一些表格基本信息：
點擊創建表格之后，你會看到這個頁面：
表格ID為44，這個建議不要修改。
然后你會看到簡碼為【table id=44 /】（記得把【】換成[ ]），
通過復制這個簡碼，
然后粘貼到網頁中你想呈現表格的位置，
就能在WordPress網頁前臺展示這個表格了！
我們簡單填充一些內容到表格中，
點擊保存：
通過復制表格的簡碼到任何一篇文章中，
保存文章：
就能在WordPress的網頁前臺看到表格的樣式了：
可以看到這個表格就非常清晰地展現在網站訪客的面前！
簡單好用，
有沒有？
WordPress就是那么強大！
在很多真實的建站項目中，
往往客戶已經準備好了某些產品資料的表格內容。
而且這些表格往往內容比較多，
不可能在WordPress的后臺一個一個地輸入這些數據，因為實在太繁瑣啦！
Tablepress也很貼心地添加了表格導入功能！
在WordPress后臺中，
選擇【導入表格】
這時候，
你會看到系統提示你導入CSV格式的表格。
我們打開WPS或者excel，
將一個表格另存為CSV格式，
然后導入到WordPress中：
有些情況下，
你會發現導入的表格里中文內容為亂碼：
這時候，
你要使用windows電腦自帶的【記事本】來打開你導出的CSV文件：
然后在左上角的菜單欄，選擇另存為：
格式選擇UTF-8，
并且改一個名字，
以免你記錯。
再用相同的方式導入到WordPress后臺。
即便是txt格式的文件，
也能選擇CSV格式，
然后點擊導入。
這時候就解決了亂碼問題了：
也是非常簡單，有沒有？
省下了你大量的時間來一個一個輸入數據了！
真開心~
我們看一下剛才導入的表格，
這個表格數據非常多，
一共有138行的數據：
那么在前臺是如何展示的呢？
我們驚奇地發現，
表格居然自動分頁了！
什么鬼，
我希望網站上全部展示表格所有數據，
怎么辦？
我們回到表格的編輯頁面，
在datatables javascript庫特性中，
取消勾選分頁功能：
再看一眼網站前臺，
就發現所有表格內容都呈現出來了：
我們再看看tablepress中，
還有哪些可以讓網頁設計師修改和測試的屬性吧。
在這個版塊中，
網頁設計師可以選擇對表格的單元格進行增加或者刪除的操作，
也可以在某些單元格內加入圖片或者鏈接等等操作：
大家可以自己做一下測試，看看能怎么編輯和改動。
在這個欄目中，
可以對表格進行一些全局的樣式設計，
特別是背景顏色的交替顯示以及表格名稱的展示方式等等：
如果有特殊樣式需求，可以在這里改動一下看看效果。
這里的內容就比較復雜了，涉及到很多網站訪客在使用表格的時候一些互動操作：
通過設置這個版塊的內容，可以增加表格的交互效果！
表格數據越來越受到電商朋友的歡迎，
所以我們要認真學習如何添加表格到WordPress網站中，
增加網站的數據豐富程度。
WP花園在為客戶使用WordPress開發B2C獨立商城的時候，
經常會需要將表格添加到商品的詳情頁中，
所以非常熟悉tablepress這個插件。
好的表格數據有利于幫助WordPress網站提升SEO排名和用戶體驗感！
如果你在使用tablepress插件中遇到問題，
歡迎給我們留言！
格元素詳解與練習
提到表格，大家最先想到的就是EXCEL這款軟件，實際上在對表格的操作上，HTML與EXCEL非常相似。
在展示數據，統計數據方面，表格比文字描述更具表達優勢，在網頁中，表格也經常被用來展示數據、計劃日常安排等內容。如圖所示：
今天我們就來學習一下如何向頁面中添加表格元素。
首先來介紹一下表格元素中的基本標簽。
NO.1：<table></table>
這個標簽是書寫表格的第一個標簽，它本身在頁面上看不出什么內容，但是它的屬性可以控制表格顯示的全局樣式。這個標簽的開始標簽寫在表格元素的開頭，結尾標簽寫在表格元素的結尾。
NO.2：<caption></caption>
這個標簽是表格的標題標簽。
NO.3：<tr></tr>
這個標簽定義表格的列標簽。
NO.4：<th></th>
這個標簽是列表標題標簽，例如，男生、女士、姓名等。
NO.5：<td></td>
這個標簽定義表格的行標簽。
OK，這些基本標簽就可以構建一個基礎的表格元素。示例代碼如下：
<table><!-- 寫在表格元素的開頭 --><caption>表格標題</caption><!-- 表格標題 --><tr>標題標簽<th>姓名</th><!-- 標題標簽 --><th>年齡</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr><td>二列一行</td><td>二列二行</td></tr></table><!-- 寫在表格元素的結尾 -->
頁面效果如圖所示：沒有表格的外邊框。
如何添加外邊框呢？在<table>標簽中修改border屬性即可，示例代碼如下：border="1"是給表格添加寬為1的邊界線。
<table border = "1"><!-- border="1"是給表格添加寬為1的邊界線 -->效果如圖所示：
這時，您會發現表格在頁面上的尺寸非常小，可不可以按照頁面尺寸來顯示表格嗎？當然可以，這就需要為<table>標簽修改第二個屬性width，示例代碼如圖所示：width = "100%"指的是表格寬度與平面寬度一致。
<table border = "1" width = "100%"><!-- width = "100%"指的是表格寬度與平面寬度一致 -->效果如圖所示：
ok！今天的講解先到這里，明天我會繼續為大家講解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三個標簽，以及合并單元格操作。
今天的完整代碼示例如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body><h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
<caption>表格標題</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body>
</html>正所謂萬丈高樓平地起，html技術雖然簡單，但是內容相對繁瑣，也是以后進一步學習網頁制作的基礎，希望大家動手寫每一段代碼，把每一步踩堅實。
喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
