1. 程式人生 > >JS實現簡易版富文字編輯器

JS實現簡易版富文字編輯器

<table border='1' class="tablebox" id='tablebox'>
    <tr>
        <td>
            <input type="button" name="bold" value='Bold' class="bold">
        </td>
        <td>
            <input type="button" name="italic" value='Italic' class="italic">
        </td>
        <td>
            <input type="button" name="underline" value='Underline' class="decotation">
        </td>
        <td>size
            <select name="fontSize" class="font">
                <option value="1">1</option>
                <option value="3">3</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
            </select>
        </td>
        <td>img
            <select name="insertImage">
                <option value="">請選擇圖片</option>
                <option value="timg.jpg">timg.jpg</option>
                <option value="timg1.jpg">timg1.jpg</option>
                <option value="timg2.jpg">timg2.jpg</option>
                <option value="timg3.jpg">timg3.jpg</option>
                <option value="timg4.jpg">timg4.jpg</option>
            </select>
        </td>
        <td>
            <input type="button" name="selectAll" value='全選' class="selectAll">
        </td>
        <td>
            <input type="button" name="undo" value='撤銷' class="undo">
        </td>
        <td>
            <input type="button" name="justifyLeft" value='left' class="justifyLeft">
        </td>
        <td>
            <input type="button" name="justifyCenter" value='center' class="justifyCenter">
        </td>
        <td>
            <input type="button" name="justifyRight" value='right' class="justifyRight">
        </td>
    </tr>
    <tr>
        <td colspan='10'>
            <div class="text" contenteditable="true">這是一個用DIV的contenteditable屬性以及document.execCommand實現的一個簡易富文字編輯器。</div>
        </td>
    </tr>
</table>