Django 추가 ckeditor 풍부한 텍스트 편집기

원본 코드https://github.com/django-ckeditor/django-ckeditor
pip를 통해 설치합니다.

pip3 install django-ckeditor
pip3 install Pillow

settings에서.py의 INSTALLEDAPPS에 ckeditor 및 ckeditor 추가uploader 두 응용 프로그램.


INSTALLED_APPS = (
    #
    'ckeditor',
    'ckeditor_uploader'
)

settings에서.py에서 ckeditor 관련 설정을 진행합니다.

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,
    },  
}

다음은 urls.py에ckeditor와 관련된 URL을 설정합니다.

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)  #

마지막으로 풍부한 텍스트 편집기를 사용해야 하는 Django 앱의 디렉터리에 있는 모델을 수정합니다.py.그 중에서 RichTextField는 TextField의 모든 매개 변수를 가지고 있고 다른 매개 변수도 가지고 있다.

from ckeditor.fields import RichTextField
#
content = RichTextField() #                 RichTextField

from ckeditor_uploader.fields import RichTextUploadingField
    content = RichTextUploadingField(verbose_name=u'  ')#

templates에서 내용 사용하기

{{ content | safe }}

django는ckeditor를 사용하여 그림을 업로드합니다
1. 모델 클래스에서 필드를 풍부한 텍스트 형식으로 설정합니다. 여기서 주의해야 할 것은 RichTextUploadingField입니다. 그림을 업로드할 수 있도록 RichTextField와 구분해야 합니다.

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)

2. 프로젝트 중ckeditor의 설치 및 설정

pip install django-ckeditor

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

#       ckeditor  
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',  #      
        'height': 300,  #      
        'width': 300,  #     
    },
}

　CKEDITOR_UPLOAD_PATH ='# 사진ckeditor 파일 업로드 경로, 여기에 칠우 클라우드 스토리지를 사용하고
2. html 페이지에textarea 태그 추가


</div></code></pre> 
  <p><strong>3、       html   JS ckeditor JS  ，  django installed_app      ，               /home/python/.virtualenvs/django_1.11.16_py3/lib/python3.5/site-packages/ckeditor/static/ckeditor/ckeditor/</strong></p> 
  <pre><code> js       ，       live-server            ，  js</code></pre> 
  <pre><code><script type="text/javascript" src="js/spit-submit.js"/>
<script src="http://127.0.0.1:8000/static/ckeditor/ckeditor/ckeditor.js"/> </code></pre> 
  <p><strong>4、 vue   mounted     </strong></p> 
  <pre><code>let vm = new Vue({
　　...
    mounted:function () {
        CKEDITOR.replace('editor_id', { filebrowserUploadUrl:'http://127.0.0.1:8000/ckeditor/upload/' }); //  id              ，              ，       live-server   ，              
    },
});</code></pre> 
  <p><strong>5、       ，</strong><strong>'ckeditor_uploader.urls'           csrf    ，                 ，ckeditor      django-admin       ，django-admin            ，                  django-restframework APIVIew，</strong></p> 
  <pre><code>　　 # 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())),  #             </code></pre> 
  <p><strong>6、            ，  permission_classes         </strong></p> 
  <pre><code>#     
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):
            try:
                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)</code></pre> 
  <h1> .         ？</h1> 
  <p>CKEditor                  ，         ，   ckeditor      config.js.<br/>  CKEDITOR.editorConfig = function( config )            "{ }"          ：</p> 
  <pre><code>config.font_names = config.font_names + '    ;  ;  ;  _GB2312;  _GB2312;  ;  ;' ;
</code></pre> 
  <p>  ，        ！</p> 
  <h1> .               ？              ？</h1> 
  <p>  ，     ckeditor/contents.css     。</p> 
  <pre><code>body
{
        /* Font */
        /*font-family: sans-serif, Arial, Verdana, "Trebuchet MS";*/
        font-family:  ;
        font-size: 16px;</code></pre> 
  <p>  ，    ：</p> 
  <p>   :        ，   body       。 .cke_editor           ；</p> 
  <p>   :   config.js  ，       :</p> 
  <pre><code>config.fontSize_defaultLabel = '16px';
config.font_defaultLabel = '  ';</code></pre> 
  <h1> . CKEditor        ？</h1> 
  <p>     ，      ，      ，         ？     Ubuntu        ，     ，          ，        。</p> 
  <p>         ， server ，   gvim   config.js  。  ， :set fileencoding       ，  utf-8  ，  。root   ， vim        :set fileencoding=utf-8 ，      ，    。</p> 
  <h1> .      ？</h1> 
  <p>      code snippet  pbckcode，      。  code snippet     。</p> 
  <p>               。      ，django_ckeditor-5.2.2-py2.7.egg      code snippet  ，         ，            。    settings.py   ，  CKEDITOR_CONFIGS。</p> 
  <pre><code>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",
    },
}</code></pre> 
  <p>     code snippet     ， ckeditor/config.js ，    ，</p> 
  <pre><code>CKEDITOR.editorConfig = function( config ) {
	...
	config.codeSnippet_theme = 'school_book';
};</code></pre> 
  <p>  ，       ，                 ，        。             js   css  。</p> 
  <p>1.Refer to codesnippet   Target Page，http://docs.ckeditor.com/#!/guide/dev_codesnippet</p> 
  <p>To see the highlighter styles on the target page where CKEditor content is displayed, you will need to load the highlight.js script and theme's stylesheet on this page. You can either reuse a copy of highlight.js placed in the ckeditor/plugins/codesnippet/lib/highlight directory or download your own copy from the highlight.js download page.</p> 
  <p>Attach it to the </p> section of your page. The following code will load the highlight.js library and the stylesheet for the default theme: 
  <pre><code>
    ...
    <link href="ckeditor/plugins/.../styles/default.css" rel="stylesheet"/>
    <script src="ckeditor/plugins/.../highlight.pack.js"/>
</code></pre> 
  <p>Inititalize highlight.js on all </p><pre><code> .. </code></pre> elements with the following code: 
  <pre><code><script>hljs.initHighlightingOnLoad();</script></code></pre> 
  <p>  ，    ，</p> 
  <p>a.    /blog/base.html   ，</p> 
  <pre><code>{% 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"/>
   ...
{% endblock %}</code></pre> 
  <p>b.    /blog/detail.html   ，</p> 
  <pre><code>{% block inner_extra_js %}
   ...
   <script>hljs.initHighlightingOnLoad();</script>
{% endblock %}</code></pre> 
  <p>c.          css，   default.css     static\ckeditor\ckeditor\plugins\codesnippet\lib\highlight\styles    css    ，  zenburn.css</p> 
  <p>        ，     https://highlightjs.org/static/demo/.</p> 
  <p>d.highlight.js     ，    ，        。</p> 
  <p>https://highlightjs.org/usage/</p> 
  <p>e.          js，    。</p> 
  <h1> .Code Snippet       ，      ，     ，    ？</h1> 
  <p>  CSS     。     highlight.js   zenburn.css，    ，</p> 
  <pre><code>.hljs {
  ...
  white-space: pre-wrap !important;
}</code></pre> 
  <p>   !important   ，       ，  css      ，    。</p> 
  <p>Refer to: http://www.ieclipse.cn/en/2016/07/18/Web/Hexo-dev-highlight/index.html。</p> 
  <h1> .      ，        ，        ？</h1> 
  <h1> .Tab    ，   Tab      ，    ？</h1> 
  <pre><code>config.tabSpaces = 0;
</code></pre> 
  <pre><code>       TAB  ，        。   0 ，        。</code></pre> 
  <h1> .         ，    ？</h1> 
  <p>OL/UL CSS   ，padding-left   ，    ，            。</p> 
  <p>            ？     CKEditor         ？</p> 
  <h1> .         /           ？</h1> 
  <p>    CSS   ，    ？</p> 
  <h1> .       ，       ？</h1> 
  <pre><code>CKEDITOR_IMAGE_BACKEND = 'PIL'
or
CKEDITOR_IMAGE_BACKEND = 'pillow'</code></pre> 
  <p> code  ，     'pillow'        。PIL ckeditor  dummy_backend,    py       ，    False。</p> 
  <pre><code>def should_create_thumbnail(file_path):
    return False</code></pre> 
  <p>      ，  storage       。</p> 
  <pre><code>def should_create_thumbnail(file_path):
    image = default_storage.open(file_path)
    try:
        Image.open(image)
    except IOError:
        return False
    else:
        return utils.is_valid_image_extension(file_path)</code></pre> 
  <pre><code>ckeditor_uploader\ image\ pillow_backend.py should_create_thumbnail file_path is  uploads/keaiduo/2017/10/22/404test.png , default_storage is  <qiniustorage.backends.qiniumediastorage object="" at="">
ckeditor_uploader\ image\ pillow_backend.py should_create_thumbnail IOError
</qiniustorage.backends.qiniumediastorage></code></pre> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Rails Turbolinks를 페이지 단위로 비활성화하는 방법

원래 Turobolinks란? Turbolinks는 링크를 생성하는 요소인 a 요소의 클릭을 후크로 하고, 이동한 페이지를 Ajax에서 가져옵니다. 그 후, 취득 페이지의 데이터가 천이 전의 페이지와 동일한 것이 있...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Django 추가 ckeditor 풍부한 텍스트 편집기

좋은 웹페이지 즐겨찾기