网页编辑器实现原型 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>富文本编辑器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script>
function setpic(){

    alert('xxx'); 
    $("#editableText").append('<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" />');
}
$(function(){
    $("#setpic").on('click',function(){
        setpic();
    });    
});

</script>
</head>
<body>
    <fieldset>
        <legend>编辑区</legend>
        <div>
            <form>
                字体颜色：
                <select onchange="setFontColor(this)">
                    <option value="black">Black    </option>
                    <option value="red">Red   </option>
                    <option value="green">Green    </option>
                    <option value="blue">Blue    </option>
                </select>
                字体样式：
                <select onchange="setFontStyle(this)">
                    <option value="bold">Bold    </option>
                    <option value="italic">Italic   </option>
                    <option value="underline">Underline    </option>
                    <option value="striketthrough">StriketThrough    </option>
                </select>
                字体名称：
                <select onchange="setFontFamily(this)">
                    <option value="serif">Serif    </option>
                    <option value="sans-serif">Sans-serif   </option>
                    <option value="monospace">Monospace    </option>
                    <option value="comic sans ms">Comic Sans    </option>
                </select>
                
            </form>
            <button id='setpic'>设置图片</button>
        </div>
        <br/>
        <div id="editableText" contenteditable="true" style="width:400px;min-height:100px;border:2px dashed #ccc"></div>
    </fieldset>
    <script type="text/javascript">
        function setFontColor(obj)
        {
            document.execCommand("forecolor",false,obj.value);
        }
        function setFontStyle(obj)
        {
            document.execCommand(obj.value,false,null);
        }
        function setFontFamily(obj)
        {
            document.execCommand("fontname",false,obj.value);
        }
    </script>
</body>
</html>
  
</body>

</html>

 

 

这个更完善，表情是基于discuz的表情

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>富文本编辑器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script>

$(function(){
    $("#setpic").on('click',function(){
        toggleSmile();
    });    
    $('#smiliesdiv_table').on('click',function(){
        $("#smiliesdiv_table").toggle();
    });

});




function insertSmiley(smilieid) {
    //checkFocus();
    var src = $('#smilie_' + smilieid).attr('src');
    var code = $('#smilie_' + smilieid).attr('alt');
    
    insertText('<img src="' + src + '" border="0" smilieid="' + smilieid + '" alt="" />');

    toggleSmile();
}
function toggleSmile(){
    $("#smiliesdiv_table").toggle();    
}

function insertText(html){
    $("#editableText").append(html);
    
}

function checkForm(){
    var html = $("#editableText").html();
    if(html == ''){
        alert('请输入内容');
        return false;
    }
    $("#textarea").html(html);
    alert($("#textarea").html());
    return true;
}
</script>
</head>
<body>
    <fieldset>
        <legend>编辑区</legend>
        <div>
            <form id="form" onsubmit="checkForm();">
                字体颜色：
                <select onchange="setFontColor(this)">
                    <option value="black">Black    </option>
                    <option value="red">Red   </option>
                    <option value="green">Green    </option>
                    <option value="blue">Blue    </option>
                </select>
                字体样式：
                <select onchange="setFontStyle(this)">
                    <option value="bold">Bold    </option>
                    <option value="italic">Italic   </option>
                    <option value="underline">Underline    </option>
                    <option value="striketthrough">StriketThrough    </option>
                </select>
                字体名称：
                <select onchange="setFontFamily(this)">
                    <option value="serif">Serif    </option>
                    <option value="sans-serif">Sans-serif   </option>
                    <option value="monospace">Monospace    </option>
                    <option value="comic sans ms">Comic Sans    </option>
                </select>
                <textarea id="textarea" style="display:none"></textarea>
                <input type="submit" value="提交" />
            </form>
            <button id='setpic'>表情</button>
        </div>
        <br/>
        <div id="editableText" contenteditable="true" style="width:400px;min-height:100px;border:2px dashed #ccc"></div>


<table id="smiliesdiv_table" cellpadding="0" cellspacing="0" style="display:none;">
  <tbody>
    <tr>
      <td onclick="insertSmiley(1)" id="e_smilie_1_td" initialized="true">
        <img id="smilie_1" width="20" height="20" src="static/image/smiley/default/smile.gif" alt=":)"></td>
      <td onclick="insertSmiley(2)" id="e_smilie_2_td" initialized="true">
        <img id="smilie_2" width="20" height="20" src="static/image/smiley/default/sad.gif" alt=":("></td>
      <td onclick="insertSmiley(3)" id="e_smilie_3_td" initialized="true">
        <img id="smilie_3" width="20" height="20" src="static/image/smiley/default/biggrin.gif" alt=":D"></td>
      <td onclick="insertSmiley(4)" id="e_smilie_4_td">
        <img id="smilie_4" width="20" height="20" src="static/image/smiley/default/cry.gif" alt=":'("></td>
      <td onclick="insertSmiley(5)" id="e_smilie_5_td">
        <img id="smilie_5" width="20" height="20" src="static/image/smiley/default/huffy.gif" alt=":@"></td>
      <td onclick="insertSmiley(6)" id="e_smilie_6_td">
        <img id="smilie_6" width="20" height="20" src="static/image/smiley/default/shocked.gif" alt=":o"></td>
      <td onclick="insertSmiley(7)" id="e_smilie_7_td">
        <img id="smilie_7" width="20" height="20" src="static/image/smiley/default/tongue.gif" alt=":P"></td>
      <td onclick="insertSmiley(8)" id="e_smilie_8_td">
        <img id="smilie_8" width="20" height="20" src="static/image/smiley/default/shy.gif" alt=":$"></td>
    </tr>
    <tr>
      <td onclick="insertSmiley(9)" id="e_smilie_9_td">
        <img id="smilie_9" width="20" height="20" src="static/image/smiley/default/titter.gif" alt=";P"></td>
      <td onclick="insertSmiley(10)" id="e_smilie_10_td" initialized="true">
        <img id="smilie_10" width="20" height="20" src="static/image/smiley/default/sweat.gif" alt=":L"></td>
      <td onclick="insertSmiley(11)" id="e_smilie_11_td" initialized="true">
        <img id="smilie_11" width="20" height="20" src="static/image/smiley/default/mad.gif" alt=":Q"></td>
      <td onclick="insertSmiley(12)" id="e_smilie_12_td" initialized="true">
        <img id="smilie_12" width="20" height="20" src="static/image/smiley/default/lol.gif" alt=":lol"></td>
      <td onclick="insertSmiley(13)" id="e_smilie_13_td" initialized="true">
        <img id="smilie_13" width="20" height="20" src="static/image/smiley/default/loveliness.gif" alt=":loveliness:"></td>
      <td onclick="insertSmiley(14)" id="e_smilie_14_td" initialized="true">
        <img id="smilie_14" width="20" height="20" src="static/image/smiley/default/funk.gif" alt=":funk:"></td>
      <td onclick="insertSmiley(15)" id="e_smilie_15_td" initialized="true">
        <img id="smilie_15" width="20" height="20" src="static/image/smiley/default/curse.gif" alt=":curse:"></td>
      <td onclick="insertSmiley(16)" id="e_smilie_16_td">
        <img id="smilie_16" width="20" height="20" src="static/image/smiley/default/dizzy.gif" alt=":dizzy:"></td>
    </tr>
    <tr>
      <td onclick="insertSmiley(17)" id="e_smilie_17_td">
        <img id="smilie_17" width="20" height="20" src="static/image/smiley/default/shutup.gif" alt=":shutup:"></td>
      <td onclick="insertSmiley(18)" id="e_smilie_18_td">
        <img id="smilie_18" width="20" height="20" src="static/image/smiley/default/sleepy.gif" alt=":sleepy:"></td>
      <td onclick="insertSmiley(19)" id="e_smilie_19_td" initialized="true">
        <img id="smilie_19" width="20" height="20" src="static/image/smiley/default/hug.gif" alt=":hug:"></td>
      <td onclick="insertSmiley(20)" id="e_smilie_20_td" initialized="true">
        <img id="smilie_20" width="20" height="20" src="static/image/smiley/default/victory.gif" alt=":victory:"></td>
      <td onclick="insertSmiley(21)" id="e_smilie_21_td">
        <img id="smilie_21" width="20" height="20" src="static/image/smiley/default/time.gif" alt=":time:"></td>
      <td onclick="insertSmiley(22)" id="e_smilie_22_td">
        <img id="smilie_22" width="20" height="20" src="static/image/smiley/default/kiss.gif" alt=":kiss:"></td>
      <td onclick="insertSmiley(23)" id="e_smilie_23_td" initialized="true">
        <img id="smilie_23" width="20" height="20" src="static/image/smiley/default/handshake.gif" alt=":handshake"></td>
      <td onclick="insertSmiley(24)" id="e_smilie_24_td">
        <img id="smilie_24" width="20" height="20" src="static/image/smiley/default/call.gif" alt=":call:"></td>
    </tr>
  </tbody>
</table>

    </fieldset>
    <script type="text/javascript">
        function setFontColor(obj)
        {
            document.execCommand("forecolor",false,obj.value);
        }
        function setFontStyle(obj)
        {
            document.execCommand(obj.value,false,null);
        }
        function setFontFamily(obj)
        {
            document.execCommand("fontname",false,obj.value);
        }
    </script>
</body>
</html>
  
</body>

</html>

 

网页编辑器原来是专业实现的，

contenteditable="true"

posted on 2016-05-26 17:03  郑州名扬  阅读(235)  评论(0)    收藏  举报

导航