MarkDown

PHP從入門到放棄實戰班 ============ 1. 官網：<https://ckeditor.com/ckeditor-5/> 2. 參考文件：<https://ckeditor.com/ckeditor-5/demo/> 3. 下載：[https://ckeditor.com/ckeditor-5/online-builder/ ](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 ](http://120.115.2.101/~jaile/uploads/tad_book3/file/ckeditor5.zip)解壓到目錄【 class /ckeditor5】。 5. 可刪除目錄【sample】。 6. post\_form.tpl 最後引入 ```javascript <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. 設置高度 ```markup <style> .ck-editor__editable { min-height: 8rem; } </style> ``` 8. post\_form.tpl 修改大量文字框 ```markup <textarea id="editor" class="form-control" name="directions" >{$content.directions} ``` 9. 顯示在網頁不需轉換HTML特殊符號，修改index.php函數 `find_one()` ```markup function find_one($sn = "") { global $db; /****省略***/ /**********註記以下********/ //$data['directions'] = htmlspecialchars($data['directions'], ENT_QUOTES); } ``` 10. show\_one.tpl ```markup ```