百度富文字編輯器UEditor使用簡單示例
阿新 • • 發佈:2018-12-23
HTML程式碼:
<form id="f_edit" method="post"> <input name="id" type="hidden" value="${activityManage.id }"> <table> <tr> <td>圖片<input type="file" name="file_updateupload" id="file_updateupload" /></td> <td id="updateImage"></td> </tr> <tr> <td>活動內容:</td> <td> <!-- 載入編輯器的容器 --> <script id="container" name="content" type="text/plain"></script> </td> </tr> </table> <p> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </p> </form>
JS---UEditor:
JS---UEditor----檔案上傳:var updateEditor; (function() { UEditor(); })(); function UEditor(){ if (undefined != ueditor) { ueditor.destroy(); } ueditor=UE.getEditor('container', { toolbars: [ ['source', 'undo', 'redo', 'bold','italic','underline','strikethrough', 'forecolor','lineheight','paragraph','fontfamily','fontsize','justifyleft','justifyright', 'justifycenter','justifyjustify','simpleupload','unlink','link'] ], initialFrameWidth:600, //初始化編輯器寬度,預設1000 initialFrameHeight:300, //初始化編輯器高度,預設320 readonly:true //一載入即為只讀狀態--一般不用 }); }
前後端通訊相關的配置:請看配置檔案config.json;位置位於"ueditor/jsp/"資料夾中function upload(){ $("#file_updateupload").uploadify({ //上傳使用的 Flash 'swf' : '/plugin/uploadify/uploadify.swf', //後臺處理程式的相對路徑。 'uploader' : '/ajax/bms/news/upload', 'method' : 'get', //是否自動上傳 'auto' : true, // 按鈕的寬度 'width' : 60, // 按鈕的高度 'height' : 23, // 按鈕上的文字 'buttonText' : "上傳", // 按鈕的滑鼠圖示 'buttonCursor' : 'hand', // 上傳引數名稱 'fileObjName' : 'Filedata', // 兩個配套使用 // 副檔名 'fileTypeExts' : "*.jpg;*.png", // 檔案說明 'fileTypeDesc' : "請選擇 jpg png 檔案", //限制上傳檔案的大小 'fileSizeLimit' : '4000KB', 'progressData' : 'speed', //上傳成功 'onUploadSuccess':function(file, data, response) { var obj = JSON.parse(data); var newsImage=obj.data; alert(newsImage) alert("修改圖片成功"); $("#updateImage").append("<label><input type='hidden' name='newsImage' id='newsImage' value="+newsImage+"> <img src='"+ImageUrl+"/upload/"+newsImage+"' width='148' height='198' /></label>"); } }); }
ueditor完整配置:請檢視配置檔案ueditor.config.js;位置位於"ueditor/"資料夾中