1. 程式人生 > >富文字 ckeditor 的使用及傳遞到後臺與在前端使用

富文字 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狀