Flask CKEditor 富文本编译器实现文章的图片上传以及回显，解决路径出错的问题

最新推荐文章于 2023-01-14 10:04:37 发布
最新推荐文章于 2023-01-14 10:04:37 发布
阅读量558 收藏
点赞数 1
分类专栏： 富文本 文章标签： python html5 flask
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanxiang11/article/details/115802113
版权

Flask CKEditor 富文本编译器实现文章的图片上传以及回显，解决路径出错的问题

下面是效果图：
在这里插入图片描述

在这里插入图片描述
上代码，这个是视图部分

@admin.route("/admin/match", methods=['GET', 'POST'])
def match():
    new_h_load = ""
    form = MatchForm()
    if request.method == "POST":
        if form.submit.data:
            title = request.form.get('title')
            name = request.form.get("name")
            message = request.form.get('body')
        elif form.sent.data:
            title = request.form.get('title')
            name = request.form.get("name")
            message = request.form.get('body')
            QueryMatch().add(title, message, name)
            return render_template("admin/skip.html")
        elif form.upload.data:
            f = request.files.get('file')
            filename = secure_filename(f.filename)
            ext = filename.split('.', 1)[1]
            unix_time = int(time.time())
            new_filename = str(unix_time) + '.' + ext
            load = url_for('static', filename=r'img/essay/match')
            new_load = "./." + load
            h_load = path.join(new_load, new_filename).replace('\\', '/')  # 保存的地址
            new_h_load = h_load.replace("./", "../")
            print(h_load)
            f.save(h_load)
            return render_template("admin/match.html", form=form, new_h_load=new_h_load)
        return render_template("admin/match.html", form=form, new_h_load=new_h_load)
    else:
        return render_template("admin/match.html", form=form, new_h_load=new_h_load)

模板部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章发布中心</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function() {
        $("#content2").html($("#content1").text());
        });
    </script>
    <style type="text/css">
        .head{
            width: 100%;
            height: 50px;
            text-align: center;
            border-radius: 20px;
            -moz-box-shadow:0 0 10px #010a13;
            -webkit-box-shadow:0 0 10px #01060a;
            box-shadow:0 0 10px #00050a;
            margin-bottom: 20px;
        }
        .title{
            margin: auto;
            width: 100%;
            height: 60px;
            text-align: center;
            border-radius: 20px;
            -moz-box-shadow:0 0 10px #010a13;
            -webkit-box-shadow:0 0 10px #01060a;
            box-shadow:0 0 10px #00050a;
        }
        .title1{
            margin: auto;
            width: 100%;
            height: 60px;
            border-radius: 20px;
            -moz-box-shadow:0 0 10px #010a13;
            -webkit-box-shadow:0 0 10px #01060a;
            box-shadow:0 0 10px #00050a;
        }
        .Body{
            margin-top: 20px;
            width: 100%;
            height: 60%;
            border-radius: 20px;
            -moz-box-shadow:0 0 10px #010a13;
            -webkit-box-shadow:0 0 10px #01060a;
            box-shadow:0 0 10px #00050a;
        }
        .input{
            height: 30px;
            border-radius: 10px;
            -moz-box-shadow:0 0 10px #3291ef;
            -webkit-box-shadow:0 0 10px #4ba5ee;
            box-shadow:0 0 10px #4294e7;
        }
        .input2{
            width: 60px;
        }

        .foot{
            float: right;
        }
        .div1{
            float: right;
        }
        .div2{
            display: flex;
        }
        .div3{
            width: 50%;
            border-radius: 4px;
            -moz-box-shadow:0 0 10px #010a13;
            -webkit-box-shadow:0 0 10px #01060a;
            box-shadow:0 0 10px #00050a;
        }
        .div4{
            width: 48%;
            margin-left: 20px;
            border-radius: 4px;
            -moz-box-shadow:0 0 10px #010a13;
            -webkit-box-shadow:0 0 10px #01060a;
            box-shadow:0 0 10px #00050a;
        }
        .div5{
            margin-top: 20px;
            -moz-box-shadow:0 0 10px #577b97;
            -webkit-box-shadow:0 0 10px #577b97;
            box-shadow:0 0 10px #6a91b8;
        }
    </style>
</head>
<body>
<div class="container-fluid div2">
    <div class="div3">
        <div class="head">
            <h1>文章发布中心</h1>
        </div>
        <div>
            <form method="post" enctype="multipart/form-data">
                {{ form.csrf_token }}
                <div class="title">
                    {{ form.title(class="input") }}<br>
                    <div class="div1">
                        编辑人：{{ form.name(class="input input2") }}
                    </div>
                </div>
                <div class="title">
                    {{ form.file }}{{ form.upload }}
                    <span style="float: right">图片地址：{{ new_h_load }} </span>&nbsp;&nbsp;
                </div>
                <div class="Body">
                    {{ form.body }}
                </div>
                <div class="foot">
                    {{ form.submit(class='btn btn-success') }}
                    {{ form.sent(class='btn btn-success') }}
                </div>
            </form>
        </div>
    </div>

    <div class="div4">
        <div class="head">
            <h1>文章预览效果</h1>
        </div>
        <div class="title">
            <h1 style="text-align: center">{{ request.form.get("title") }} </h1>
        </div>
        <div id = "content1"  hidden="hidden">
            {{ request.form.get('body') }}
        </div>
        <div id = "content2" class="div5">
        </div>


    </div>
</div>
{% block scripts %}
{{ ckeditor.load() }}
{% endblock %}
</body>
</html>

最终效果：
在这里插入图片描述

是南巷的花猫啊
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在flask实现CKEditor和在网页上显示图片
天行健
08-31 3115
在自己制作的网页上想实现富文本功能，于是上网搜了一下看到了CKEditor，实现比较简单，可以参照CKEditor ，具体实现的话可以参考David-Guo。     实现完后，进行上传图片，然后post，可是在页面中没有显示图片。这可就纳闷了。接着我查看了一下数据库发现在body_html这一栏只有，为了保护网站，在models处设置了检测用户输入，如果有html标签者只保留我设置好的标签，所
flask项目编译成pyd打包成exe
徒手千行代码无bug
04-17 1413
项目目录结构： 打包时结构： 首先安装Pyinstaller和Cython. 第一步，将py文件编译为pyd 在app目录下新建setup.py，内容如下： from distutils.core import setup from Cython.Build import cythonize setup( ext_modules=cythonize(["get_data.py", ...
富文本编辑器ckeditor的引入、配置、使用、图片上传、图片回显、服务器虚拟路径
MiracleSang的博客
01-10 2038
（1）将CKeditor文件夹放入项目 （2）引入js文件 <script type="text/javascript" src="${pageContext.request.contextPath }/ckeditor/ckeditor.js"></script> （3）创建文本域 <textarea name="noticeContent" id="notic...
CKEditor 5 图片上传配置和图片上传返回参介绍
小强Lee的博客
01-14 3558
之前一直使用的是ckeditor4版本编辑器，最近发现ckeditor5版本编辑器也挺不错，准备试试。结果在上传图片这方面发现与之前ckeditor4版本上传配置不一样了。下面是ckeditor5的相关配置和介绍
flask中使用ckeditor富文本编辑器
徳
08-07 1299
写网站时我们经常会使用到富文本编辑器，flask中使用ckeitor也是非常的简单。 第一步，官网下载ckeditor：https://ckeditor.com/ckeditor-4/download/ 有几个版本可供选择，我选择的是完整版。 第二步，解压，将其解压至flask中statics下的ckeditor目录下，解压后如下图： 第三步，在相应的html中导入ckedito...
flask添加ckeditor实现粘贴图片
qq_31310579的博客
03-29 935
最近公司在使用flask框架开发一个后台管理系统，使用了flask框架。 但是有个需求摆在我面前“截图工具截图之后，直接粘贴进富文本框”。 下边我简述一下我的操作过程，顺带介绍一下自己踩过的坑。 一、下载ckeditor https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html https://ckedi...
Flask练手
qq_55621259的博客
08-22 787
打开Pycharm专业版，点击坐上角File，再点击New Project新建项目。左边栏选择flask，编译器选择python解释器或者其他虚拟环境。完成之后会自动生成这样一个模板：app.py中是最简单的一个示例。可以看到左侧还有一个static文件夹和template文件夹，template文件夹我目前所知是用来存放前端的html文件。下面进行运行这个最简单的示例：在终端terminal中输入flask run命令运行：点击蓝色链接即可进入我们的页面。
Flask项目-集成富文本编辑器CKeditor，实现了图片上传、文件上传、Flash上传等功能
06-23
Flask项目——集成富文本编辑器CKeditor，实现了图片上传、文件上传、Flash上传等功能。方便进行项目集成及应用。代码无需任何修改，可完美执行！！！ Flask项目——集成富文本编辑器CKeditor，实现了图片上传、...
Python的Flask框架中集成CKeditor富文本编辑器的教程
09-21
在Python的Web开发中，Flask是一个轻量级且强大的框架，而CKeditor是一款流行的富文本编辑器，用于提供用户友好的界面来编辑HTML内容。在Flask应用中集成CKeditor，可以极大地提升后台管理系统的用户体验，使得内容...
flask-ckeditor-demo:Flask项目集成富文本编辑器CKeditor演示，实现了图片上传、文件上传、Flash上传等功能
07-05
本篇将深入探讨如何在Python的Flask框架中集成富文本编辑器CKEditor，以实现图片、文件及Flash的上传功能。这个项目，名为"flask-ckeditor-demo"，提供了一个全面的示例，帮助开发者了解如何在实际应用中使用...
CKEDITOR实现新闻内容富文本显示以及添加修改
09-04
CKEDITOR实现新闻内容富文本显示以及添加修改,文档为前台实现ckeditor的代码。
ckeditor整合webupload插件+后台接口代码
03-28
用webupload插件，自定义ckeditor按钮控件，实现文件上传功能，包括后台接口ashx文件。
flask 安装
01-20
Python +FLask 环境搭建
Flask实现图片的上传、下载及展示示例代码
09-20
在本文中，我们将探讨如何使用Python的Flask框架实现图片的上传、下载及展示功能。Flask是一个轻量级的Web服务器网关接口（WSGI）Web应用框架，非常适合构建小型到中等规模的Web应用程序。 首先，让我们来看一下...
富文本编辑器的内容保存到数据库中后,带标签的字符串如何回显
热门推荐
java学习中..
03-29 2万+
${content} $(function() { $("#content2").html($("#content1").text());  }); ############################ ${content}表示后台传过来的数据
Spring Boot中带有CKEditor的AJAX
最佳 Java 编程
06-06 160
1.概述 在本文中，我们将介绍如何在Spring Boot中使用CKEditor 。 在本教程中，我们将导入一个包含大量数据的XML文档，使用GET请求编程将一组数据加载到CKEditor实例的能力，并执行POST请求以保存CKEditor的数据。 我们将使用的技术包括MongoDB，Thymeleaf和Spring Batch。 Github上提供了本教程的完整源代码。 2.什么...
flask 执行 c++程序简单的方法
qq_42348424的博客
05-24 1049
背景： 通过flask服务启动c++程序，网上查到的方案有使用ctypes库对c++代码进行重构，或者通过cmake将算法服务编译为libtest.so。但不想有太麻烦的操作，还想在windows上直接运行，所以想到直接用flask的subprocess来启动命令行执行c++程序。 方法： 先贴上我的代码 @app.route('/ECTSServer', methods=['POST', 'GET']) def ECTS_run(): #t = GetSellThread() #t.sta
【Java前端】CKEditor的回显数据
开染坊的白猫
06-05 1265
回显数据 html页面中，有3个DIV块，id分别为editor1, editor2, editor3 在JS中编写如下代码： handleEdit(row){ CKEDITOR.instances.editor1.setData(row.incomeChange); CKEDITOR.instances.editor2.setData(row.profitChange); CKEDITOR...
flask_ckeditor
最新发布
04-09
Flask-CKEditor是一个用于集成富文本编辑器CKEditor到Flask应用程序中的扩展。它提供了一个简单的方式来在Flask应用中创建和管理富文本编辑器。 使用Flask-CKEditor，你可以轻松地在你的表单中添加一个富文本编辑器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值