自己制作页面编辑器（js+css）

来源：互联网发布：什么是scratch编程编辑：程序博客网时间：2024/06/05 08:52

编辑器都有什么功能。文字加粗，上传图片，改变大小等等。此例仅包含文字加粗和图片上传。

首页你要知道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

0 0