CKeditor 部署

codesnippet, markdown 2018-09-18 23:03:59
javascript CKEditor

我在Laravel 5.6 部署 CKeditor,此篇僅做最基本快速部署的筆記  

 

Step1: Download CKeditor

到 官方網站 下載 Fullpage 的 CKeditor (with easy Image)

 


20181029 更新:

後來我發現easy Image是付費的功能,不付費會有時間和上傳圖片數量的限制

所以建議還是一開始就不要勾選那個easy Image

之後會有介紹透過CKFinder讓CKEditor有上傳圖片的功能


 

Step2: Put to asset folder

放到 laravel project 的 public 資料夾下 ( ex: public/plugins/ckeditor )

 

Step3: codesnippet, markdown

感覺未來我會希望我的 CKeditor 能有程式碼片段及支援 markdown 的功能

於是我到官網另外下載了兩個plugins

  1. For codesnippet ( 連結 )
  2. For markdown ( 連結 )

這兩個plugins下載完放到原 ckeditor 底下的 plugins 資料夾底下即可

( i.e. public/plugins/ckeditor/plugins/ )

 

Step4: Edit config file as follow

CKEDITOR.editorConfig = function( config ) {
    config.tabSpaces = 4;
    config.extraPlugins= 'easyimage,codesnippet,markdown';
    config.codeSnippet_theme = "monokai";
};

    第一行是使 CKeditor 可以吃 tab spaces,並且指定為四個空格,才不會想寫一些程式碼片段時按下 tab時,cursor focus 到下一個欄位或是button

    第二行是使 CKeditor 載入一些我們額外下載的套件: codesnippet, markdown

    最後第三行只是要設定我的 css style of codesnippet 為 monokai

 

Step5:  Link css js to layouts

<script src="{{ asset('plugins/ckeditor/ckeditor.js') }}"></script>
<script src="{{ asset('plugins/ckeditor/config.js') }}"></script>
<script src="{{ asset('plugins/ckeditor/adapters/jquery.js') }}"></script> {{-- ckeditor jquery adapter  --}}
<script src="{{ asset('plugins/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js') }}"></script>

{{-- CKeditor codesnippet monokai css --}}
<link rel="stylesheet" href="{{ asset('plugins/ckeditor/plugins/codesnippet/lib/highlight/styles/monokai.css') }}">

 

Step6: 應用

把 input 變成 ckeditor 的方法大概有以下兩種

  1. 基本款: 此方法的參數只能為 id 

    CKEDITOR.replace('editor_id');
    // 對應的input需要設定對應的 id <input id="editor_id" />
    

     

  2. CKeditor jquery adapter: 若想用jquery的方式抓取特定input,那麼上一步驟須確實引入 ckeditor jquery adapter 

    $('.editor_class').ckeditor();
    // <input class='editor_class' />
    

     

然後欲存取ckeditor的value,用 jquery 的 .val() 即可

至少我這樣取好像還沒有出過問題,不像另一款editor tinymce 還要用getContent()

 

Step 7: Apply codesnippet css style to front page

這最後也是我卡了一陣子的問題

就是當我把存在DB的內容顯示到前端時

// laravel 顯示HTML內容要用 {!! !!}
{!! $blog->content !!}

我的程式碼片段並沒有monokai的黑底style,但是我的css明明也都link進來了呀

後來才找到這個解決方法

<script>
// CKeditor css apply to front page
hljs.initHighlightingOnLoad();

// Or you can write in page ready function as follow
$(function(){
    $('pre code').each(function (i, block) {
      hljs.highlightBlock(block);
    });
});

參考來源 : https://stackoverflow.com/questions/51325778/hljs-inithighlightingonload-does-not-render-the-page-directly

 

 

以上, By HD


FB 留言
  • 頭香!
    do my research paper http://essay2y.com/ write essays for me Qsubln dmtmwv
    By Qtzpgj 2021/01/29 00:23
  • 2 樓
    assignment company http://essay2y.com/ thesis writers Hisyin krygla
    By Yggtnb 2021/01/29 05:59
  • 3 樓
    affordable essays http://essay2y.com/ pay for essays Tdrwoz mqfrjk
    By Hnkhxc 2021/01/29 06:53