Django-DjangoUeditor

時間 2019-12-08

標籤 django djangoueditor 欄目 Python 简体版

原文原文鏈接

項目中用到了富文本編輯器DjangoUeditor，便開始學習。還有一個輕量級的編輯器是TinyHTML Editor，這個也能夠，你們能夠去了解一下。不過今天在這裏主要說一下DjangoUeditor。css

Ueditor是百度開源的Web編輯器，能夠感覺一下百度的Web編輯器：html

http://ueditor.baidu.com/website/umeditor.htmlgit

DjangoUeditor是基於Ueditor開發的，有個大神已經本身開發好啦，你們直接用。地址以下：github

https://github.com/zhangfisher/DjangoUeditorweb

1.下載DjangoUeditor：數據庫

　　1.安裝包安裝:django

　　　　　http://ueditor.baidu.com/website/download.html 下載appapp

　　　　　相似於django其餘的插件的安裝，將DjangoUeditor的文件夾複製到當前App的同級目錄編輯器

　　2.直接pip3 install DjangoUeditor(推薦)函數

二、在INSTALL_APPS裏面增長DjangoUeditor app，以下：
     
        INSTALLED_APPS = (
            #........
            'DjangoUeditor',
        )


三、在urls.py中增長：

    url(r'^ueditor/',include('DjangoUeditor.urls' )),

四、在models中這樣定義：
    
    from DjangoUeditor.models import UEditorField
    class Blog(models.Model):
        Name=models.CharField(,max_length=100,blank=True)
        Content=UEditorField('內容    ',height=100,width=500,default='test',imagePath="uploadimg/",imageManagerPath="imglib",toolbars='mini',options={"elementPathEnabled":True},filePath='upload',blank=True)

    說明：
    UEditorField繼承自models.TextField,所以你能夠直接將model裏面定義的models.TextField直接改爲UEditorField便可。
    UEditorField提供了額外的參數：
        toolbars:配置你想顯示的工具欄，取值爲mini,normal,full,besttome, 表明小，通常，所有,塗偉忠貢獻的一種樣式。若是默認的工具欄不符合您的要求，您能夠在settings裏面配置本身的顯示按鈕。參見後面介紹。
        imagePath:圖片上傳的路徑,如"images/",實現上傳到"{{MEDIA_ROOT}}/images"文件夾
        filePath:附件上傳的路徑,如"files/",實現上傳到"{{MEDIA_ROOT}}/files"文件夾
        scrawlPath:塗鴉文件上傳的路徑,如"scrawls/",實現上傳到"{{MEDIA_ROOT}}/scrawls"文件夾,若是不指定則默認=imagepath
        imageManagerPath:圖片管理器顯示的路徑，如"imglib/",實現上傳到"{{MEDIA_ROOT}}/imglib",若是不指定則默認=imagepath。
        options：其餘UEditor參數，字典類型。參見Ueditor的文檔ueditor_config.js裏面的說明。
        css:編輯器textarea的CSS樣式
        width，height:編輯器的寬度和高度，以像素爲單位。

五、在表單中使用很是簡單，與常規的form字段沒什麼差異，以下：
    
    class TestUeditorModelForm(forms.ModelForm):
        class Meta:
            model=Blog
    ***********************************
    若是不是用ModelForm，能夠有兩種方法使用：

    1: 使用forms.UEditorField

    from  DjangoUeditor.forms import UEditorField
    class TestUEditorForm(forms.Form):
        Description=UEditorField("描述",initial="abc",width=600,height=800)
    
    2: widgets.UEditorWidget

    from  DjangoUeditor.widgets import UEditorWidget
    class TestUEditorForm(forms.Form):
        Content=forms.CharField(label="內容",widget=UEditorWidget(width=800,height=500, imagePath='aa', filePath='bb',toolbars={}))
    
    widgets.UEditorWidget和forms.UEditorField的輸入參數與上述models.UEditorField同樣。

六、Settings配置
     
      在Django的Settings能夠配置如下參數：
            UEDITOR_SETTINGS={
                "toolbars":{           #定義多個工具欄顯示的按鈕，允行定義多個
                    "name1":[[ 'source', '|','bold', 'italic', 'underline']],
                    "name2",[]
                },
                "images_upload":{
                    "allow_type":"jpg,png",    #定義容許的上傳的圖片類型
                    "max_size":"2222kb"        #定義容許上傳的圖片大小，0表明不限制
                },
                "files_upload":{
                     "allow_type":"zip,rar",   #定義容許的上傳的文件類型
                     "max_size":"2222kb"       #定義容許上傳的文件大小，0表明不限制
                 },,
                "image_manager":{
                     "location":""         #圖片管理器的位置,若是沒有指定，默認跟圖片路徑上傳同樣
                },
            }
七、在模板裏面：

    <head>
        ......
        {{ form.media }}        #這一句會將所須要的CSS和JS加進來。
        ......
    </head>
    注：運行collectstatic命令，將所依賴的css,js之類的文件複製到{{STATIC_ROOT}}文件夾裏面。

八、高級運用：

     ****************
     動態指定imagePath、filePath、scrawlPath、imageManagerPath
     ****************
     這幾個路徑文件用於保存上傳的圖片或附件，您能夠直接指定路徑，如：
          UEditorField('內容',imagePath="uploadimg/")
     則圖片會被上傳到"{{MEDIA_ROOT}}/uploadimg"文件夾，也能夠指定爲一個函數，如：

      def getImagePath(model_instance=None):
          return "abc/"
      UEditorField('內容',imagePath=getImagePath)
      則圖片會被上傳到"{{MEDIA_ROOT}}/abc"文件夾。
     ****************
     使上傳路徑(imagePath、filePath、scrawlPath、imageManagerPath)與Model實例字段值相關
     ****************
        在有些狀況下，咱們可能想讓上傳的文件路徑是由當前Model實例字值組名而成，好比：
        class Blog(Models.Model):
            Name=models.CharField('姓名',max_length=100,blank=True)
            Description=UEditorField('描述',blank=True,imagePath=getUploadPath,toolbars="full")

     id  |   Name    |       Description
     ------------------------------------
     1   |   Tom     |       ...........
     2   |   Jack    |       ...........

      咱們想讓第一條記錄上傳的圖片或附件上傳到"{{MEDIA_ROOT}}/Tom"文件夾,第2條記錄則上傳到"{{MEDIA_ROOT}}/Jack"文件夾。
      該怎麼作呢，很簡單。
      def getUploadPath(model_instance=None):
          return "%s/" % model_instance.Name
      在Model裏面這樣定義：
      Description=UEditorField('描述',blank=True,imagePath=getUploadPath,toolbars="full")
      這上面model_instance就是當前model的實例對象。
      還須要這樣定義表單對象：
      from  DjangoUeditor.forms import UEditorModelForm
      class UEditorTestModelForm(UEditorModelForm):
            class Meta:
                model=Blog
      特別注意：
         **表單對象必須是繼承自UEditorModelForm，不然您會發現model_instance總會是None。
         **同時在Admin管理界面中，此特性無效，model_instance總會是None。
         **在新建表單中，model_instance因爲尚未保存到數據庫，因此若是訪問model_instance.pk多是空的。由於您須要在getUploadPath處理這種狀況


class UEditorTestModelForm(UEditorModelForm):
    class Meta:
        model=Blog

更多相關文章...

相關標籤/搜索

Python

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。