如何用CKEditor 4.25.1-tls , CSS 完成 圖片自動RWD(可適應式網站)

woff

現在看到越來越多論壇裡的圖片都沒有設定width heigh

但是還是能自動RWD(可適應式網站)

目前後臺用的是CKEditor 4.25.1-tls

於是自己嘗試了一下

前台CSS的content加入

1. max-width: 100% !important; /* 限制圖片最大寬度不超過外層容器 */
   
2. height: auto !important;    /* 高度依比例自動縮放，避免圖片變形 */

複製代碼

後臺CKEditor 4.25.1-tls須改 config.js

JavaScript中加入

1. // 監聽貼上事件，自動把 img 標籤內的 width 和 height 屬性或 style 拔掉
   
2.         config.onPaste = function(evt) {
   
3.                 let data = evt.data.dataValue;
   
4.                 if (data) {
   
5.                         // 移除 width="..." 和 height="..."
   
6.                         data = data.replace(/<img[^>]*>/gi, function(match) {
   
7.                                 return match.replace(/\s+(width|height)="\d+"/gi, '')
   
8.                                             .replace(/width:\s*\d+px;?/gi, '')
   
9.                                             .replace(/height:\s*\d+px;?/gi, '');
   
10.                         });
    
11.                         evt.data.dataValue = data;
    
12.                 }
    
13.         };

複製代碼

JavaScript最底下加入

1. // 確保事件能綁定到編輯器實例上
   
2. CKEDITOR.on('instanceReady', function(ev) {
   
3.         ev.editor.on('paste', ev.editor.config.onPaste);
   
4. });

複製代碼

完成如

1. CKEDITOR.editorConfig = function( config ) {
   
2.         // Define changes to default configuration here. For example:
   
3.         // config.language = 'fr';
   
4.         // config.uiColor = '#AADC6E';
   
5. 
   
6. 
   
7.         // Remove some buttons provided by the standard plugins, which are
   
8.         // not needed in the Standard(s) toolbar.
   
9.         config.removeButtons = 'Underline,Subscript,Superscript';
   
10. 
    
11.         // Set the most common block elements.
    
12.         config.format_tags = 'p;h1;h2;h3;pre';
    
13. 
    
14.         // Simplify the dialog windows.
    
15.         config.removeDialogTabs = 'image:advanced;link:advanced';
    
16.         baseurl = 'https://'+window.location.hostname;
    
17.         config.filebrowserBrowseUrl = baseurl+'/includes/ckfinder/ckfinder.html';
    
18.         config.filebrowserImageBrowseUrl = baseurl+'/includes/ckfinder/ckfinder.html?Type=Images';
    
19.         config.filebrowserFlashBrowseUrl = baseurl+'/includes/ckfinder/ckfinder.html?Type=Flash';
    
20.         config.filebrowserUploadUrl = baseurl+'/includes/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'; //可上傳一般檔案
    
21.         config.filebrowserImageUploadUrl = baseurl+'/includes/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';//可上傳圖檔
    
22.         config.filebrowserFlashUploadUrl = baseurl+'/includes/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';//可上傳Flash檔案
    
23.         
    
24.         // ==========================================
    
25.         // 新增以下設定：允許貼上不帶寬高的標籤，並在貼上時過濾寬高
    
26.         // ==========================================
    
27.         config.allowedContent = true;
    
28. 
    
29.         // 監聽貼上事件，自動把 img 標籤內的 width 和 height 屬性或 style 拔掉
    
30.         config.onPaste = function(evt) {
    
31.                 let data = evt.data.dataValue;
    
32.                 if (data) {
    
33.                         // 移除 width="..." 和 height="..."
    
34.                         data = data.replace(/<img[^>]*>/gi, function(match) {
    
35.                                 return match.replace(/\s+(width|height)="\d+"/gi, '')
    
36.                                             .replace(/width:\s*\d+px;?/gi, '')
    
37.                                             .replace(/height:\s*\d+px;?/gi, '');
    
38.                         });
    
39.                         evt.data.dataValue = data;
    
40.                 }
    
41.         };
    
42. 
    
43. };
    
44. 
    
45. // 確保事件能綁定到編輯器實例上
    
46. CKEDITOR.on('instanceReady', function(ev) {
    
47.         ev.editor.on('paste', ev.editor.config.onPaste);
    
48. });

複製代碼

完成

展示圖：

CKEditor CSS RWD

展示網址：https://pipe.netyea.com/

文章出處：NetYea 網頁設計