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

beiguoxia beiguoxia     2022-12-20     480

关键词:

1、下载kindeditor,百度一下

2、把解压后的文件放在js文件夹下,如

技术分享图片

3、保存着几个文件,其余在python用不到,删除了

技术分享图片

4、打开admin.py文件,文章模型进行配置,为文章内容添加一个富文本编辑框

技术分享图片

5、以上的3个js文件路径为刚复制进来的路径。可根据自己路径修改。

其中config.js文件没有,可以创建一个,主要用来创建一个kindeditor

如下:

技术分享图片

6、让其找到文章内容,如下

如:我的文章内容在textarea标签下,还有一个属性为name=content

技术分享图片

可以打开开发者工具,或者在谷歌下按住ctrl+shift+i打开,定位到文章内容位置,查看元素

技术分享图片

 

 

 7、添加后,再次打开,可以查看到富文本框已经添加成功

如下

技术分享图片

ps:富文本编辑框的长高,可以再config.js中配置。

width:500,
height:200,




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

创建工程,数据中数据格式设置为models.TextField()此时编辑器是普通的文本框。使用tinymce1、安装django-tinymcepipinstalldjango-tinymce12、INSTALLED_APPS中添加‘tinymce’,3、模型文件中导入包fromtinymce.modelsimportHTMLField14、设置模型成员类型:sc... 查看详情

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

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

django之百度ueditor富文本编辑器后台集成(代码片段)

Python3+Django2.0百度Ueditor富文本编辑器的集成百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成?答案:因为百度富文本编辑器Ueditor没有对python的支持 步骤1:  在官网下载Ueditor的任意版本代... 查看详情

项目3(代码片段)

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

django入门8之xadmin引入富文本和excel插件(代码片段)

django入门8之xadmin引入富文本和excel插件  Xadmin引入富文本 插件的文档https://xadmin.readthedocs.io/en/docs-chinese/make_plugin.html Djangoueditor插件的安装 下载地址:https://github.com/zhangfisher/DjangoUeditor进入mxonline的虚拟环境Pytho... 查看详情

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将需要用到富文本编辑器的字段改... 查看详情

百度富文本ueditor编辑器的使用(代码片段)

...其是在网站开发后台管理系统的时候经常会使用到富文本编辑器,这里我们来使用百度提供的富文本编辑器UEditor,以提高我们的开发效率UEditor官网下载地址:https://ueditor.baidu.com/website/download.html 这里我下载的是jsp版本中的UT... 查看详情

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

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

tinymce-vue5富文本的实现(代码片段)

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。tiny中文文档:http://tinymce.ax-z.cn/本文介绍如何在vue项目中,使用TinyMCE实现富文本基本功... 查看详情

django学习——xadmin中集成富文本编辑器ueditor

对于xadmin和djangoueditor的安装,本人建议直接集成在pycharm中,而不是装在虚拟环境中。因为xadmin中如果需要集成插件的话,需要对其进行添加;而djangoueditor采用pip安装的话,只能用在Python2版本中。因此建议将源码包下载下来,... 查看详情

百度富文本编辑器的使用(代码片段)

百度富文本编辑器的使用(2016年版本)对于大文章的网上编辑,你的输入编辑框肯定不够用,现在看看功能强大的富文本编辑框吧1.ueditor官方地址:http://ueditor.baidu.com/website/index.html  开发文档地址:  http://ueditor.b... 查看详情

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

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

vue项目增加tinymec富文本编辑器组件(代码片段)

TinyMec富文本编辑器开源,而且开发人员对他的支持比较好,所以选用了它https://liubing.me/vue-tinymce-5.html基于VueCLI3脚手架搭建的项目整合tinymce5富文本编辑器,vuecli2版本及tinymce4版本参考:https://blog.csdn.net/liub37/article/details/83310879做了... 查看详情

vue项目中使用tinymce富文本的踩坑经历(代码片段)

...用到富文本这个东西。现在在写vue项目中就需要到富文本编辑器,所以给大家推荐一款富文本编辑器(TinyMCE)首先,下载编辑器依赖包npminstalltinymce--saveoryarnaddtinymce  在需要用到编辑器的地方引入importtinymcefrom‘tinymce/tinymce‘... 查看详情

架构师内功心法,参与富文本编辑器开发的备忘录模式详解(代码片段)

备忘录模式(MementoPattern)又称为快照模式(SnapshotPattern)或者令牌模式(TokenPattern),是指在不破坏封装的前提下,捕获一个内部状态,并在对象之外保存这个状态。这样以后就可将该对象恢复到原先保存的状态。在软件系统... 查看详情

ckeditor5富文本编辑器在vue中的使用(代码片段)

...tall--save@ckeditor/ckeditor5-vue@ckeditor/ckeditor5-build-classic要创建编辑器实例,必须首先将编辑器构建和组件模块导入应用程序的根文件中(例如,main.js在由VueCLI生成时)。然后,使用以下Vue.use()方法启用组件:importVuefrom‘vue‘;importCKE... 查看详情

ckeditor富文本编辑器踩坑-上传视频后无法删除视频和获取鼠标编辑状态光标(代码片段)

问题描述在CKEditor富文本编辑器中成功上传视频后,如果视频前后没有任何内容,视频无法使用退格键正常删除并且在文本框内无法获取鼠标编辑状态光标。修复办法在创建的Video标签后添加一个换行标签即可代码如下<... 查看详情