Django使用Djangoueditor富文本編輯器

Django使用Djangoueditor富文本編輯器

——————————————————————————————————————

第一步：

- 下載Djangoueditor壓縮包，將包解壓放到項目目錄文件夾下

- 下載地址：https://github.com/zhangfisher/DjangoUeditor

第二步：

- Python安裝DjangoUeditor： pip install DjangoUeditor

第三步：

配置文件settings.py中註冊DjangoUeditor

代碼：

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01',
    'tinymce',
    'DjangoUeditor',
)

第四步：

配置DjangoUeditor相對應的url，在項目的主url文件中添加

代碼：

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^ueditor/', include('DjangoUeditor.urls')),
]

第五步（後臺使用）：django自帶後臺admin使用

代碼：

from DjangoUeditor.models import UEditorField

class News(models.Model):

    newscontent_djueditor = UEditorField(
        u'內容', height=100, width=500, default='test',
        toolbars='full'

    )

注意：DjangoUeditor需要使用到media路徑的配置******（這個很重要）******

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_DIRS = (
    os.path.join(BASE_DIR, 'media')

)

第六步：

以上步驟實現完成後進入到django後臺頁面找到對應的表添加內容就能看到相應的djangoueditor編輯器的頁面直接進行操作；

第七步（自建後臺頁面）：我這裏使用的是django的表單不是html的表單

代碼：

from DjangoUeditor.forms import UEditorField
class DjangoueditorForm(forms.Form):
    content = UEditorField(
        "", initial="", width=800, height=200,
        toolbars='mini',
        imagePath='ueimages/',  # 上傳圖片存儲的路徑，不設置的話默認是配置文件中MEDIA_ROOT路徑
        filePath='files_ue/'

    )

第八步(視圖函數中添加業務邏輯)：

代碼：

@csrf_exempt
def addnews(request, nid):
    forms = DjangoueditorForm()
    return render(request, 'app01/addnews.html', {'forms': forms})

第九步（前端頁面業務邏輯）：

代碼：

{% block forms_style %}

    {{ forms.media }}  {# 這裏是加載djangoueditor相關的js、css文件，否則頁面不顯示富文本編輯器 #}
{% endblock %}

<form action="" method="post">

<div class="formRow">
    <label>內容:</label>
    <div class="formRight">
        {{ forms }}
    </div>
    <div class="clear"></div>

</div>

</form>

第十步:上傳圖片和文件後富文本編輯器Djangoueditor中圖片和文件不顯示的原因

代碼：

# 添加配置文件這裏如果不添加圖片和文件不顯示

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_DIRS = (
    os.path.join(BASE_DIR, 'media')

)

注意：以上內容是個人使用的隨手記錄， 就是介紹了下簡單的使用

歡迎大家來吐槽，準備好瓜子飲料礦泉水，開整!!!

---------------------------------------------------------------------------------------

搞笑一則：能動手儘量別吵吵