免費(fèi)javascript富文本編輯器,總有一款會(huì)適合你!
什么是富文本編輯器?
概述:?
javascript Text Editor
我們平常在頁面上寫文章 或者 后臺(tái)發(fā)布文章內(nèi)容、或內(nèi)容描述等、一直都是用的是富文本編輯器,包括很多論壇發(fā)帖的文字窗口也是典型的富文本編輯器, 它跟office中的word界面非常類似!
富文本編輯器的使用是與word非常類似的,所見即所得的排版方式,操作也與word類似，點(diǎn)擊鼠標(biāo)使用相應(yīng)功能就行,對(duì)用戶而言使用上相對(duì)比較簡(jiǎn)單，也比較容易進(jìn)入狀態(tài)!
如圖
總的來說富文本編輯器就是一種基于JS并且可內(nèi)嵌于web瀏覽器中所見即所得的文本編輯器!
富文本編輯器不同于普通的文本編輯器，開發(fā)者可到網(wǎng)上下載免費(fèi)的富文本編輯器內(nèi)嵌于網(wǎng)站應(yīng)用程序里面, 那么作為一個(gè)開發(fā)者，熟悉幾款富文本編輯器是很有必要的，說不一定某個(gè)項(xiàng)目就要集成進(jìn)去,到時(shí)候現(xiàn)就不會(huì)去花太多時(shí)間研究它!
介紹幾款主流常用的JS富文本編輯器
下面列舉幾款常用的富文本編輯器,供大家參考!
1.TinyMCE
概述
TinyMCE是一款易用、且功能強(qiáng)大的所見即所得的富文本編輯器。同類程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等, 并且界面相當(dāng)清新，界面模擬本地軟件的風(fēng)格，頂部有菜單欄。支持圖片在線處理，插件多，功能非常強(qiáng)大，易于集成，并且擁有可定制的主題。
支持目前流行的各種瀏覽器，它可以達(dá)到微軟Word類似的編輯體驗(yàn)。
而且這么好的東西還是開源免費(fèi)的，而且一直有人維護(hù)，這款編輯器使用的人非常多 ,?TinyMCE自帶的大部分插件均提供社區(qū)開源版，可免費(fèi)使用且可商用!
下載地址:?https://www.tiny.cloud/
使用參考:?http://tinymce.ax-z.cn/
根據(jù)需要下載社區(qū)版或者開發(fā)版
小提示
開發(fā)版包含未被壓縮過的源碼，方便開發(fā)者學(xué)習(xí)分析, ?也就是說開發(fā)版包含TinyMCE社區(qū)版，開發(fā)工具和完整的源代碼!
步驟1：引入TinyMCEJS腳本
在<head>中插入如下代碼，注意自己的項(xiàng)目路徑, 將tinymce.min.js源文件引入至項(xiàng)目中
?<script src="TinyMCE/js/tinymce/tinymce.min.js"></script>
步驟2:?初始化TinyMCE, ?將TinyMCE初始化為頁面的一部分
當(dāng)引用了TinyMCE.js后就可以使用tinymce.init()方法來進(jìn)行初始化了，并且tinymce.init()方法內(nèi)部接收一個(gè)初始化對(duì)象, 內(nèi)部包含各種參數(shù)，必須的參數(shù)就是selector意思是允許通過css選擇器指定TinyMCE要綁定的html內(nèi)容容器，傳統(tǒng)模式需指定textarea，內(nèi)聯(lián)模式可指定div或其它html塊元素
舉個(gè)栗子
?//js
?<script>
? ? ?tinymce.init({
? ? ? ? ?selector: '#test',
? ? ? ? ?skin: 'oxide-dark'
? ? ?});
?</script>
?//html
?<h1>Dome1</h1>
?<div id="test">測(cè)試數(shù)據(jù)!</div>
效果如下
當(dāng)然這里建議新手還是使用textarea元素,?TinyMCE會(huì)將內(nèi)容塞進(jìn)textarea元素，可以通過正常的post方法獲取到編輯器中的內(nèi)容, 如果你使用第三方框架或采用其他元素配合ajax提交則可能不會(huì)主動(dòng)觸發(fā)內(nèi)容同步，需要自己執(zhí)行同步 或者 自己執(zhí)行dom操作來獲取內(nèi)容!
2.CKEditor
概述
Ckeditor也是一款非常經(jīng)典的富文本編輯器，官方下載量過千萬，它是在非常著名的FCkEditor基礎(chǔ)上開發(fā)的新版本。Ckeditor有高性能的實(shí)時(shí)預(yù)覽，它特有行內(nèi)編輯功能，使得編輯內(nèi)容更加直觀，仿佛是在編輯網(wǎng)頁一樣，有很強(qiáng)的可擴(kuò)展性，被各大網(wǎng)站廣泛運(yùn)用。
官方地址:?https://ckeditor.com/
使用參考:?https://ckeditor.com/docs/index.html
點(diǎn)擊下載按鈕
根據(jù)需要下載
步驟1：引入CkeditorJS腳本
在<head>中插入如下代碼，注意自己的項(xiàng)目路徑, 將ckeditor.js源文件引入至項(xiàng)目中
?<script src="ckeditor/ckeditor.js"></script>
步驟2:?初始化Ckeditor
CKEditor就像一個(gè)在你網(wǎng)頁中的文本區(qū)域一樣工作，它提供了一個(gè)簡(jiǎn)單易寫的用戶界面、版式和豐富的文字輸入?yún)^(qū)域。但用文本區(qū)域要實(shí)現(xiàn)同樣的效果，并不容易。實(shí)際上CKEditor就是使用一個(gè)文本區(qū)域來傳遞它的數(shù)據(jù)到服務(wù)器上，所以，你必需在頁面上創(chuàng)建一個(gè)文本容器，這里建議使用<textarea></textarea>。
引用ckeditor.js后就可以使用ClassicEditor.create()來進(jìn)行創(chuàng)建編輯器，ClassicEditor.create()內(nèi)部參數(shù)為指定的Ckeditor要綁定的文本容器。
舉個(gè)栗子
?//js
?<script>
? ? ?window.onload = function(){
? ? ? ? ?ClassicEditor.create(document.querySelector("#editor"))
? ? ?}
?</script>
?//html
?<h1>demo2</h1>
?<textarea ?id="editor"></textarea>
效果如下
更多使用參考相關(guān)使用文檔
3.wangEditor
概述
wangEditor?是一款使用 Typescript 開發(fā)的無框架依賴Web 富文本編輯器， 輕量、簡(jiǎn)潔、易用、開源免費(fèi)。
它兼容常見的 PC 瀏覽器：Chrome，F(xiàn)irefox，Safar，Edge，QQ 瀏覽器，IE11。但是不支持移動(dòng)端。
下載地址：https://www.wangeditor.com/
使用地址：https://www.wangeditor.com/doc/
進(jìn)入到以下頁面
我們只需要將wangEditor.js或者wangEditor.min.js這兩個(gè)文件拿出來就行了。
步驟1：引入wangEditorJS腳本
在<head>中插入如下代碼，注意自己的項(xiàng)目路徑, 將wangEditor.js或者wangEditor.min.js源文件引入至項(xiàng)目中
?<script src="ckeditor/wangEditor.min.js"></script>
步驟2:?初始化wangEditor
你需要在頁面上創(chuàng)建一個(gè)文本容器，然后利用以下代碼就可以實(shí)現(xiàn)這個(gè)編輯器了。
舉個(gè)栗子
?//js
?<script>
? ? ?window.onload=function(){
? ? ? ? ?let E = window.wangEditor;
? ? ? ? ?let editor = new E("#editorBox");
? ? ? ? ?editor.create();
? ? ?}
?</script>
?//html
?<h1>demo3</h1>
?<div id="editorBox"></div>
效果如下
4.Kindeditor
概述
KindEditor是一套使用JavaScript編寫的開源的HTML，讓用戶在網(wǎng)站上獲得所見即所得編輯效果，兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。KindEditor非常適合在CMS、商城、論壇、博客、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用。
下載地址：http://kindeditor.net/down.php
使用地址：http://kindeditor.net/docs/index.html
步驟1：引入KindEditorJS腳本
在<head>中插入如下代碼，注意自己的項(xiàng)目路徑, 將kindeditor-all-min.js或者kindeditor-all.js源文件引入至項(xiàng)目中,并且還要將文件夾lang的zh-CN.js引入到項(xiàng)目中，如下：
?<script ?src="kindEditor/kindeditor-all-min.js"></script>
?<script ?src="kindEditor/lang/zh-CN.js"></script>
步驟2:?初始化KindEditor
在需要顯示編輯器的位置添加textarea輸入框。注意必須給textarea設(shè)置一個(gè)id或者類class選擇器，建議使用id選擇器，因?yàn)閕d選擇器是頁面獨(dú)一無二的，而類class選擇器可以存在多個(gè)，容易產(chǎn)生混亂。
舉個(gè)栗子
?//js
?<script>
? ? ?KindEditor.ready(function(K) {
? ? ? ? ?window.editor = K.create('#editorBox');
? ? ?});
?</script>
?//html
?<h1>demo4</h1>
?<textarea ?id="editorBox" name="content">測(cè)試內(nèi)容</textarea>
效果如下
5.Simditor
概述
Simditor是Tower平臺(tái)使用的富文本編輯器，是一款基于jQuery和module.js，輕量化開源的編輯器，界面簡(jiǎn)約，功能實(shí)用，插件不是很多，功能要求不高的可以使用。支持的瀏覽器：IE10+、Chrome、Firefox、Safari。
下載地址：https://github.com/mycolorway/simditor/releases
使用地址：https://simditor.tower.im/docs/doc-usage.html
步驟1：引入Simditor相關(guān)的JS與CSS文件
在<head>中插入如下代碼，注意自己的項(xiàng)目路徑, 將以下文件引入到項(xiàng)目中，如下：
?<link rel="stylesheet" href="simditor/site/assets/styles/simditor.css"/>
?<script ?src="simditor/jQuery.min.js"></script>
?<script ?src="simditor/site/assets/scripts/module.js"></script>
?<script ?src="simditor/site/assets/scripts/hotkeys.js"></script>
?<script ?src="simditor/site/assets/scripts/simditor.js"></script>
以上文件除了jQuery.min.js需要單獨(dú)下載外，simditor.css、module.js、hotkeys.js、simditor.js?到你下載的Simditor中的site/assets文件夾中去找。還要注意js文件的引入順序，Simditor是基于jQuery和module.js，所以要引入到simditor.js之前。
步驟2:?初始化Simditor
要使用 Simditor，首先你需要一個(gè)textarea這樣的元素，并且給textarea設(shè)置一個(gè)id選擇器。
舉個(gè)栗子
?//js
?<script>
? ? ?$(function(){
? ? ? ? ?Simditor.locale = 'zh-CN';//設(shè)置中文
? ? ? ? ?var editor = new Simditor({
? ? ? ? ? ? ?textarea: $('#editorBox'), ?//textarea的id
? ? ? ? ?})
?
? ? ? ? ?})
?</script>
?//html
?<h1>demo5</h1>
?<textarea ?id="editorBox" name="content">測(cè)試內(nèi)容</textarea>
效果如下
6.Summernote
概述
Summernote是一款輕量級(jí)的富文本編輯器，比較容易上手，使用體驗(yàn)流暢，支持各種主流瀏覽器。它是基于jquery和bootstrap，使用前先引入這兩項(xiàng)。
下載地址：https://summernote.org/
使用地址：https://summernote.org/getting-started/#get-summernote
步驟1：引入Summernote相關(guān)的JS與CSS文件
在<head>中插入如下代碼，注意自己的項(xiàng)目路徑, 將以下文件引入到項(xiàng)目中，如下：
?<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
?<script ?src="js/jQuery.min.js"></script>
?<script ?src="bootstrap/js/bootstrap.min.js"></script>
?<link rel="stylesheet" href="summernote/summernote.min.css"/>
?<script src="summernote/summernote.min.js"></script>
步驟2:?初始化Summernote
在你希望頁面中呈現(xiàn) Summernote 編輯器的位置設(shè)置一個(gè)文本容器，并且給文本元素設(shè)置一個(gè)id選擇器。
舉個(gè)栗子
?//js
?<script>
? ? ?$(document).ready(function() {
? ? ? ? ?$('#summernote').summernote();
? ? ?});
?</script>
?//html
?<h1>demo6</h1>
?<div id="summernote"><p>Hello Summernote</p></div>
效果如下
7.Quill
概述
Quill是輕型的編輯器，樣式一般（黑白風(fēng)），功能中等，它的代碼高亮功能比較強(qiáng)，同樣支持行內(nèi)編輯模式，工具條可自定義。
下載地址：https://quilljs.com/docs/download/
使用地址：https://quilljs.com/docs/quickstart/
注意：Quill的使用文檔是英文的，英語不好的可以借助翻譯軟件?。。?！
進(jìn)入一下頁面
步驟1：引入Quill相關(guān)的JS與CSS文件
在<head>中插入如下代碼，注意自己的項(xiàng)目路徑, 將以下文件引入到項(xiàng)目中，如下：
?<link rel="stylesheet" href="quill/quill.bubble.css"/>
?<link rel="stylesheet" href="quill/quill.snow.css"/>
?<link rel="stylesheet" href="quill/quill.core.css"/>
?<script src="quill/quill.core.js"></script>
?<script src="quill/quill.min.js"></script>
步驟2:?初始化Quill
在你希望頁面中呈現(xiàn)?Quill?編輯器的位置設(shè)置一個(gè)文本容器，并且給文本元素設(shè)置一個(gè)id選擇器。
舉個(gè)栗子
?//js
?<script>
? ? ?var quill = new Quill('#quill', {
? ? ? ? ?theme: 'snow',
? ? ? ? ?modules: {
? ? ? ? ? ? ?toolbar: [
? ? ? ? ? ? ? ? ?[{header: [1, 2, 3, false]}],
? ? ? ? ? ? ? ? ?['bold', 'italic', 'underline'],
? ? ? ? ? ? ? ? ?[{'list': 'ordered'}, {'list': 'bullet'}],
? ? ? ? ? ? ? ? ?[{'align': []}],
? ? ? ? ? ? ? ? ?[{'font': []}],
? ? ? ? ? ? ? ? ?[{'color': []}, {'background': []}],
? ? ? ? ? ? ? ? ?['image', 'video']
? ? ? ? ? ? ?]
? ? ? ? ?}
? ? ?});
?</script>
?//html
?<h1>demo7</h1>
?<div id="quill"><p>Hello Quill</p></div>
效果如下
end
以上的JS編輯器的詳細(xì)使用請(qǐng)參照官方以及相關(guān)文檔，根據(jù)你的項(xiàng)目需求，挑選出適合的富文本編輯器，希望對(duì)你有所幫助！！
謝謝您的閱讀！! ?!
