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

来源：互联网发布：Mars毒药的淘宝店编辑：程序博客网时间：2024/05/21 20:21

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

0 0