富文本 ckeditor 的使用及传递到后台与在前端使用

最新推荐文章于 2025-03-14 20:28:44 发布

原创最新推荐文章于 2025-03-14 20:28:44 发布 · 6.6k 阅读

10 ·

CC 4.0 BY-SA版权

本文介绍了ckeditor富文本编辑器的使用方法，包括前端配置、后端接口接收以及通过POST传递内容到后台的步骤，展示了简洁高效的编辑器应用。

因为 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()方式修改回去。则就能正常显示富文本格式了