完整的后台界面怎么可以没有文本编辑器,但是django的admin界面很疑惑,没有自带文本编辑器,好在网上有不少成型的库可以用

我用的是ckeditor编辑器,安装和配置我引用别人的博客

这篇博客配置讲的很详细,之后就可以用RichTextField来定义模型,后台默认就是文本编辑器。

但是问题来了,文本编辑器是没有上传图片的功能,只能贴链接。

网上以前有两篇博客也是讲上传的,一篇是java web,一篇是django的

django的链接在这里 django下ckeditor上传图片的实现

javaweb的链接在这里 CKEditor实现图片上传

建议先看完这两篇,我在看django这一篇的时候就发现,django这篇博客里面的步骤一如下:

步骤1:

下载ckeditor,找到image.js这个文件,搜索“upload”可以找到这一段id:'Upload',hidden:true。实际上上传功能被隐藏了,把上面的true改成false,再打开编辑器,就能找到上传功能了。

最新5.02版本似乎搜索不到,我直接参考java web这一篇

原文:第一种:还是刚才那个image.js
搜索“upload”可以找到这一段 id:'Upload',hidden:true,而我使用的4.3的是

id:"Upload",hidden:!0,反正改为false就行了,(遗憾的是此种方法对我这个版本不起作用)
第二种:打开config.js文件,加入下面一句话

config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待会要上传的action或servlet

这篇文章还讲了怎么去掉图片预览框里面的一堆英文,可以参考一下,我用上文的第二种方法,原因是第一种方法搜索文件里面的时候不存在,不过不用担心,第二种方法妥妥的,先

看下我自己修改后的,config.js文件吧

/**
 * Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.image_previewText=' ';
    config.filebrowserImageUploadUrl= "/uploadimg/";

};

什么意思,我讲一下,第二个和java的不一样,原因是我在后台测试上传的时候报错,因为他是提交到这个url(服务器+端口+“/uploadimg/”)的,所以我就在django里面url对应的视图写下如下url:

from django.conf.urls import include, url
from django.contrib import admin
from sjjgWeb.views import *
from mySjjg.settings import BASE_DIR
urlpatterns = [
    url(r'^ckeditor',include('ckeditor_uploader.urls')),
    url(r'^admin/', include(admin.site.urls)),
    url(r'^$',index),
    url(r'^index$',index,name='homepage'),
    url(r'^login$',login),
    url(r'^reg$',register),
    url(r'^test$',test),
    url(r'index/(?P<root>\d)/(?P<node>\d)',information,name='information'),
    url(r'^uploadimg/',upload_image),  #重点看这个,别的不用看    <<<——————————<<<看这里

    url(r'^upload/(?P<path>(\S)*)','django.views.static.serve',{'document_root':BASE_DIR+'\upload'}),
]

也就是说我的config.js里面写的是对应的url,这样的话你们就可以取自己喜欢的名字,然后视图函数upload_image参考了一下django-ckeditor那篇文章的步骤三的那一段代码

我做了小小的修改,粗略的看了一下,成功后就没有再去看过,有什么问题欢迎提出。

import time

@csrf_protect
def upload_image(request):
    if request.method == 'POST':
        callback = request.GET.get('CKEditorFuncNum')
        try:
            path = "upload/" + time.strftime("%Y%m%d%H%M%S",time.localtime())   <---还有这里,这里path修改你要上传的路径,我记得我是修改了的,这样就上传到了upload文件夹
            f = request.FILES["upload"]
            file_name = path + "_" + f.name
            des_origin_f = open(file_name, "wb+")
            for chunk in f:                 <--#我修改的是这里,因为python后期的版本放弃了chunk函数,直接遍历类文件类型就可以生成迭代器了。
                des_origin_f.write(chunk)
            des_origin_f.close()
        except Exception, e:
            print e
        res = r"<script>window.parent.CKEDITOR.tools.callFunction("+callback+",'/"+file_name+"', '');</script>"
        return HttpResponse(res)
    else:
        raise Http404()

注意import time和Http404,原文是没有提到的。具体自己看看,反正这段代码不难。

做到这里以后,我测试的时候,最新版本上传图片的时候,那里失败后有个height很矮的框框,根本不知道里面是什么,我直接用鼠标进去,全部复制黏贴下来,在文本文件里查看

发现是csrf,也就是django那篇博客说的步骤4吧,其实在步骤三的时候,也是我复制黏贴看错误,发现路径以后测试的。最重要是那篇博客后面有步骤五没提到

csrf有经验的都知道,ajax提交的话就要用的一段官方代码,django那篇博客讲的还是挺清楚的,我这里附上我修改后的文件截图

学过jquery都知道,在(function(){    这里面最前面加就行了。                  })

然后是表单,按照原文搜索得到了

我添加后是这一串,自己慢慢看

'<form enctype="multipart/form-data" method="POST" dir="'+k+'" lang="'+l+'" action="',CKEDITOR.tools.htmlEncode(d.action),'"><input type="hidden" name="csrfmiddlewaretoken" value="'+getCookie("csrftoken")+'">

之后就ok了,然而上传时成功了,但是图片预览不到,哈哈,因为django的url访问方式你也是知道的,并不是传统的静态文件访问访问,我试了很多方式,包括自己写view,最后解决办法是这样,

url那一串我发现默认访问路径最后是,,127.0.0.1/upload/342328305230.jpg,类似如此,很明显,我们没有upload视图函数嘛,于是我自己写了一个。

先再一次看看我的url

from django.conf.urls import include, url
from django.contrib import admin
from sjjgWeb.views import *
from mySjjg.settings import BASE_DIR
urlpatterns = [
    url(r'^ckeditor',include('ckeditor_uploader.urls')),
    url(r'^admin/', include(admin.site.urls)),
    url(r'^$',index),
    url(r'^index$',index,name='homepage'),
    url(r'^login$',login),
    url(r'^reg$',register),
    url(r'^test$',test),
    url(r'index/(?P<root>\d)/(?P<node>\d)',information,name='information'),
    url(r'^uploadimg/',upload_image),
    url(r'^upload/(?P<path>(\S)*)','django.views.static.serve',{'document_root':BASE_DIR+'\upload'}),  <---这一次重点是这里
]

本来自己写了视图函数,最后发现系统有默认静态处理的,第一个参数是 都懂得,第二个是系统的默认静态管理函数,第三个是上传的觉得路径,我引用了setting文件的BASE_DIR变量,最后加上你上传文件的文件夹就可以像访问静态文件一样访问了。到这里就一切大功告成了。。。附上我的成功图片。

想问我为什么后台管理为什么那么漂亮,我不会告诉你是djangoadminsuit皮肤的。

 

django下的ckeditor 5.0 文本编辑器上传功能。的更多相关文章

  1. ASP.NET MVC4实现TinyMCE 4.0.20自定义上传功能

    tinymce 插件不提供免费的本地图片上传功能,所以自己将uploadify这个上传插件整合到tinymce,实现本地上传,还用到了jquery.ui插件,先展示全部的代码 @model TinyM ...

  2. win7下利用ftp实现华为路由器的上传和下载

    win7下利用ftp实现华为路由器的上传和下载 1.  Win7下ftp的安装和配置 (1)开始->控制面板->程序->程序和功能->打开或关闭Windows功能 (2)在Wi ...

  3. Servlet3.0学习总结——基于Servlet3.0的文件上传

    Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileu ...

  4. Servlet3.0学习总结(三)——基于Servlet3.0的文件上传

    在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileupload组件,在Servlet3.0中提供了对文件上传的原生支持,我们不 ...

  5. CKEditor与dotnetcore实现图片上传

    CKEditor的使用 1.引入js库 <script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js&quo ...

  6. Win7下安装一个装逼文本编辑器Atom + activate-power-mode插件

    Atom是Github推出的一个文本编辑器,搜索一下大概是给Web前端用的,最近比较火的是他的一个插件activate-power-mode,可以实现打字屏振效果. 用来装装逼还是挺适合的,本来想试试 ...

  7. drupal中安装CKEditor文本编辑器,并配置图片上传功能

    一.下载: 1.CKEditor模块 2.IMCE模块 二.安装       1.复制: 下载完上面两个模块之后,解压,将解压后整个文件夹,复制粘贴,放到 sites\all\modules下面,个人 ...

  8. 在Visual Studio 2012 Blue theme下使用Dark theme的文本编辑器颜色设置

    Visual Studio 2012 默认提供了3种color theme: blue,light,和dark.其中dark的文本编辑器颜色设定很爽,可是整个菜单项加上一些小的窗口如Find Resu ...

  9. PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能

    一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id ...

随机推荐

  1. Unix/Linux进程间通信(一):概述

    序 Linux下的进程通信手段基本上是从Unix平台上的进程通信手段继承而来的.而对Unix发展做出重大贡献的两大主力AT&T的贝尔实验室及BSD(加州大学伯克利分校的伯克利软件发布中心)在进 ...

  2. Xcode的command+shift+o是一个不错的工具

    一,经历 1.在向UITextField中输入图片的时候,可以使用 NSAttributedString 添加,但是很难找到能够返回NSAttributedString对象的方法. 2.通过comma ...

  3. Html 网页布局(一)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  4. SpringMVC系列之基本配置

    一.概述 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是使用请 ...

  5. (转载)java多态(2)-------Java转型(向上或向下转型)

    5.13.1 向上转型 我们在现实中常常这样说:这个人会唱歌.在这里,我们并不关心这个人是黑人还是白人,是成人还是小孩,也就是说我们更倾向于使用抽象概念“人”.再例如,麻雀是鸟类的一种(鸟类的子类), ...

  6. MySQL问题汇总(持续更新)

    1.This function has none of DETERMINISTIC, NO SQL 原因: Mysql如果开启了bin-log, 我们就必须指定我们的函数是否是 1 DETERMINI ...

  7. 在centos6.5-64bit上安装wxHexEditor,以查看编译二进制文件

    目前在做一个存储,磁盘里面的数据老是出现很诡异的地方,某个通道的录像播放到一半的时候,切换到另外一个通道的视频上去了,一直不知道怎么下手,想着用十六进制编辑器查看磁盘数据. sudo yum inst ...

  8. awk 解析maps文件中的地址

    maps文件一般是这个样子: pi@raspberrypi:~ $ sudo cat /proc//maps 54b88000-54c8d000 r-xp b3: /lib/systemd/syste ...

  9. 百度地图 &gt;&gt; 自定义控件

    前言 百度地图API中预定义的UI控件,比如NavigationControl平移缩放控件,CopyrightControl版权控件,MapTypeControl地图类型控件....,这些都继承自抽象 ...

  10. Webpack 傻瓜式指南(一)

    modules with dependencies   webpack   module bundler   static  assetss   .js .js .png Webpack傻瓜式指南 n ...