KindEditor是一款開源、跨平臺(tái)的所見即所得在線富文本編輯器，它可以幫助開發(fā)者輕松創(chuàng)建和編輯具有復(fù)雜格式的文本內(nèi)容。KindEditor具有以下特點(diǎn)：

• 所見即所得的編輯體驗(yàn)，讓用戶可以直觀地看到編輯結(jié)果。
• 支持豐富的文本格式，包括字體、顏色、段落、列表、鏈接等。
• 提供強(qiáng)大的圖片、視頻、附件上傳功能，支持本地上傳、網(wǎng)絡(luò)圖片粘貼等。
• 具有強(qiáng)大的代碼編輯功能，支持語(yǔ)法高亮、自動(dòng)補(bǔ)全等。
• 支持多種語(yǔ)言，包括中文、英文、法文等。

示例代碼

以下是一個(gè)使用KindEditor編輯器的示例代碼：

直接粘貼圖片并保存到本地

KindEditor支持直接粘貼圖片并保存到本地。當(dāng)用戶從外部粘貼一張圖片時(shí)，KindEditor會(huì)自動(dòng)將其上傳到指定目錄，并返回圖片的本地路徑。該功能需要服務(wù)器支持，具體實(shí)現(xiàn)方式如下：

在服務(wù)器端創(chuàng)建一個(gè)PHP腳本，用于處理圖片上傳請(qǐng)求。該腳本需要包含以下代碼：

在KindEditor編輯器中添加以下代碼：

  KindEditor.ready(function(K) {var editor = K.create('editor', {uploadJson: 'upload_image.php',afterUpload: function(url, data) {// 將圖片插入到編輯器中editor.insertHtml('');}});});

結(jié)語(yǔ)

KindEditor是一款功能強(qiáng)大、易于使用的在線富文本編輯器。它可以幫助開發(fā)者快速創(chuàng)建和編輯各種格式的文本內(nèi)容。本文介紹了KindEditor的基本使用和直接粘貼圖片并保存到本地的功能。希望文章能夠幫助您快速上手KindEditor。

---

django富文本編輯器哪個(gè)比較好（django 富文本）

本文目錄一覽：

1、python用什么編輯器比較好？？？2、django中集成富文本編輯器3、富文本編輯器-1-選型4、幾種富文本編輯器Editor比較5、Django 開發(fā)問題，有用過網(wǎng)絡(luò)的富文本 UEditor 的么python用什么編輯器比較好？？？

第一：Sublime TextSublime

Text輕量級(jí)的代碼編輯器，跨平臺(tái)，支持幾十種編程語(yǔ)言，包括Python、Java、C、C++等，小巧靈活、運(yùn)行輕快，支持代碼高亮、自動(dòng)補(bǔ)全、語(yǔ)法提示，插件擴(kuò)展豐富，是一個(gè)非常不錯(cuò)的代碼編輯器，配置相關(guān)文件后，可直接運(yùn)行Python程序。Sublime

Text是開發(fā)者中最流行的編輯器之一，多功能、支持多種語(yǔ)言，深受開發(fā)者的喜歡。

第二、VS Code

VS Code是微軟開發(fā)的一個(gè)跨平臺(tái)的代碼編輯器，支持常見的編程語(yǔ)言開發(fā)，插件拓展豐富，不僅智能補(bǔ)全、語(yǔ)法檢查、代碼高亮，還支持git功能，運(yùn)行流暢，是一款非常受歡迎的代碼編輯器，安裝相關(guān)插件之后，也可以直接運(yùn)行Python程序。

第三、Atom

Atom是github專門為程序員開發(fā)的一個(gè)代碼編輯器，也是跨平臺(tái)的，界面簡(jiǎn)潔直觀，使用起來(lái)非常方便，自動(dòng)補(bǔ)全、代碼高亮、語(yǔ)法提示、啟動(dòng)運(yùn)行速度較快，對(duì)于初學(xué)者來(lái)說(shuō)，使用起來(lái)非常簡(jiǎn)單。

第四、PyCharm

PyCharm是一個(gè)專門用于Python開發(fā)的IDE，常見的功能有：代碼補(bǔ)全、智能提示、語(yǔ)法檢查，這個(gè)軟件都支持。 除此之外，還集成了版本控制、單元測(cè)試、git功能，可以快速創(chuàng)建Django、Flask等Python Web框架，使用起來(lái)非常不錯(cuò)，在開發(fā)大型項(xiàng)目中經(jīng)常會(huì)用到，唯一的缺點(diǎn)是，啟動(dòng)起來(lái)比較卡，還不是免費(fèi)的，不過可以下載社區(qū)免費(fèi)版的。

第五：Vim

Vim可以說(shuō)是Python最好的IDE。 Vim是高級(jí)文本編輯器，旨在提供實(shí)際的Unix編輯器，Vi功能，支持更多更完善的特性集。 Vim不需要花費(fèi)太多的學(xué)習(xí)時(shí)間，一旦你需要一個(gè)無(wú)縫的編輯體驗(yàn)，那么就會(huì)把Vim集成到你的工作流中。

第六：eclipse with PyDev

Eclipse with PyDev是非常流行的IDE，而且已經(jīng)有很久的歷史了。 Eclipse with PyDev允許開發(fā)者創(chuàng)建有用和交互式的Web應(yīng)用。 PyDev是Eclipse開發(fā)Python的IDE，支持Python、Jython和lronPython的開發(fā)。

第七：Emacs

GNU Emacs是可擴(kuò)展，自動(dòng)以的文本編輯器，甚至有更多的功能。 Emacs的核心是Emacs Lisp解析器，但是支持文本編輯。 如果你已經(jīng)使用過Vim，可以嘗試一下Emacs。

第八：Komodo Edit

Komodo Edit是一款非常干凈而且專業(yè)的Python IDE。

第九：Wing

Wing的PythonIDE兼容Python2.x和3.x，可以結(jié)合Django、matplotlib、Zope、Plone、APP Engine、PyQt和其他Python框架使用。 Wing支持測(cè)試驅(qū)動(dòng)開發(fā)，集成了單元測(cè)試，nose和Django框架的執(zhí)行和調(diào)試功能。 Wing IDE啟動(dòng)和運(yùn)行的速度都非常快，支持Windows、Linux、OS X和Python versi。

第十：PyScripter

PyScripter是一款免費(fèi)、開源的Python集成開發(fā)環(huán)境。

第十一：The Eric Python IDE

Eric是全功能的Python和Ruby編輯器和IDE，是使用Python編寫的。 Eric基于跨平臺(tái)的GUI工具包QT，集成了高度靈活的Scintilla編輯器控件，Eric包括一個(gè)插件系統(tǒng)，允許簡(jiǎn)單的對(duì)IDE進(jìn)行功能性擴(kuò)展。

第十二：IEP

IEP是跨平臺(tái)的Python IDE，旨在提供簡(jiǎn)單高效的Python開發(fā)環(huán)境，包括兩個(gè)重要的組件：編輯器和shell，并且提供插件工具集從各個(gè)方面來(lái)提高開發(fā)人員的效率。

django中集成富文本編輯器

富文本即具備豐富樣式格式的文本。 可以是包含了HTML語(yǔ)法格式的字符串。 為了快速簡(jiǎn)單的讓用戶能夠在頁(yè)面中編輯帶html格式的文本，引入富文本編輯器。

富文本編輯器：ueditor、ckeditor、kindeditor

在INSTALLED_APPS中添加

在settings/中添加

在總路由中添加

ckeditor提供了兩種類型的Django模型類字段

修改應(yīng)用/里面的字段信息,記得要重新數(shù)據(jù)遷移

效果圖

富文本編輯器-1-選型

團(tuán)隊(duì)的業(yè)務(wù)多為后臺(tái)管理系統(tǒng)，部分業(yè)務(wù)需要使用富文本編輯器。 早期團(tuán)隊(duì)選用了網(wǎng)絡(luò)編輯器，但存在bug多、無(wú)人維護(hù)、擴(kuò)展性差等問題，且后續(xù)業(yè)需要更靈活的編輯器。 為了解決這些問題，決定重選編輯器。

基于以下原因，筆者決定使用Quill來(lái)開發(fā)團(tuán)隊(duì)的編輯器組件：

1. Delta和API

Quill返回json結(jié)構(gòu)的數(shù)據(jù)，有API操作編輯器內(nèi)部元素。 也可以通過innerHtml獲取dom。

2. 可定制

Quill可以修改、擴(kuò)展現(xiàn)有的模塊，也可以添加新的模塊，甚至可以在parchment的基礎(chǔ)上全部重寫。 有較強(qiáng)的靈活性。

3. 兼容性

當(dāng)前版本兼容Chrome、IE11、Edge，已滿足業(yè)務(wù)需求。

4. 與其他編輯器比較

相比CKEditor、TinyMCE等傳統(tǒng)編輯器，有更好的API和定制功能。 而Draft是基于React的編輯器，需要自己實(shí)現(xiàn)數(shù)據(jù)層的內(nèi)容，使用成本更高。 國(guó)內(nèi)的wangEditor功能比較全面，但不具備擴(kuò)展性。

1. 基礎(chǔ)文本模塊

分割線、格式刷、段落、撤回和重做

2. 多媒體模塊

圖片上傳模塊

3. 其他模塊

工具欄的Tooltip模塊

4. 預(yù)覽功能

圖片上傳主要取決于業(yè)務(wù)需求，我們可以改寫圖片的hANDler方法，打開一個(gè)模態(tài)框或者打開本地文件夾，調(diào)接口上傳圖片。 通用點(diǎn)是保存的時(shí)候，用Delta保留前面的內(nèi)容并插入圖片內(nèi)容，最后更新Quill。

由于圖片上傳、預(yù)覽主要取決于業(yè)務(wù)需求，與編輯器關(guān)系不大，后面不再提到。

幾種富文本編輯器Editor比較

1、UEditor 網(wǎng)絡(luò)的。

優(yōu)點(diǎn)：插件多，基本滿足各種需求，類似貼吧中的回復(fù)界面。

缺點(diǎn)：不再維護(hù)，文檔極少，使用并不普遍，圖片只能上傳到本地服務(wù)器，如果需要上傳到其他服務(wù)器需要改動(dòng)源碼，較為難辦，加載速度慢。

總結(jié)：小項(xiàng)目，可以用用，不推薦使用。

2、kindeditor

界面類似網(wǎng)絡(luò)，效果很像

文檔齊全但用例較少，使用還算方便。

缺點(diǎn)：總感覺樣子不是很好看，沒有現(xiàn)代那種風(fēng)格，還是老式的傳統(tǒng)圖標(biāo)。

3、simditor

樣式好看，插件不多，基本滿足需求

文檔英文，使用較為吃力，如果英文水平不好的話

github上面開源，維護(hù)較好

因?yàn)槲臋n看起來(lái)吃力，所以本人沒有考慮繼續(xù)使用。

4、bootstrap-wysiwyg

利用bootstrap實(shí)現(xiàn)的，簡(jiǎn)潔大方好看。

優(yōu)點(diǎn)：輕量，好看，使用方便。

缺點(diǎn)：需要一定的瀏覽器支持，畢竟需要bootstrap

5、wangEditor

js和css實(shí)現(xiàn)

優(yōu)點(diǎn)：輕量簡(jiǎn)潔，最重要的是開源且中文文檔齊全。 設(shè)計(jì)的UI漂亮。

插件基本能滿足需求，本人推薦使用。

6、CKEditor

功能強(qiáng)大，使用較多，可以看他們官網(wǎng)的例子，馬上就有感覺。

優(yōu)點(diǎn)：編輯能力極強(qiáng)，基本和word差不多了。 看起來(lái)界面極其優(yōu)秀的一款。

缺點(diǎn)：網(wǎng)站訪問速度一般，文檔英文，需要花時(shí)間開發(fā)。

支持圖片在線處理，插件多，功能強(qiáng)

編輯能力優(yōu)秀，界面好看。

同樣文檔為英文，開發(fā)需要花時(shí)間。

使用之前需要考慮的點(diǎn)：

1需要插件，是否需要很多的插件，還是說(shuō)簡(jiǎn)單的那些功能就行了。

2界面考慮，看你喜歡那個(gè)界面了。

3圖片是否需要上傳圖片服務(wù)器。

4文檔如果為英文是否會(huì)影響開發(fā)。

5支持瀏覽器類型和版本。

Django 開發(fā)問題，有用過網(wǎng)絡(luò)的富文本 UEditor 的么

UEditor是由網(wǎng)絡(luò)web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗(yàn)等特點(diǎn)，開源基于MIT協(xié)議，允許自由使用和修改代碼...

Django項(xiàng)目后臺(tái)admin富文本KindEditor教程0基礎(chǔ)

?由于Django開發(fā)過程中，發(fā)現(xiàn)對(duì)于博客類的文章前端顯示不友好，所以想在后臺(tái)集成一個(gè)富文本編輯器，這樣就可以輕松的解決前臺(tái)頁(yè)面顯示沒有格式的問題，給你一個(gè)漂亮的、可以編輯格式的前端頁(yè)面。

在引入富文本的過程中遇到了不少問題，也查了不少博客和相關(guān)資料，但是還是有些問題是網(wǎng)上的內(nèi)容沒辦法解決的，最后還是通過自己動(dòng)手實(shí)踐、反復(fù)嘗試才解決的，過程比較疼苦，我現(xiàn)在寫這個(gè)教程就是從0基礎(chǔ)開始的，真正動(dòng)手完成，調(diào)試成功的，如果你完全按照我的教程沒有解決的話，可以留言、或者私信聯(lián)系我。

好了，我們先看一下，我們需要什么環(huán)境、工具或插件：\ win7+python3.5+pycharm+Django1.11.X+KindEditor

這里簡(jiǎn)單介紹一下老牛X的KindEditor？\ ??KindEditor 是一套開源的在線HTML編輯器，主要用于讓用戶在網(wǎng)站上獲得所見即所得編輯效果，開發(fā)人員可以用 KindEditor 把傳統(tǒng)的多行文本輸入框(textarea)替換為可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，可以無(wú)縫地與 Java、、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用。

讀到這里我默認(rèn)大家win7+python3.5+pycharm+Django1.11.X這些都是齊全的，只是缺少了KindEditor，好現(xiàn)在我們來(lái)下載一下：\第一步：將KindEditor放置到項(xiàng)目中的正確目錄\ 1、下載完成后，解壓，然后刪除掉沒有用的文件和目錄，只保留圖中的內(nèi)容：

\ 3、在kindeditor目錄下新建一個(gè)文件，內(nèi)容如下：

(function?(k)?{?????=?(#id_profile,{????????resizeType:1,????????allowPreviewEmoticons?:?false,????????allowImageRemote?:?false,????????uploadJson?:?/upload/kindeditor,????????width:800px,????????height:400px,????});})

\ \ 第二步：Django的項(xiàng)目配置文件修改\ 1、現(xiàn)在我們來(lái)配置一下Django的靜態(tài)文件上傳目錄，如果已經(jīng)配置了，也最好保證和我一致，防止出現(xiàn)問題。我們打開文件，添加如下圖中的內(nèi)容：

STATIC_URL?=?/static/STATICFILES_DIRS?=?[(BASE_DIR,?static),]

\ 現(xiàn)在我們繼續(xù)在文件中設(shè)置一下MEDIA_URL和MEDIA_ROOT參數(shù)，這個(gè)作用和上面的static參數(shù)作用是類似的，也是通過攜帶MEDIA_URL的URL來(lái)訪問映射的MEDIA_ROOT目錄，具體配置如下：

#?media媒體目錄配置，根據(jù)系統(tǒng)自動(dòng)選擇/或\MEDIA_URL?=?/uploads/import?platformprint(())if(()==Windows):????print(Windows系統(tǒng))????MEDIA_ROOT?=?(BASE_DIR,?static\media)elif(()==Linux):????print(Linux系統(tǒng))????MEDIA_ROOT?=?(BASE_DIR,?static/media)else:????print(其他)

\ 我們添加2個(gè)url的路由到文件中，如圖：

from??import?settingsfrom??import?adminfrom?rango?import?viewsfrom??import?serveurlpatterns?=?[????url(r^admin/,?),????url(r^uploads/(?P.*)$,?serve,?{document_root:?_ROOT,?}),????url(r^upload/(?P[^/]+)$,?_image,?name=upload_image),]

第三步：應(yīng)用配置文件和開發(fā)文件修改\ 1、在自己的應(yīng)用中中添加如下代碼（這個(gè)是網(wǎng)上找的，稍后我會(huì)貼下鏈接）

#?配置KindEditor富文本編輯器上傳圖片目錄from??import?settingsfrom??import?csrf_exemptimport?osimport?uuidimport?jsonimport?datetime?as?dt@csrf_exemptdef?upload_image(request,?dir_name):????result?=?{error:?1,?message:?上傳出錯(cuò)}????files?=?(imgFile,?None)????if?files:????????result?=?image_upload(files,?dir_name)????return?HttpResponse((result),?content_type=application/json)#?目錄創(chuàng)建def?upload_generation_dir(dir_name):????today?=?()????dir_name?=?dir_name?+?/%d/%d/?%?(,?)????if?not?(_ROOT?+?dir_name):????????(_ROOT?+?dir_name)????return?dir_name#?圖片上傳def?image_upload(files,?dir_name):????#?允許上傳文件類型????allow_suffix?=?[jpg,?png,?jpeg,?gif,????????????????????bmp,?zip,?swf,?flv,????????????????????mp3,?wav,?wma,?wmv,????????????????????mid,?avi,?mpg,?asf,????????????????????rm,?rmvb,?doc,?docx,????????????????????xls,?xlsx,?ppt,?htm,????????????????????html,?txt,?zip,?rar,????????????????????gz,?bz2]????file_suffix?=?(.)[-1]????if?file_suffix?not?in?allow_suffix:????????return?{error:?1,?message:?圖片格式不正確}????relative_path_file?=?upload_generation_dir(dir_name)????path?=?(_ROOT,?relative_path_file)????if?not?(path):??#?如果目錄不存在創(chuàng)建目錄????????(path)????file_name?=?str(1())?+?.?+?file_suffix????path_file?=?(path,?file_name)????file_url?=?_URL?+?relative_path_file?+?file_name????open(path_file,?wb)(())

2、應(yīng)用中同級(jí)目錄下我們找到，打開，我們創(chuàng)建Category表對(duì)應(yīng)的數(shù)據(jù)模型類

from??import?models#?Create?your?models??Category():????name?=?(max_length=128,?unique=True)????profile?=?(個(gè)人博客,?blank=True)????def?__str__(self):????????return?

\ \ 3、現(xiàn)在我們需要做的最后一個(gè)配置就是在后臺(tái)中注冊(cè)我們?cè)谏弦徊絼?chuàng)建的模型類，我們首先在和的同級(jí)\ 目錄中找到，打開后注冊(cè)前面創(chuàng)建的Category模型類，再導(dǎo)入KindEditor中的js，如下操作即可：

from??import?adminfrom??import?Category,?Page#?Register?your?models?(Category)class?CategoryAdmin():????list_display?=?[name]????class?Media:????????def?__init__(self):????????????pass????????js?=?(????????????/static/js/kindeditor/,????????????/static/js/kindeditor/lang/zh_,????????????/static/js/kindeditor/,????????)

\ 這里我測(cè)試輸入字符，各種格式，還有上傳圖片功能，都是OK的\ 注意：\ 這里需要注意的是好多人都發(fā)現(xiàn)圖片沒有辦法上傳，老是提示找不到 /upload/kindeditor,那么請(qǐng)仔細(xì)檢查前面的和\ 的配置，務(wù)必和我的保持一致，再重新調(diào)試，應(yīng)該就可以了。

第五步：總結(jié)\ 讓我們來(lái)概況的總結(jié)一下，我們的配置流程：\ 1、下載kindeditor，copy到我們的項(xiàng)目靜態(tài)文件目錄中，并創(chuàng)建文件，輸入固定內(nèi)容（直接復(fù)制代碼）\ 2、配置項(xiàng)目文件，新增static靜態(tài)上傳目錄對(duì)應(yīng)url和項(xiàng)目中映射的目錄參數(shù)，在static目錄下新增url對(duì)應(yīng)url和\ 項(xiàng)目中映射的目錄參數(shù)（直接復(fù)制代碼）\ 3、配置項(xiàng)目文件，新增了2行正則表達(dá)式路由（直接復(fù)制代碼），來(lái)分別映射上傳media的根目錄和上傳文件的方法\ 4、配置應(yīng)用中文件（直接復(fù)制代碼）、中新建模型類（直接復(fù)制代碼）、文件中注冊(cè)模型類并引入\ kindeditor的js文件\ 5、啟動(dòng)項(xiàng)目，訪問調(diào)試，至此就全部結(jié)束了，看在博主這么細(xì)致的調(diào)教（不對(duì)，是講解。），大家一定記得留個(gè)贊呦！

附錄：\ 1、如果你按照教程都做完了，反復(fù)檢查了，都沒有問題，可以評(píng)論留言，或者私信我\ 2、這個(gè)文章也參照了其他博主的文章，這里留下原鏈接，大家可以沒事去踩踩\原文：

KindEditor編輯器的使用方法 KindEditor怎么用

KindEditor是一套開源的HTML可視化編輯器，主要用于讓用戶在網(wǎng)站上獲得所見 即所得編輯效果，兼容IE、Firefox、Chrome、 Safari、Opera等主流瀏覽器。KindEditor使用JavaScript編寫，可以無(wú)縫的于Java、、PHP、ASP等程序接 合

編輯器插件KindEditor的設(shè)置fileManagerJson是什么意思

貌似是圖片空間的管理將原來(lái)編輯器里的php處理方法移植到自己想要的地方比如fileController 修改URL就好。 不過編輯器默認(rèn)不需要管理功能，屏蔽了。

在編輯器kindeditor里輸入的文檔中插入表情，怎么顯示不出來(lái)

您好，可能是因?yàn)槟膋indeditor文件夾小的表情文件夾文件缺失，編輯好之后在破損的圖片上點(diǎn)擊鼠標(biāo)右鍵，然后選擇屬性查看圖片的地址，再根據(jù)地址在相應(yīng)的目錄看看相關(guān)文件是否存在。滿意請(qǐng)采納，謝謝！

---

---

相關(guān)標(biāo)簽： KindEditor——強(qiáng)大的所見即所得在線富文本編輯器、 Kindeditor編輯器直接粘貼圖片并保存到本地ajax、

上一篇：KindEditor讓你輕松創(chuàng)建內(nèi)容豐富的Web頁(yè)面K

下一篇：面向數(shù)據(jù)科學(xué)家和分析師的數(shù)據(jù)參量化入門指