富文字 ckeditor 的使用及傳遞到後臺與在前端使用

阿新 • • 發佈：2019-01-20

因為 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富文字編輯器使用及圖片上傳

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

富文字 ckeditor 的使用及傳遞到後臺與在前端使用

相關推薦