# CKeditor_實作與詳細 ----- ###### tags: `CKeditor` `實作` [CKEditor 3 JavaScript API Documentation](https://docs-old.ckeditor.com/ckeditor_api/symbols/CKEDITOR.config.html#.image_previewText) [CKFinder 3 – PHP連接器文檔](https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_backends) [富文本编辑器 CKeditor 配置使用](https://www.cnblogs.com/Tirisfal/p/5548424.html) [\[筆記\]CKEditor加上CKFinder上傳圖檔更方便](https://pjchender.blogspot.com/2015/11/ckeditorckfinder.html) [CSDN博客图片服务器异常的艰辛排查与处理-上传文件时发生 HTTP 错误（错误代码：502）的解决办法](https://blog.csdn.net/Hello_World_QWP/article/details/88637379) [通过运营界面上传图片失败，浏览器提示上传文件时发生HTTP错误（错误代码：500）](https://blog.csdn.net/CaoMei_HuaCha/article/details/80866929) [CKEditor开启上传本地图片功能,去掉图片上传预览框里面的英文字母](https://blog.csdn.net/li_haijiang/article/details/95306016) [\[教學\] ckeditor 4.3 開啟上傳圖檔與瀏覽檔案功能](https://blog.sig.tw/2014/03/ckeditor-file-image-upload-browser.html) [CKEditor 上傳圖片](https://www.dotblogs.com.tw/chichiBlog/2020/05/13/122030) - 使用方式 - 配置設定 - 刪除預覽文字 - 500錯誤 - 預覽圖片無法顯示 - - 圖片 ---- 文本編輯器在中國用語中又稱 **富文本編輯器** 所以有時要找資料比較適合用富文本編輯器去查找 ## 使用方式 - 引用CKeditor - 使用CKeditor 最好都在`head`前 - 等網頁load完後 直接執行 ```javascript= <script type="text/javascript" src="../../ckeditor4/ckeditor.js"></script> <script type="text/javascript" src="../../ckfinder/ckfinder.js"></script> <script type="text/javascript"> window.onload = function(){ CKFinder.setupCKEditor(); CKEDITOR.replace( 'actDescript', { customConfig : '' }); CKEDITOR.replace( 'precautions', { customConfig : '' }); CKEDITOR.config.image_previewText = ' '; CKEDITO.config.filebrowserImageBrowseUrl = './event_register/storeadmin/ckfinfile/' } </script> </head> ``` 將元素在PHP檔案中 echo '元素' ```htmlembedded= <!--input type="text" id="'.$value.'" name="'.$value.'" value="" class="form-control" readonly="readonly"--> <textarea id="actDescript" name="actDescript" style="width:100%;height:300px;"></textarea> <textarea id="precautions" name="precautions" style="width:100%;height:300px;"></textarea> ``` ## 配置設定 下方圖可以參考 ### 預覽框文字刪除 第一種方法<<<<<<<<<<<<<<<<<<<<<<<<<< 打開 `ckeditor/plugins/image/dialogs/image.js`文件，搜索“b.config.image_previewText”(b.config.image_previewText||’’) 或是 “d.config.image_previewText” 單引号中的内容全删了，注意別删多了。(由于ckeditor的很多js文件都是壓縮過的，格式很难看，很容易删错，所以不推荐此种方法) ```javascript= (d.config.image_previewText||"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus ")+ ``` 第二種方法 打開 `config.js`文件，加入下面一句话 `config.image_previewText=' ';` //预览区域显示内容 **但使用公司的ckeditor4都無法使用第二種方法** 特別是`\storeadmin\ckeditor4\config.js`檔案 似乎一直沒吃到這個設定檔 ```javascript= // 這個檔案似乎沒吃到 // config.image_previewText = ' '; 沒有作用 // 但配置在 activity_mod.php 中配置有成功 // config.js 沒有成功引入 // 但image.js 有成功引入 CKEDITOR.editorConfig = function(config) { config.shiftEnterMode = CKEDITOR.ENTER_P; //shift+enter實現換段落 config.enterMode = CKEDITOR.ENTER_BR; //enter實現換行 // 圖片資訊面板預覽區內容的文字內容，預設顯示CKEditor自帶的內容 // 1. 刪除image.js中 d.config.image_previewText 引號內文字 確認可以 // 2. 在image.js找到 id:'Upload',hidden:true 將 true 改成 false // 如果顯示是hidden:!0,直接改成0即可 // config.image_previewText = ' '; // 配置在需要使用CKEDITOR的畫面之檔案 config.toolbar = [ { name: 'document', items: [ 'Source','Preview'] }, { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, { name: 'forms', items: [ 'Form' ] }, { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] }, { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] }, { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] }, '/', { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] }, { name: 'colors', items: [ 'TextColor', 'BGColor' ] } ]; // config.filebrowserImageBrowseUrl = '../../ckfinder/ckfinder.html?Type=Images'; // config.filebrowserImageUploadUrl = '../../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';//可上傳圖檔 // config.filebrowserUploadUrl = '../../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'; //可上傳一般檔案 }; ``` 第三種方法 在使用ckeditor 的頁面直接寫上設定檔 ```javascript= <script type="text/javascript" src="../../ckeditor4/ckeditor.js"></script> <script type="text/javascript" src="../../ckfinder/ckfinder.js"></script> <script type="text/javascript"> window.onload = function(){ CKFinder.setupCKEditor(); CKEDITOR.replace( 'actDescript', { customConfig : '' }); CKEDITOR.replace( 'precautions', { customConfig : '' }); CKEDITOR.config.image_previewText = ' '; // 這裡直接加上 CKEDITO.config.filebrowserImageBrowseUrl = './event_register/storeadmin/ckfinfile/' } </script> ``` **預覽框的文字確定消失** ![](https://i.imgur.com/YxtBxHf.png) 原設定`\storeadmin\ckeditor4\config.js`檔案↓ ```javascript= // 這個檔案似乎沒吃到 // config.image_previewText = ' '; 沒有作用 // 但配置在 activity_mod.php 中配置有成功 // config.js 沒有成功引入 // 但image.js 有成功引入 CKEDITOR.editorConfig = function(config) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.shiftEnterMode = CKEDITOR.ENTER_P; //shift+enter實現換段落 config.enterMode = CKEDITOR.ENTER_BR; //enter實現換行 // 圖片資訊面板預覽區內容的文字內容，預設顯示CKEditor自帶的內容 // 1. 刪除image.js中 d.config.image_previewText 引號內文字 確認可以 // 2. 在image.js找到 id:'Upload',hidden:true 將 true 改成 false // 如果顯示是hidden:!0,直接改成0即可 // config.image_previewText = ' '; // 配置在需要使用CKEDITOR的畫面之檔案 config.toolbar = [ { name: 'document', items: [ 'Source','Preview'] }, { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, { name: 'forms', items: [ 'Form' ] }, { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] }, { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] }, { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] }, '/', { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] }, { name: 'colors', items: [ 'TextColor', 'BGColor' ] } ]; // config.filebrowserImageBrowseUrl = '../../ckfinder/ckfinder.html?Type=Images'; // config.filebrowserImageUploadUrl = '../../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';//可上傳圖檔 // config.filebrowserUploadUrl = '../../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'; //可上傳一般檔案 /* 原始 config.toolbar = [ { name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] }, { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] }, { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] }, '/', { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] }, { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] }, { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] }, '/', { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] }, { name: 'colors', items: [ 'TextColor', 'BGColor' ] }, { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] }, { name: 'about', items: [ 'About' ] } ]; */ }; ``` ## 圖片↓ ![](https://i.imgur.com/rru76Ti.png)