JSP 頁面引入 UEditor 後，編輯器僅渲染為一個簡陋的 ``，**工具欄、按鈕、對話框全部缺失**，控制台報 `SyntaxError: JSON.parse: unexpected character` 或配置加載失敗。</p> <h2>根本原因</h2> <p>UEditor 核心配置文件 **`jsp/config.json` (或 `php/config.json` 等后端語言對應目錄)** **不支持註釋**。<br> 默認配置文件中包含大量**中文註釋** (如 `/* 這裡配置... */`)，導致前端 `UE.getEditor` 初始化時 `JSON.parse` 失敗，配置對象為空，編輯器退化為基礎文本域。</p> <h2>解決方案：清理 config.json 註釋</h2> <ol> <li>找到項目中 UEditor 后端配置文件：<br> `<webapp>/ueditor/jsp/config.json` (或對應后端語言目錄)。</li> <li>使用**支持 JSON 格式化的編輯器** (VS Code、Notepad++, Sublime Text) 打開。</li> <li>**刪除所有註釋** (以 `/* ... */` 或 `//` 開頭的行)。</li> <li>確保文件為**合法純 JSON 格式** (雙引號鍵值、無尾隨逗號)。</li> <li>保存，重新部署項目，清除瀏覽器緩存測試。</li> </ol> <h2>標準 config.json 精簡示例 (無註釋)</h2> <pre><code>{ "imageActionName": "uploadimage", "imageFieldName": "upfile", "imageMaxSize": 2048000, "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "imageCompressEnable": true, "imageCompressBorder": 1600, "imageInsertAlign": "none", "imageUrlPrefix": "", "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlActionName": "uploadscrawl", "scrawlFieldName": "upfile", "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlMaxSize": 2048000, "scrawlAllowFiles": [".bmp", ".png", ".jpg", ".jpeg", ".gif"], "catcherActionName": "catchimage", "catcherFieldName": "source", "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "videoActionName": "uploadvideo", "videoFieldName": "upfile", "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", "videoMaxSize": 102400000, "videoAllowFiles": [".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], "fileActionName": "uploadfile", "fileFieldName": "upfile", "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", "fileMaxSize": 51200000, "fileAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"], "imageManagerActionName": "listimage", "imageManagerListPath": "/ueditor/jsp/upload/image/", "imageManagerListSize": 20, "imageManagerUrlPrefix": "", "imageManagerInsertAlign": "none", "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "fileManagerActionName": "listfile", "fileManagerListPath": "/ueditor/jsp/upload/file/", "fileManagerListSize": 20, "fileManagerUrlPrefix": "", "fileManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"] }</code></pre> <h2>JSP 頁面正確引入模板</h2> <pre><code><%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <script type="text/javascript" src="ueditor/ueditor.config.js"></script> <script type="text/javascript" src="ueditor/ueditor.all.min.js"></script> <script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script> </head> <body> <script id="editor" type="text/plain" style="width:100%;height:400px;"></script> <script type="text/javascript"> var ue = UE.getEditor('editor', { UEDITOR_HOME_URL: 'ueditor/', // 關鍵：指定 UEditor 根目錄 serverUrl: 'ueditor/jsp/controller.jsp' // 后端統一處理接口 }); </script> </body> </html></code></pre> <h2>避坑檢查清單</h2> <table border="1" cellpadding="6"> <thead><tr><th>檢查項</th><th>正確狀態</th></tr></thead> <tbody> <tr><td>config.json 編碼</td><td>UTF-8 無 BOM</td></tr> <tr><td>config.json 格式</td><td>純 JSON，無任何註釋、無尾隨逗號</td></tr> <tr><td>UEDITOR_HOME_URL</td><td>指向 ueditor/ 目錄 (以 / 結尾)</td></tr> <tr><td>serverUrl</td><td>指向后端控制器 (如 controller.jsp)</td></tr> <tr><td>上傳目錄權限</td><td>Tomcat 進程對 upload 目錄有讀寫權限</td></tr> <tr><td>瀏覽器控制台</td><td>無 404 (JS/CSS/配置)、無 JS 錯誤</td></tr> </tbody> </table> <h2>總結</h2> <p>UEditor JSP 版「只有輸入框無工具欄」99% 是 **`config.json` 含中文註釋導致 JSON 解析失敗**。**刪除配置文件所有註釋，確保純 JSON 格式** 即可完美解決。配合正確設置 `UEDITOR_HOME_URL` 和 `serverUrl`，編輯器將完整加載工具欄、上傳、對話框等全部功能。</p> <div class="qcxs_ie_he"></div> </div> <div class="akevx_own"> <script language='javascript' src='/ad/p.js'></script></div> <div class="akevx_mj"> </div> <div class="qcxs_ie_he"></div> <ol class="qmsbvx_hsb ovv_hex"> <li>上一篇文章： <a class='LinkPrevArticle' href='https://code.yunyiwangluo.com/bianchen/bcdq/24746.html' >C++ for_each + 函數指針/仿函數遍歷容器：參數類型解析、引用傳遞、Lambda 現代替代方案</a> <li>下一篇文章： <a class='LinkNextArticle' href='https://code.yunyiwangluo.com/bianchen/bcdq/24748.html' >C++ 數組退化為指針：函數參數 `const int arr[]` 實為 `const int*`，可接收單個 int 地址的原理與風險</a> </ol> </div> </div> <div class="qirnxbd bg1 mt20"> <div class="jdbsbav"> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/' target="_blank">程式設計疑難解答</a> <div class="jdbsbav_hx"></div> </div> <div class="qirnxbd_rbx"> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26064.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010520171745.png' width='100' height='70' alt='Android ImageView 顯示 PNG 邊緣出現背景色？多半是圖片本身有殘留像素' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26064.html' target="_blank"><strong>Android ImageView 顯示 PNG 邊緣出現背景色？多半是圖片本身有殘留像素</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26064.html' target="_blank"><p>現象 `ImageView` 載入 PNG 圖片，原本設計為</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/27571.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010521195687.jpg' width='100' height='70' alt='Android 多按鈕監聽最佳實踐：統一處理與獲取文本' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/27571.html' target="_blank"><strong>Android 多按鈕監聽最佳實踐：統一處理與獲取文本</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/27571.html' target="_blank"><p>場景 介面包含大量按鈕（如表格佈局），需實現：點擊任意按鈕，</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/25780.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010520043697_S.jpg' width='100' height='70' alt='C# 模擬登錄網站返回 500 錯誤的排查：請求頭、Cookie、表單字段需完全模擬瀏覽器行為' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/25780.html' target="_blank"><strong>C# 模擬登錄網站返回 500 錯誤的排查：請求頭、Cookie、表單字段需完全模擬瀏覽器行為</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/25780.html' target="_blank"><p>500 錯誤本質 服務器內部錯誤，通常因請求參數不合法（缺少</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/24352.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010518313627_S.jpg' width='100' height='70' alt='Android Studio 導入項目中文註解亂碼終極解決方案' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/24352.html' target="_blank"><strong>Android Studio 導入項目中文註解亂碼終極解決方案</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/24352.html' target="_blank"><p>現象 導入舊項目或打開文件時，中文註解顯示為亂碼（如 涓婁笅</p></a> </div> <div class="qcxs_ie_he"></div> </div> </div> </div> <div class="eccsgxsg mt20"> <div class="akevx_oin"> </div> <div class="nenxnxb bg1 mt20"> <div class="enxvsfgg"> <div class="enxvsfgg_1"></div> </div> <div class="pdirbvx lbhevs ovv_hex"> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26628.html' target="_blank">C++ string 逆序迴圈死循環：size_type 為無符號數導致 i >= 0 永真</a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/23258.html' target="_blank">Java 包導入迷思：為何通配符導入失效而具體類導入生效？</a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26561.html' target="_blank">CSS 圖片淡入淡出與溶解切換效果實作指南</a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26370.html' target="_blank">Apache 基於 IP 的虛擬主機配置：Listen 與 VirtualHost 指令</a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/24999.html' target="_blank">Java Swing 兩個 JFrame 互通：共享模型/控制器/事件總線三種模式</a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/27485.html' target="_blank">ASP.NET 後台管理系統設計：用戶表、日誌表、權限控制</a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26301.html' target="_blank">Linux 登錄失敗日誌位置：/var/log/secure 與 /var/log/auth.log</a> </div> </div> <div class="eqibneb bg1 mt20"> <div class="lkebxsg">欄目導航</div> <div class="eqibneb_1 ovv_hex"> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/huibian/' target="_self">組合語言</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/delphi/' target="_self">Delphi</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/groovy/' target="_self">Groovy</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/webSphere/' target="_self">WebSphere</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/rational/' target="_self">Rational</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/python/' target="_self">Python 程式設計</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/ruby/' target="_self">Ruby 程式設計</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/bcdq/' target="_self">程式設計疑難解答</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/bczhwd/' target="_self">程式設計綜合問答</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/gdgybc/' target="_self">更多程式設計知識</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/bcwtjd/' target="_self">程式設計問題解答</a></li> </div> </div> </div> <div class="qcxs_ie_he"></div> </div> </div> <div class="qcxs_ie_he"></div> <div class="ebrxbsbf">Copyright © <a href="https://code.yunyiwangluo.com/" target="_blank" title="程式碼之家">程式碼之家</a> All Rights Reserved </div> </body> </html>
