富文本编辑器在IE 10中无法正常运行

时间:2014-04-28 13:11:05

标签: javascript jquery html rich-text-editor

我已经实现了这样的richtext编辑器 问题1.如果我删除图像并放入简单的div,它不起作用。功能为 调用格式,不会出现错误。但也没有产出。我尝试了这个div和span。 问题2.在IE 10中,要格式化元素,我必须选择前一个元素。虽然它在firefox中运行良好。

<script src="~/Scripts/jquery-1.10.2.js"></script>
        <script>
        var txtEditor;

        var viewHtml = 1;
        function initDoc() {
            txtEditor = $('#textBox')[0];
        }

        $(window).load(initDoc);

        function formatDoc(sCmd, sValue) {
            //if (validateMode()) { document.execCommand(sCmd, false, sValue);              
            $(txtEditor).focus(); }
            document.execCommand(sCmd, false, sValue); $(txtEditor).focus();
        }

        function validateMode() {
            if (viewHtml==1) { return true; }
            alert("Uncheck \"Show HTML\".");
            $(txtEditor).focus();
            return false;
        }

    </script>
        <style type="text/css">
        #textBox {
            margin-left: 10px;
            width: 650px;
            height: 200px;
            border: 1px #000000 solid;
            padding: 12px;
            overflow: scroll;
        }

            #textBox , #sourceText {
                padding: 0;
                margin: 0;
                max-width: 650px;
                min-height: 200px;
            }

        #editMode label {
            cursor: pointer;
        }

        .attributesStyle {
            margin-left: 0px;
            border: 1px solid #ccc;
            padding: 3px;
            float: left;
        }

        .link {
            width: 16px;
            height: 17px;
        }

        .floatLeft {
            float: left;
        }

        .floatRight {
            float: right;
        }

        .marginLeft10 {
            margin-left: 10px;
        }

        .clearBoth {
            clear: both;
        }

        a:hover {
            cursor: pointer;
        }
    </style>
        <body >
        <form >
            <input type="hidden" name="myDoc">
            <div style="margin-bottom:10px;">
                <div class="floatLeft marginLeft10">
                    <a onclick="formatDoc('formatBlock', '<h1>');">
                        <div id="h1" class="attributesStyle">
                            <img class="link" title="H1" src="~/Images/Heading1.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('formatBlock', '<h2>');">
                        <div id="h2" class="attributesStyle">
                            <img class="link" title="H2" src="~/Images/Heading2.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('formatBlock', '<h3>');">
                        <div id="h3" class="attributesStyle">
                            <img class="link" title="H3" src="~/Images/Heading3.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('formatBlock', '<h4>');">
                        <div id="h4" class="attributesStyle">
                            <img class="link" title="H4" src="~/Images/Heading4.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('formatBlock', '<h5>');">
                        <div id="h5" class="attributesStyle">
                            <img class="link" title="H5" src="~/Images/Heading5.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('formatBlock', '<h6>');">
                        <div id="h6" class="attributesStyle">
                            <img class="link" title="H6" src="~/Images/Heading6.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('formatblock', '<p>');">
                        <div id="divParagraph" class="attributesStyle">
                            <img class="link" title="Paragraph" src="~/Images/paragraph.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('formatblock', '<pre>');">
                        <div id="divParagraph" class="attributesStyle">
                            Pre
                        </div>
                    </a>
                    <a onclick="formatDoc('formatblock', '<blockquote>');">
                        <div class="attributesStyle">
                            <img class="link" title="Quote" src="~/Content/themes/base/images  /quote_1.png" />
                        </div>
                    </a>
                </div>
                <div class="floatLeft marginLeft10">
                    <a onclick="formatDoc('bold');">
                        <div id="bolds" class="attributesStyle" title="Bold">
                            <img class="link" title="Bold" src="~/Images/text_bold.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('italic');">
                        <div id="italic" class="attributesStyle" title="Italic">
                            <img class="link" title="Italic" src="~/Images/text_italic.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('underline');">
                        <div class="attributesStyle" title="Underline">
                            <img class="link" title="Underline" src="~/Images/text_underline.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('insertorderedlist');">
                        <div class="attributesStyle">
                            <img class="link" title="Order List" src="~/Content/themes/base/images/list_numbered_32.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('insertunorderedlist');">
                        <div class="attributesStyle">
                            <img class="link" title="Bullets List" src="~/Content/themes/base/images/text_list_bullets.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('undo');">
                        <div class="attributesStyle" title="undo">
                            <img class="link" src="~/Content/themes/base/images/rotateLeft.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('redo');">
                        <div class="attributesStyle" title="redo">
                            <img class="link" src="~/Content/themes/base/images/rotateRight.png" />
                        </div>
                    </a>
                </div>
                <div class="floatLeft marginLeft10">
                    <a onclick="formatDoc('justifyleft');">
                        <div class="attributesStyle" title="Justify left">
                            <img id="justifyleft" class="link" title="Justify Left" src="~/Content/themes/base/images/text_align_left.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('justifycenter');">
                        <div class="attributesStyle" title="Justify Center">
                            <img id="justifycenter" class="link" title="Justify Center" src="~/Content/themes/base/images/text_align_center.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('justifyright');">
                        <div class="attributesStyle" title="Justify Right">
                            <img id="justifyright" class="link" title="Justify Right" src="~/Content/themes/base/images/text_align_right.png" />
                        </div>
                    </a>
                </div>

                <a id="divToggleHtml" >
                    <div class="attributesStyle" title="Toggle Html">
                        Toggle HTML
                    </div>
                </a>
                <div class="floatLeft marginLeft10">
                    <a onclick="javascript: var sLnk = prompt('Write the URL here', 'http:\/\/'); if (sLnk && sLnk != '' && sLnk != 'http://') { formatDoc('CreateLink', sLnk); }">
                        <div class="attributesStyle" title="Add Link">
                            <img class="link" src="~/Content/themes/base/images/link.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('InsertImage', true);">
                        <div class="attributesStyle" title="Add Image">
                            <img class="link" src="~/Content/themes/base/images/image.png" />
                        </div>
                    </a>
                    <a onclick="formatDoc('Unlink');">
                        <div class="attributesStyle" title="Unlink">
                            <img class="link" src="~/Content/themes/base/images/brokenLink.png" />
                        </div>
                    </a>
                </div>
                <div class="clearBoth">

                </div>
            </div>
            <div id="textBox" contenteditable="true"><i>Amit Sinha</i></div>
            <p style="display:none;" id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
            <p><input type="submit" value="Send" style="display:none;" /></p>
        </form>
        </body>

1 个答案:

答案 0 :(得分:0)

我可以为第一个问题提供解决方案。 只要我在那里有文字,我就无法为我工作。问题似乎是某种“选择文本而不是响应点击”

为你的button-div添加这些css设置:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;

这会让你的控件响应点击。 不幸的是,我无法测试你的第二个问题,因为我正在使用linux;)