富文字 ckeditor 的使用及傳遞到後臺與在前端使用
因為 ckeditor 介面比較簡潔,所以記錄下教程:
外觀如下:
使用的方式如下:
首先前端:
<!DOCTYPE html> <html> <head> <title>完整demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="//cdn.ckeditor.com/4.4.6/standard/ckeditor.js"></script> </head><body> <div> <h1>完整demo</h1> <textarea id="content" class="ckeditor"></textarea> </div> <script type="text/javascript"> CKEDITOR.replace('content', { filebrowserUploadUrl: '/ckupload/', }); </script> </body> </html>
然後是後端介面:
def gen_rnd_filename(): filename_prefix = datetime.datetime.now().strftime('%Y%m%d%H%M%S') return '%s%s' % (filename_prefix, str(random.randrange(1000, 10000))) @app.route('/ckupload/', methods=['POST', 'OPTIONS']) def ckupload(): """CKEditor file upload""" error = '' url = '' callback = request.args.get("CKEditorFuncNum") if request.method == 'POST' and 'upload' in request.files: fileobj = request.files['upload'] fname, fext = os.path.splitext(fileobj.filename) rnd_name = '%s%s' % (gen_rnd_filename(), fext) filepath = os.path.join(app.static_folder, 'upload', rnd_name) # 檢查路徑是否存在,不存在則建立 dirname = os.path.dirname(filepath) if not os.path.exists(dirname): try: os.makedirs(dirname) except: error = 'ERROR_CREATE_DIR' elif not os.access(dirname, os.W_OK): error = 'ERROR_DIR_NOT_WRITEABLE' if not error: fileobj.save(filepath) url = url_for('static', filename='%s/%s' % ('upload', rnd_name)) else: error = 'post error' res = """<script type="text/javascript"> window.parent.CKEDITOR.tools.callFunction(%s, '%s', '%s'); </script>""" % (callback, url, error) response = make_response(res) response.headers["Content-Type"] = "text/html" return response
如上 則富文字部署成功。
隨後則是獲取富文字內容:
$("#submit").click(function(){ var content = CKEDITOR.instances.content.getData(); alert( content ) });其中,獲取富文字內容的方式為:
var content = CKEDITOR.instances.content.getData();
隨後使用post傳遞到後臺:
$.post("/shiyan", { name:"資料內容" })
如下則獲取post所傳遞的 內容
@app.route('/shiyan', methods=['GET', 'POST']) def shiyan(): if request.method == 'POST': # 當以post方式提交資料時 print "-----------1111111111---------------------" print request.form["name"]如果資料儲存到資料庫後,再在前端復現,會因為是字元而無法顯示富文字的格式。所以要用jq轉化為html格式:
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script>
$(document).ready(function(){ var a = $("#l").text(); $("#l").html(a) });
</script>
如上,資料傳到前段後,通過jq text()獲取到資料。然後再以html()方式修改回去。則就能正常顯示富文字格式了相關推薦
富文字 ckeditor 的使用及傳遞到後臺與在前端使用
因為 ckeditor 介面比較簡潔,所以記錄下教程: 外觀如下: 使用的方式如下: 首先前端: <!DOCTYPE html> <html> <head> <title>完整demo</title>
自己動手實現簡易的div可編輯富文字框及按下tab鍵後增加4個空格功能
需求分析:最近需要製作一個簡單的使用者評論輸入框,在網上找了一些富文字輸入框,但是它們的功能太多,不適合自己的需求,於是決定自己動手實現一個簡易的富文字輸入框。第一步:想要實現富文字輸入框並不是難事,在<div>標籤內加入 contenteditable="t
layui 富文字圖片上傳介面與普通按鈕 檔案上傳介面
富文字-圖片上傳html:<div class="layui-form-item layui-form-text"> <div class="layui-input-bloc
你不可錯過的二維碼生成與解析-java後臺與前端js都有
1.二維碼分類 二維條碼也有許多不同的碼制,就碼制的編碼原理而言,通常分為三種類型。 線性堆疊式二維碼 編碼原理: 建立在一維條碼基礎之上,按需要堆積成兩行或多行。 圖示: 矩陣式二維碼 最常用編碼,原理: 在一個矩形空間通過黑白畫素在矩陣中的不同分佈進行編碼。在
phpcms內容富文字CKeditor,想要去掉某些按鈕功能的程式碼
$toolbar .= "'-','Templates'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print'],
CKEditor富文字編輯器的使用及bug修改
CKEditor富文字編輯器的使用及bug修改 為什麼要用富文字編譯器? 在運營後臺,運營人員需要錄入並編輯詳情資訊, 詳情資訊不是普通的文字,可以是包含了HTML語法格式的字串。為了快速簡單的讓使用者能夠在頁面中編輯帶格式的文字,我們引入富文字編輯器。富文字
前端富文字編輯器ckeditor的使用
一、匯入js檔案 <script src="js/plugins/ckeditor/ckeditor.js"></script> 將下載的檔案匯入相應html目錄下 二、html程式碼 <textarea rows="20" class="
springmvc後臺如何接收ckeditor富文字編輯器編輯的內容
1把ckeditor的文字區,改成文章類的body,後臺用mvc的屬性自動封裝來接收,接收一個article類就行了 2吧文字區當string來接收 資料庫中如何儲存呢? 使用hibernate自動生成表的時候,body型別是vchar,但是不合理,一般就用text,不用blob的原因是中文亂碼還要單獨
富文字編輯器CKEditor的使用及同步問題
關於富文字編輯器,我個人使用的是CKEditor,感覺使用起來挺方便,下面就來看看CKEditor的使用。 然後我們把需要的檔案拖入我們的程式中,在頭部將你的ckeditor.js匯入 <script src="ckeditor/ckeditor.js" type=
富文字編輯器CKEditor配置及使用
注:使用CKEditor版本為js版本的CKEditor 4.8.0,所有配置均參考自CKEditor官方API:https://docs.ckeditor.com/,以及實踐經驗 一、快速使用 CKEditor官網下載js外掛 進入官網https:
CKEditor 整合CKFinder實現檔案上傳及富文字操作
<servlet> <servlet-name>ConnectorServlet</servlet-name> <servlet-class>com.ckfinder.connector.ConnectorServlet&
富文字編輯器kindeditor 前臺獲取編輯內容 ,及後臺獲取內容
必須的js方法 KindEditor.ready(function(K) { editor = K.create('textarea[name="contents"]',options); })
數據庫與前端的簡單建立及過濾註入參數
png 表達 strong 過濾 內容 分享圖片 rom news 小寫 數據庫配置:sqlin下的news表 1.最簡單的數據庫連接,無任何過濾,可以看出是個數字型註入。. ![](https://images2018.cnblogs.com/blog/139772
js獲取富文字中的第一張圖片url正則公式及去除字串裡面的html標籤的正則公式
js獲取富文字中的第一張圖片url正則公式及去除字串裡面的html標籤 後臺發來一個富文字字串裡面可能包含了0、1、2、3…個圖片標籤(img),我們的任務是獲取這個字串裡面第一張圖片的url,如果沒有圖片則返回空 var imgUrlFun = function(str){
React學習之旅----Redux安裝及富文字、echarts
瀏覽器中安裝redux devtools擴充套件 yarn add redux react-redux redux-devtools-extension 安裝依賴包即可 // 引入createStore建立store,引入applyMiddleware 來使用中介軟體 //
wangEditor富文字編輯器使用及圖片上傳
<script type="text/javascript" src="style/js/wangEditor.min.js"></script> <div id="editor"> </div> 建立富文字編輯器 var E = wi
富文字編輯ckeditor.js的使用
使用ckeditor.js編輯副本,生成靜態頁面 前端程式碼: <div style="margin:20px"> <textarea rows="20" name="editor" id="editor"></textarea><
仿有贊後臺+vue+ts+vuecli3.0+elementUi+四期vueX的使用+圖片上傳+富文字編譯器
前言 今天把整個專案剩餘都講完,後面將會學習一下react,然後用react寫個後臺,然後淺談一下使用心得,以及學習技巧 當前專案demo預覽 游泳健身瞭解一下:githubJQ外掛 技術文件 技術文件會持續更新 內容總結 vueX的使用 //劃重點 圖片上傳(批量上傳)
關於c#MVC後臺接收百度富文字框中的值失敗原因的解決!
最近在使用百度富文字框的時候 ,遇見了一個令我很無語的操作,我在前臺使用jQuery獲取百度富文字框中的值,路徑什麼的都是對的, 也沒有語法錯誤,但是就進不了後臺,後臺就一直接收不到資料 最後通過百度找到了解決的方法:如下 HttpRequest 類使用輸入驗證標誌來跟蹤是否對通過 Co
複習電商筆記-17-ngnix引數解釋和商品富文字編譯器(前端)
終極的解決方案-新SSO單點登入 將session從系統中獨立出來。Apache shiro頂級安全框架,它的session管理就是獨立出來的。目前主流做法是利用redis作為session管理的實現,因為redis訪問極其快速。 upstream狀