HTML編輯器KindEditor
阿新 • • 發佈：2019-04-03
manager django 文件名 體積 電子 import 設計 esp dump
KindEditor 是一套開源的在線HTML編輯器，主要用於讓用戶在網站上獲得所見即所得編輯效果，開發人員可以用 KindEditor 把傳統的多行文本輸入框(textarea)替換為可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。
主要特點
- 快速：體積小，加載速度快
- 開源：開放源代碼，高水平，高品質
- 底層：內置自定義 DOM 類庫，精確操作 DOM
- 擴展：基於插件的設計，所有功能都是插件，可根據需求增減功能
- 風格：修改編輯器風格非常容易，只需修改一個 CSS 文件
- 兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera
官方文檔：http://kindeditor.net/doc.php
集成到django2.0.4:
{# 載入js庫 #} <script src=‘{% static "js/jquery-1.12.1.min.js" %}‘></script> <script src=‘{% static "js/kindeditor/kindeditor-all-min.js" %}‘></script> </head><body> <textarea id=‘content‘>富文本</textarea> <script> initKindEditor(); function initKindEditor() { var kind = KindEditor.create(‘#content‘, { //id選擇器綁定 width: ‘100%‘, // 文本框寬度(可以百分比或像素) height:‘300px‘, // 文本框高度(只能像素) minWidth: 200, // 最小寬度（數字） minHeight: 400 // 最小高度（數字） }); } </script>
需要註意的一點是，如果你要異步將富文本內容提交給後臺，就需要動態獲取富文本的內容，那麽需要這樣寫
var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()
而使用 傳統的 $("#content").val() 是獲取不到html標簽的
另外如果你想利用富文本編輯器上傳文件到本地，前端需要添加配置：fileManagerJson: ‘/file_manager/‘,
後臺文件上傳代碼：
import os import time import json def file_manager(request): dic = {} root_path = ‘E:/week_23_1/static‘ static_root_path = ‘/static/‘ request_path = request.GET.get(‘path‘) if request_path: abs_current_dir_path = os.path.join(root_path, request_path) move_up_dir_path = os.path.dirname(request_path.rstrip(‘/‘)) dic[‘moveup_dir_path‘] = move_up_dir_path + ‘/‘ if move_up_dir_path else move_up_dir_path else: abs_current_dir_path = root_path dic[‘moveup_dir_path‘] = ‘‘ # 上一級目錄 dic[‘current_dir_path‘] = request_path #current_dir_path 指當前的路徑 dic[‘current_url‘] = os.path.join(static_root_path, request_path) file_list = [] #文件目錄 for item in os.listdir(abs_current_dir_path): #listdir 就是把某一路徑下的東西全部拿下來 abs_item_path = os.path.join(abs_current_dir_path, item) a, exts = os.path.splitext(item) is_dir = os.path.isdir(abs_item_path) if is_dir: temp = { ‘is_dir‘: True, #是否是dir ‘has_file‘: True, #目錄下面是否存在文件 ‘filesize‘: 0, #文件大小是多少 ‘dir_path‘: ‘‘, #當前的路徑是在哪 ‘is_photo‘: False, #是否是圖片 ‘filetype‘: ‘‘, #文件的類型是什麽 ‘filename‘: item, #文件名是什麽 ‘datetime‘: time.strftime(‘%Y-%m-%d %H:%M:%S‘, time.gmtime(os.path.getctime(abs_item_path))) #文件創始時間是什麽 } else: temp = { ‘is_dir‘: False, ‘has_file‘: False, ‘filesize‘: os.stat(abs_item_path).st_size, ‘dir_path‘: ‘‘, ‘is_photo‘: True if exts.lower() in [‘.jpg‘, ‘.png‘, ‘.jpeg‘] else False, ‘filetype‘: exts.lower().strip(‘.‘), ‘filename‘: item, ‘datetime‘: time.strftime(‘%Y-%m-%d %H:%M:%S‘, time.gmtime(os.path.getctime(abs_item_path))) } file_list.append(temp) dic[‘file_list‘] = file_list return HttpResponse(json.dumps(dic))
HTML編輯器KindEditor