django——文本编辑器(代码片段)

关键词：

在博客项目中，为了支持用户的在线编辑博客，我们选用了kindeditor这个强大的编辑器。

以下是对kindeditor的简介，以及在Django中引入这个编辑器的方法:)

1.KindEditor是什么？

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

主要特点

• 快速：体积小，加载速度快
• 开源：开放源代码，高水平，高品质
• 底层：内置自定义 DOM 类库，精确操作 DOM
• 扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能
• 风格：修改编辑器风格非常容易，只需修改一个 CSS 文件
• 兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Oper

2.Django中引入kindeditor

2.1 templates代码：

<div class="content form-group">
    <label for="">内容(Kindeditor编辑器，不支持拖放/粘贴上传图片) </label>
    <div>
        <textarea name="content" id="article_content" cols="30" rows="10"></textarea>
    </div>
</div>

<input type="submit" class="btn btn-default">


<script src="/static/js/jquery-3.3.1.min.js"></script>
   <script charset="utf-8" src="/static/blog/kindeditor/kindeditor-all.js"></script>

    <script>
            KindEditor.ready(function(K) 
                    window.editor = K.create(‘#article_content‘,
                        width:"100%",
                        height:"600",
                        resizeType:0,
                        uploadJson:"/upload/",
                        extraFileUploadParams:
                            csrfmiddlewaretoken:$("[name=‘csrfmiddlewaretoken‘]").val()
                        ,
                        filePostName:"upload_img"


                    );
            );
    </script>

上面的html代码中的textarea将是kindeditor引入的对象

2.2 效果展示：

django开发5_富文本编辑器(代码片段)

1、下载kindeditor，百度一下2、把解压后的文件放在js文件夹下，如3、保存着几个文件，其余在python用不到，删除了4、打开admin.py文件，文章模型进行配置，为文章内容添加一个富文本编辑框5、以上的3个js文件路径为刚复制进来... 查看详情

django——xadmin中集成富文本编辑器ueditor(代码片段)

一、安装pip命令安装，由于ueditor为百度开发的一款富文本编辑框，现已停止维护，如果解释器为python2，则直接pipinstalldjangoueditor解压包安装，python3以上的版本需要下载压缩包解压安装下载地址步骤到下载地址下载并解压cmd进入... 查看详情

django——文本编辑器(代码片段)

...持用户的在线编辑博客，我们选用了kindeditor这个强大的编辑器。以下是对kindeditor的简介，以及在Django中引入这个编辑器的方法:)1.KindEditor是什么？KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所... 查看详情

django项目试炼blog--文本编辑器的使用（文件存储，预览）(代码片段)

HTML<divclass="col-md-9"><div><pclass="text-center"style="background-color:#e5eef7;font-size:18px">添加文章</p><formaction=""method="post"style="margin-top:40px">%csrf_token 查看详情

富文本编辑器(代码片段)

Django的富文本编辑器想要用首先下载pipinstalldjango-tinymce创建应用pythonmanage.pystartapptask_1创建模型fromdjango.dbimportmodelsfromtinymce.modelsimportHTMLFieldclassMessageInfo(models.Model):username=models.CharField(max_ 查看详情

django项目中使用kindeditor富文本编辑器(代码片段)

....create(‘#content‘,#加上这句话可以使jquery能获取到富文本编辑器的内容#afterBlur:function()this.sync();,width:"800",height:"600",resizeType:0,uploadJson:"/back/article/upload/",extraFileUploadParams:csrfmiddlewaretoken:"csrf_token",filePostName:"upload_img"//上传图片的名... 查看详情

搭建自己的博客（十三）：为博客后台添加ckeditor富文本编辑器(代码片段)

使用django默认的编辑器感觉功能太少了，所以集成一下富文本编辑器。1、安装和使用（1）、安装pipinstalldjango-ckeditor（2）、注册应用在django的settings中添加‘ckeditor’的app（3）、配置models将需要用到富文本编辑器的字段改... 查看详情

项目3(代码片段)

课程详情页CKEditor富文本编辑器富文本即具备丰富样式格式的文本。在运营后台，运营人员需要录入课程的相关描述，可以是包含了HTML语法格式的字符串。为了快速简单的让用户能够在页面中编辑带html格式的文本，我们引入富... 查看详情

django——bbs三(代码片段)

今日内容概要后台管理文章查增 改删前端编辑器(kindeditor富文本编辑器)处理XSS攻击以及文章摘要的处理编辑器上传图片修改用户头像今日内容详细后台管理"""当一个文件夹下文件比较多的时候你还可以继续创建文件... 查看详情

python测试开发django-55.xadmin使用markdown文档编辑器(django-mdeditor)(代码片段)

前言markdown是一个非常好的编辑器，用过的都说好，如果搭建一个博客平台的话，需要在后台做文章编辑，可以整合一个markdown的文本编辑器。github上关于django的markdown插件很多的，看了半天也不知道选哪个好，本篇用django-mdeditor... 查看详情

djangoxadmin集成djangoueditor富文本编辑器(代码片段)

本文档记录自己的学习历程！介绍UeditorHTML编辑器是百度开源的在线HTML编辑器,功能非常强大额外功能解决图片视频等无法上传显示问题Ueditor下载地址https://github.com/wsqy/DjangoUeditor.git解压后将DjangoUeditor文件夹复制到django项目目录... 查看详情

django-ckeditor添加代码功能（codesnippet）(代码片段)

最近做了一个博客,使用python3+django2.1开发的,后台编辑器和前端显示用的Django-ckeditor富文本编辑器,由于发现没有代码块功能，写上去的代码在前端展示有点乱，于是一顿问度娘查找资料后，找到了解决办法，现在就是将其记录下... 查看详情

django使用markdown编辑器(代码片段)

1.编辑下载地址https://github.com/pandao/editor.md<linkrel="stylesheet"href="%static‘plugin/editor.md/css/editormd.css‘%">......<divid="editormd"class="col-md-10text-left"><textareaname=""st 查看详情

django入门(代码片段)

...的过程中，你需要同时打开Python和cmd命令窗口，以及网页编辑器.py类型文件，需要用Python打开。命令窗口指令，统一在前面加了$标识，复制代码时，不要复制$.html类型文件，在前面加了%标识，可以使用notepad编辑，或者使用websto... 查看详情

django简单搭建编辑页面(代码片段)

   fromdjango.shortcutsimportrender,reverse,HttpResponse,redirectfromapp01importmodels#Createyourviewshere.defmodify(request):all_course_obj_list=models.Course.objects.all()returnrender 查看详情

在 django 博客站点中集成文本编辑器

】在django博客站点中集成文本编辑器【英文标题】：Integratethetexteditorindjangoblogsite【发布时间】：2021-11-1605:43:03【问题描述】：你知道富文本编辑器吗？请访问medium.com，我希望你会被这个最漂亮的文本编辑器所启发，我想在我的... 查看详情

如何在 Django Summernote 中显示编程片段的代码块？

...4:49【问题描述】：我在website上使用DjangoSummernote。这就是编辑器的外观。您可以在下面找到我的Summernote编辑器的django设置。SUMMERNOTE_CONFIG 查看详情

django中集成富文本编辑器

...让用户能够在页面中编辑带html格式的文本，引入富文本编辑器。富文本编辑器：ueditor、ckeditor、kindeditor在INSTALLED_APPS中添加在settings/dev.py中添加在总路由中添加ckeditor提供了两种类型的Django模型类字段修改应用/models.py里面的字... 查看详情