11-2 加入所見即所得編輯器

1. 官網：https://ckeditor.com/ckeditor-5/
2. 參考文件：https://ckeditor.com/ckeditor-5/demo/
3. 下載：https://ckeditor.com/ckeditor-5/online-builder/ 勾選
   • Font background color、Font color、Font size、Font family
   • Highlight
   • Horizontal line
   • Indent block
   • Table cell properties、Table properties
4. 在【 www 】內建目錄【 class 】並將檔案 ckeditor5.zip 解壓到目錄【 class /ckeditor5】。
5. 可刪除目錄【sample】。
6. post_form.tpl 最後引入

   <script src="../class/ckeditor5/build/ckeditor.js"></script>
   <script>ClassicEditor
     .create( document.querySelector( '#editor' ), {
   
       toolbar: {
         items: [
           'heading',
           '|',
           'bold',
           'italic',
           'link',
           'bulletedList',
           'numberedList',
           '|',
           'indent',
           'outdent',
           '|',
           'blockQuote',
           'insertTable',
           'undo',
           'redo',
           'fontBackgroundColor',
           'fontColor',
           'fontSize',
           'fontFamily',
           'highlight',
           'horizontalLine'
         ]
       },
       language: 'zh',
       table: {
         contentToolbar: [
           'tableColumn',
           'tableRow',
           'mergeTableCells'
         ]
       },
       licenseKey: '',
   
     } )
     .then( editor => {
       window.editor = editor;
     } )
     .catch( error => {
       console.error( 'Oops, something gone wrong!' );
       console.error( 'Please, report the following error in the https://github.com/ckeditor/ckeditor5 with the build id and the error stack trace:' );
       console.warn( 'Build id: dygf44s5ml6x-yvi4tsrqc2ex' );
       console.error( error );
     } )
     ;
   </script>

    

7. 設置高度

   <style>
     .ck-editor__editable {
         min-height: 8rem;
     }
   </style>

    

8. post_form.tpl 修改大量文字框

   <textarea id="editor" class="form-control" name="directions" >{$content.directions}</textarea>

    

9. 顯示在網頁不需轉換HTML特殊符號，修改index.php函數 find_one()

   function find_one($sn = "")
   {
       global $db;
   
       /****省略***/
       /**********註記以下********/
       //$data['directions'] = htmlspecialchars($data['directions'], ENT_QUOTES);
   
   }

10.  show_one.tpl

    <div class="row">
            <label class="col-sm-3 text-right">
                描述
            </label>
            <div class="col-sm-9">
                {$content.directions}
            </div>
        </div>