flask UEditor富文本提交数据到后台以及复现到前端页面

来源：互联网发布：如何用字符串表示json 编辑：程序博客网时间：2024/05/01 12:06

如下通过ajax的POST方式将富文本里的内容传到后台：

前端：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>完整demo</title>    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>    <script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='ueditor/ueditor.config.js') }}"></script>    <script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='ueditor/ueditor.all.min.js') }}"> </script>    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->    <script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='ueditor/lang/zh-cn/zh-cn.js') }}"></script>    <style type="text/css">        div{            width:100%;        }    </style></head><!--<div>-->    <!--<h1>完整demo</h1>-->    <!--<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>--><!--</div>--><form name="ueditor" id="ueditor">    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>    //这是你的富文本容器。id可任意命名</form><button id="submit">subit............</button><p id="l" >{{ post.body }}</p><!--<p>123123121<img src="http://127.0.0.1:5000/static/ueditor/php/upload/image/2017111/191016489453.jpg"-->                 <!--title="Koala.jpg" alt="Koala.jpg" style="width: 243px; height: 164px;" width="243" height="164"/></p>--><script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script>    $(document).ready(function(){         var a = $("#l").text();          $(this).html(a)    });var ue = UE.getEditor('editor', {      serverUrl: "/upload/"   });var ue = UE.getEditor('editor');$("#submit").click(function(){var data = UE.getEditor('editor').getContent();alert("1111111111111111")  $.post("/shiyan",    {        //name:data,        //city:"Duckburg"    })    });</script></body></html>

然后后台获取：本文里有涉及到数据库，调用并前台显示富文本。

@main.route('/shiyan', methods=['GET', 'POST'])def shiyan():    if request.method == 'POST':  # 当以post方式提交数据时        print "-----------1111111111---------------------"        print request.form["name"]        post = Post(body=request.form["name"])        db.session.add(post)    post = Post.query.filter_by(id=2).first_or_404()    return render_template('shiyan2.html',post=post)

如此就会在命令行里打印出富文本数据。

在前端复现的时候会出现个问题：因为是将富文本以html格式存到数据库里面。所以传到前端后，会显示字符而没有html 格式。所以要在里面添加一个jq语句。将里面的字符获取后，然后再改为html格式。则样式就出现了：

$(document).ready(function(){     var a = $("#l").text();      $("#l").html(a)});

0 0