Django於前端頁面嵌入ckeditor編輯器（非admin)

上一篇文章有提到ckeditor如何建置

這邊會說明如何在自訂的前端頁面顯示

建置方法基本上就是將django form的欄位指定到ckeditor



myhtml.html

{{ my_django_form.my_content |safe}}<br>

<script>

            CKEDITOR.replace( 'my_content', {

                filebrowserUploadUrl:'/ckeditor/upload/',

                filebrowserBrowseUrl:'/ckeditor/browse',

                removePlugins: 'forms',

                removeButtons: 'JustifyBlock',

                toolbarGroups: [

                  { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },

                    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },

                    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },

                    { name: 'forms' },

                    '/',

                    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },

                    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },

                    { name: 'links' },

                    { name: 'insert' },

                    '/',

                    { name: 'styles' },

                    { name: 'colors' },

                    { name: 'tools' },

                    { name: 'others' },

                    { name: 'about' }

                ]

            });

</script>

ckeditor在replace的時候用的id剛好會吻合form在自動產生tag時候的id

所以就放心用吧

filebrowserUploadUrl   => 編輯器如果要有上傳功能的話必須要定義

filebrowserBrowseUrl    =>編輯器如果要能夠有在伺服器選擇已上傳的圖片的話必須定義

removePlugins: 'forms' =>建議remove掉,不然在顯示及編輯上會有一塊form區塊

特別注意

上一篇有提到要在django form 定義my_content fields的attr

這邊就不需要了

前端已經有replace了

前篇文章連結於此