草稿 富文本編輯器

https://github.com/django-ckeditor/django-ckeditor

https://django-ckeditor.readthedocs.io/en/latest/ 

 

 RichTextField, RichTextUploadingField, CKEditorWidget and CKEditorUploadingWidget

from ckeditor_uploader.widgets import CKEditorUploadingWidget

from ckeditor_uploader.fields import RichTextUploadingField

 

pip install django-ckeditor

pip install pillow

  

INSTALLED_APPS = [ 
  'ckeditor',  
  'ckeditor_uploader',]


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


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



from django.db import models

# Create your models here.
from ckeditor_uploader.fields import RichTextUploadingField
class Post(models.Model):
    content = RichTextUploadingField(null=True, blank=True)

#

 

須要指出的是：在開發階段，這樣設置settings.py已經足夠了。可是，到了正式部署你的應用時，你須要設置好STATIC_ROOT和STATIC_URL，並運行manage.py collectstatic命令，該命令會將ckeditor相關的靜態資源拷貝到你的工程下。


使用

如何應用ckeditor

django-ckeditor提供了兩個類：RichTextField和CKEditorWidget，分別用於模型和表單。內容型網站一般在後臺會有一個文章發佈和編輯的界面，若是你想讓該界面擁有一個富文本編輯器，只需按以下方式定義你的django模型：

from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField


# Create your models here.

class Post(models.Model):
    content = RichTextUploadingField(null=True, blank=True)

admin.py

from django.contrib import admin
from app01.models import Post
admin.site.register(Post)

 

啓動應用看看，這時能夠看到文章標題輸入框顯示了富文本編輯框
可是怎麼能夠用的工具那麼少？？？
別急，在settings目錄中增長以下配置便可
文章標題

CKEDITOR_CONFIGS = {
    'default': {
        'skin': 'moono',
        # 'skin': 'office2013',
        'toolbar_Basic': [
            ['Source', '-', 'Bold', 'Italic']
        ],
        'toolbar_YourCustomToolbarConfig': [
            {'name': 'document', 'items': ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates']},
            {'name': 'clipboard', 'items': ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
            {'name': 'editing', 'items': ['Find', 'Replace', '-', 'SelectAll']},
            {'name': 'forms',
             'items': ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
                       'HiddenField']},
            '/',
            {'name': 'basicstyles',
             'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
            {'name': 'paragraph',
             'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',
                       'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',
                       'Language']},
            {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
            {'name': 'insert',
             'items': ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']},
            '/',
            {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},
            {'name': 'colors', 'items': ['TextColor', 'BGColor']},
            {'name': 'tools', 'items': ['Maximize', 'ShowBlocks']},
            {'name': 'about', 'items': ['About']},
            '/',  # put this to force next toolbar on new line
            {'name': 'yourcustomtools', 'items': [
                # put the name of your editor.ui.addButton here
                'Preview',
                'Maximize',

            ]},
        ],
        'toolbar': 'YourCustomToolbarConfig',  # put selected toolbar config here
        # 'toolbarGroups': [{ 'name': 'document', 'groups': [ 'mode', 'document', 'doctools' ] }],
        # 'height': 291,
        # 'width': '100%',
        # 'filebrowserWindowHeight': 725,
        # 'filebrowserWindowWidth': 940,
        # 'toolbarCanCollapse': True,
        # 'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',
        'tabSpaces': 4,
        'extraPlugins': ','.join([
            'uploadimage', # the upload image feature
            # your extra plugins here
            'div',
            'autolink',
            'autoembed',
            'embedsemantic',
            'autogrow',
            # 'devtools',
            'widget',
            'lineutils',
            'clipboard',
            'dialog',
            'dialogui',
            'elementspath'
        ]),
    }
}

 

非admin註冊時

class f(forms.Form):
    t1=fields.CharField(max_length=30)
    # t2=forms.Textarea()



from app01.forms import f
def test(request):
    return render(request,'test.html',{'at':at,'form':f})





網頁
<body>

<form action="">
<div>{{ form.t1 }}</div>
</form>


        <script>
            CKEDITOR.replace( 't1' ,
                {
                    uiColor: '#9AB8F3',




                });
        </script>
</body>

 

網頁頭加載

 <script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>

 圖片上傳遭遇csrf問題

考慮 ajax上傳 

 

如今一個完美的富文本輸入框就完成了，如今能夠在admin頁面愉快的輸入內容豐富的文章了~

如何在前端顯示ck輸入的內容
前端要顯示ck輸入的內容時，在須要使用的頁面頭部引入：

<script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>

光這樣你會發現，顯示出來的時候是原始的包含各類html標籤等符號的內容，此時在變量中增長safe過濾便可，如：{{ content | safe }}。

缺乏上傳1

from ckeditor_uploader.fields import RichTextUploadingField
。。。
class MyModel(models.Model):
    content = RichTextUploadingField(verbose_name=u‘內容‘)

 

 

media 目錄顯示問題  

開發模式下

from django.conf import settings
from django.conf.urls.static import static


urlpatterns = patterns(’’,
# ... the rest of your URLconf goes here ...
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

實際部署nginx配置

     # Django media
        location /media {
                alias /home/lyndon/github/Mathematician/dijkstra/media;
        }

        location /static {
                alias /home/lyndon/github/Mathematician/dijkstra/static;
        }