Question

您好我是JavaScript新手。我想在div编辑器中插入不同的子弹样式，如Circle，square，alpha，roman等。使用javascript execCommand目前仅支持Disc和Number项目符号。目前我正在尝试插入如下的子弹

 <!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function InsertBullet(BulletStyle,Numbering) {
    var style = "";
    var styleClose = "";
    if(BulletStyle === "Square")
        style = "<ul style = 'list-style-type:square'><li>";
    else if(BulletStyle === "Circle")
        style = "<ul style = 'list-style-type:circle'><li>";    
    else if(BulletStyle === "Disc")
        style = "<ul style = 'list-style-type:disc'><li>";
    else if(BulletStyle === "upper-roman")
        style = "<ol style = 'list-style-type:upper-roman'><li>";
    else if(BulletStyle === "lower-roman")
        style = "<ol style = 'list-style-type:lower-roman'><li>";   
    else if(BulletStyle === "upper-alpha")
        style = "<ol style = 'list-style-type:upper-alpha'><li>";
    else if(BulletStyle === "lower-alpha")
        style = "<ol style = 'list-style-type:lower-alpha'><li>";   
    else if(BulletStyle === "Arabic")
        style = "<ol style = 'list-style-type:decimal'><li>";   
    if(Numbering === 1){
        styleClose = '</li></ol>';
    }
    else{
        styleClose = '</li></ul>';
    }
    if(window.getSelection)
        {
            var sel = window.getSelection(); 
            if (sel.rangeCount) 
            {
                var container = document.createElement("div");
                for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                    container.appendChild(sel.getRangeAt(i).cloneContents()); 
                }
               html = container.innerHTML;
               var val = 0;            
               while(val != -1){
                var val = html.search("<div>");
                if(val != -1)
                    var html = html.replace("<div>","</li><li>");

               }
               html = style + html + styleClose;
               document.execCommand('insertHTML',false,html);
            }
        }
    else
    {
        var html = style + styleClose;
        document.execCommand('insertHTML',false,html);
    }


};
function ChangeBullet(BulletStyle) {
    var val = -1;
    var Style = "list-style-type:";
    var sel = window.getSelection(); 
    var node= sel.focusNode;
    while(val === -1){
        node = node.parentNode; 
        var html = node.innerHTML;
        val = html.search(Style);   
    }
    alert(val);
    var TLen = val+Style.length;
    var str = html.substring(TLen,TLen+15);
    alert(str);
    var len = str.search(">");
    len = len-1;
    var str = html.substring(TLen,TLen+len);
    alert(str);
    var str = html.replace(str,BulletStyle);
    alert(str);
    node.innerHTML = str;

};



</script>
</head>

<body>
<input type="submit" value="Square" 
onClick="InsertBullet('Square',0)" />
<input type="submit" value="Disc" 
onClick="InsertBullet('Disc',0)" />
<input type="submit" value="Circle" 
onClick="InsertBullet('Circle',0)" />
<input type="submit" value="upper-alpha" 
onClick="InsertBullet('upper-alpha',1)" />
<input type="submit" value="upper-roman" 
onClick="InsertBullet('upper-roman',1)" />
<input type="submit" value="Arabic" 
onClick="InsertBullet('Arabic',1)" />
<br>
<input type="submit" value="Sqre" 
onClick="ChangeBullet('Square')" />
<input type="submit" value="Dsc" 
onClick="ChangeBullet('Disc')" />
<input type="submit" value="Ccle" 
onClick="ChangeBullet('Circle')" />
<input type="submit" value="Alp" 
onClick="ChangeBullet('upper-alpha')" />
<input type="submit" value="Rmn" 
onClick="ChangeBullet('upper-roman')" />
<input type="submit" value="Num" 
onClick="ChangeBullet('Arabic')" />
<div id="NonEditable" style="width: 300px; height: 400px;">
        <div id="rteName" contentEditable="true"
            style="border: solid 1px black; width: 250px; height: 350px; margin: 25px; overflow-y: scroll; overflow-x: scroll;">
<b> hello how are <i> you.. i am doing</i> well here.. catch</b> you soon
            </div>
    </div>

</body>
</html>

使用此代码，我可以插入项目符号并更改项目符号。但是当同一个Div下存在多个子弹区域时，第一个就会发生变化。任何人都可以建议如何过来这个。

请向我推荐一些可以学习javascript的好参考资料。

将项目符号插入DIV编辑器

0 个答案: