自己製作頁面編輯器（js+css）
阿新 • • 發佈：2018-11-03
編輯器都有什麼功能。文字加粗，上傳圖片，改變大小等等。此例僅包含文字加粗和圖片上傳。
首頁你要知道html標籤中的contenteditable="true"屬性，不知道的自行去百度。（可讓div可編輯）
其次知道js的document.execCommand()，不知道的自行去百度(可以實現瀏覽器選單的很多功能. 如儲存檔案,開啟新檔案,撤消、重做操作…等等. 有了這個方法,就可以很容易的實現網頁中的文字編輯器.）
最後說下圖片上傳，此處用了一個ajaxfileupload.js的外掛。（圖片上傳給後臺（如php檔案），後臺返回圖片地址，前臺再把該圖片插入到該編輯器中）
該外掛可能會報handleError相關錯誤，加上下面程式碼即可
handleError: function (s, xhr, status, e) { // If a local callback was specified, fire it if (s.error) { s.error.call(s.context || s, xhr, status, e); } // Fire the global callback if (s.global) { (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]); } },
效果如圖
下面直接放程式碼
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bianjiqi技術支援qq:41435301</title> <script src="./jquery.js"></script> <style> /**編輯器樣式**/ .textareatitle { width: 844px; height: 20px; border: 1px solid #ccc; border-bottom: none; } .textareatitle a,.textareatitle span { padding-left: 5px; padding-right: 5px; font-weight: bold; border-right: 1px solid #ccc; cursor: pointer; overflow: hidden; display: block; float: left; color:#000000; } .textareaedit{ width: 844px; height: 150px;border: 1px solid #ccc;resize:vertical; overflow-y:auto; } .fileinput { position: relative; display: inline-block; overflow: hidden; cursor: pointer; } .fileinput input { position: absolute; font-size: 100px; right: 0; top: 0; filter:alpha(opacity=0); opacity:0; cursor: pointer; } </style> </head> <body> <div style="width:850px;"> <div class="textareatitle" id="editControls"> <a data-role='bold' href='javascript:void(0);'>B</a> <span class="fileinput">圖片 <input type="file" multiple class="input-file pic-1" id="arrt_pic" name="images" onchange="uploadPic(this);"> </span> </div> <div class="textareaedit" style=" " contenteditable="true"></div> </div> <script src="./ajaxfileupload.js"></script> <script> /********編輯器插入圖片*********/ function uploadPic(input_file) { var current_input = input_file; var upload_id = $(input_file).attr('id'); $.ajaxFileUpload ( { url: 'upload.php', //用於檔案上傳的伺服器端請求地址 secureuri: false, //是否需要安全協議，一般設定為false fileElementId: upload_id, //檔案上傳域的ID dataType: 'json', //返回值型別 一般設定為json type: 'POST', async: true, success: function (data) //伺服器成功響應處理函式 { if (data.status == 'Y') { $(".textareaedit").append("<img src='./upload/" + data.msg + "'>"); } else { alertLayer({text: '您上傳的檔案不符合要求'}); } }, error: function (e) { alertLayer({text: '您上傳的檔案不符合要求'}); }, complete: function () { } } ); } /*******編輯器功能*******/ $('#editControls a').click(function (e) { switch ($(this).data('role')) { case 'h1': case 'h2': case 'p': document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>'); break; default: document.execCommand($(this).data('role'), false, null); break; } }) </script> </body> </html>
upload.php
<?php
$res["error"] = "";//錯誤資訊
$res["msg"] = "";//提示資訊
$name = $_FILES['images']['name'];
$path = dirname(__FILE__) . "\upload\\" . $name;
if(move_uploaded_file($_FILES['images']['tmp_name'],$path)){
$res["status"] = "Y";
$res["msg"] = $name;
}else{
$res["status"] = "N";
$res["error"] = "error";
}
echo json_encode($res);
?>歡迎大家多多交流。qq: 41435301