Django添加ckeditor富文本编辑器开发者社区

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

Django添加ckeditor富文本编辑器

pip3 install django-ckeditor
pip3 install Pillow

INSTALLED_APPS = (
    'ckeditor',
    'ckeditor_uploader'
)

CKEDITOR_JQUERY_URL = 'https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'  
MEDIA_URL = '/media/'  
MEDIA_ROOT = os.path.join(BASE_DIR,'media/')  
CKEDITOR_UPLOAD_PATH = 'uploads/'  
CKEDITOR_IMAGE_BACKEND = 'pillow'  
CKEDITOR_CONFIGS = {  
    'default': {  
        'toolbar': 'full',  
        'height':600,
        'width':800,
}

from django.conf import settings
from django.conf.urls.static import static
from django.conf.urls import url,include
urlpatterns = [
      url(r'^ckeditor/', include('ckeditor_uploader.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)  # 没有这一句无法显示上传的图片

from ckeditor.fields import RichTextField
content = RichTextField() # 将需要使用富文本编辑器的字段改为RichTextField

from ckeditor_uploader.fields import RichTextUploadingField
    content = RichTextUploadingField(verbose_name=u'内容')#可以上传图片的

{{ content | safe }}

from ckeditor_uploader.fields import RichTextUploadingField
class spit_model(models.Model):
    """模型类"""
    user = models.ForeignKey(User, on_delete=models.CASCADE,verbose_name='吐槽发布者')
    content = RichTextUploadingField(verbose_name='吐槽内容', max_length=200)

pip install django-ckeditor

INSTALLED_APPS = [
　　'ckeditor',  # 富文本编辑器
　　'ckeditor_uploader',  # 富文本编辑器上传图片模块
]

# 富文本编辑器ckeditor配置
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',  # 工具条功能
        'height': 300,  # 编辑器高度
        'width': 300,  # 编辑器宽
}

<div>
<textarea  id="editor_id"></textarea>
</div>

在js路径前加上域名，否则服务器会在live-server的默认端口下进行网络通讯，查找js

<script type="text/javascript" src="js/spit-submit.js"></script>
<script src="http://127.0.0.1:8000/static/ckeditor/ckeditor/ckeditor.js"></script>

let vm = new Vue({
    mounted:function () {
        CKEDITOR.replace('editor_id', { filebrowserUploadUrl:'http://127.0.0.1:8000/ckeditor/upload/' }); // 将id选择器的文本域替换成为富文本，并手动设置文件上传的请求路径，默认请求路径为live-server的路径，必须设置为服务器的域名和端口
});

　　 # url(r'^ckeditor/', include('ckeditor_uploader.urls')),  # 为富文本编辑器添加总路由
    # url(r'^ckeditor/upload/', ImageUploadView.as_view()),  # 为富文本编辑器添加总路由
    # url(r'^ckeditor/upload/', csrf_exempt(ImageUploadView.as_view())),  # 为富文本编辑器添加总路由
    url(r'^ckeditor/', csrf_exempt(ImageUploadView.as_view())),  # 为富文本编辑器添加总路由

# 配置路由
urlpatterns = [
    url(r'^upload/$', ImageUploadView.as_view()),
from ckeditor_uploader import image_processing,utils
from django.conf import settings
from django.http import HttpResponse
from django.http import JsonResponse
from rest_framework.permissions import IsAuthenticated
from rest_framework.views import APIView
from django.utils.html import escape
class ImageUploadView(APIView):
    permission_classes = [IsAuthenticated]
    http_method_names = ['post']
    def post(self, request, **kwargs):
        Uploads a file and send back its URL to CKEditor.
        uploaded_file = request.FILES['upload']
        backend = image_processing.get_backend()
        ck_func_num = request.GET.get('CKEditorFuncNum')
        if ck_func_num:
            ck_func_num = escape(ck_func_num)
        # Throws an error when an non-image file are uploaded.
        if not getattr(settings, 'CKEDITOR_ALLOW_NONIMAGE_FILES', True):
                backend.image_verify(uploaded_file)
            except utils.NotAnImageException:
                return HttpResponse("""
                    <script type='text/javascript'>
                    window.parent.CKEDITOR.tools.callFunction({0}, '', 'Invalid file type.');
                    </script>""".format(ck_func_num))
        saved_path = self._save_file(request, uploaded_file)
        if len(str(saved_path).split('.')) > 1:
            if(str(saved_path).split('.')[1].lower() != 'gif'):
                self._create_thumbnail_if_needed(backend, saved_path)
        url = utils.get_media_url(saved_path)
        if ck_func_num:
            # Respond with Javascript sending ckeditor upload url.
            return HttpResponse("""
            <script type='text/javascript'>
                window.parent.CKEDITOR.tools.callFunction({0}, '{1}');
            </script>""".format(ck_func_num, url))
        else:
            retdata = {'url': url, 'uploaded': '1',
                       'fileName': uploaded_file.name}
            return JsonResponse(retdata)

config.font_names = config.font_names + '微软雅黑;宋体;黑体;仿宋_GB2312;楷体_GB2312;隶书;幼圆;' ;

body
        /* Font */
        /*font-family: sans-serif, Arial, Verdana, "Trebuchet MS";*/
        font-family:黑体;
        font-size: 16px;

config.fontSize_defaultLabel = '16px';
config.font_defaultLabel = '黑体';

CKEDITOR_CONFIGS = {
   'more': {
        'toolbar': (
            ['Source','-','Templates','Preview','Save'],
            ['Maximize','CodeSnippet'],
            ['TextColor','BGColor'],
            ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
            ['Cut','Copy','Paste','Print'],
            ['Undo','Redo','-','SelectAll','Find','Replace'],
            ['Styles','Format','Font','FontSize'],
            ['NumberedList','BulletedList','Blockquote'],
            ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
            ['Link','Unlink','Anchor'],
            ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
        'width' : '96%',
        'extraPlugins': "codesnippet",
}

CKEDITOR.editorConfig = function( config ) {
	config.codeSnippet_theme = 'school_book';
};

<head>
    <link href="ckeditor/plugins/.../styles/default.css" rel="stylesheet">
    <script src="ckeditor/plugins/.../highlight.pack.js"></script>
</head>

<script>hljs.initHighlightingOnLoad();</script>

{% block extra_link %}
   <link href="{% static 'ckeditor/ckeditor/plugins/codesnippet/lib/highlight/styles/zenburn.css' %}" rel="stylesheet">
{% endblock %}
{% block extra_js %}
   <script src="{% static 'ckeditor/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js' %}" type="text/javascript"></script>
{% endblock %}

{% block inner_extra_js %}
   <script>hljs.initHighlightingOnLoad();</script>
{% endblock %}

.hljs {
  white-space: pre-wrap !important;
}

config.tabSpaces = 0;

设置当用户键入TAB键时，鼠标走过的空格数。当值为0时，焦点将移出编辑框。

CKEDITOR_IMAGE_BACKEND = 'PIL'
CKEDITOR_IMAGE_BACKEND = 'pillow'

def should_create_thumbnail(file_path):
    return False

def should_create_thumbnail(file_path):
    image = default_storage.open(file_path)

Django添加ckeditor富文本编辑器

Django添加ckeditor富文本编辑器

django使用ckeditor上传图片

一. 如何添加中文字体？

二. 如何设置默认选择的字体及大小？如何设置默认使用的字体及大小？

三. CKEditor中文字体名称乱码？

四.如何高亮代码？

五.Code Snippet添加的代码超长，不会自动换行，撑破了页面，如何解决？

六.添加后的文章，在显示全文的时候，如何合理自动换行？

七.Tab键的使用，默认按Tab会移出编辑框，如何解决？

八.使用序列标号的时候，页面溢出？

九.前端页面显示的字体/大小和后端设置的不一样？

十.使用七牛云存储，缩略图无法生成？