JavaScript：如何获取用户选择，并在选择前后插入标记？

我制作了一些非常小的WYSIWYG文本编辑器，带有一些非常基本的函数，下面是代码（）：

HTML:

所见即所得：作者@natanel97
字号









颜色










字体



链接url:
正文：
添加链接
取消
自定义HTML颜色：
添加
取消
无标题所见即所得

文本编辑器

v0.1


书面及；开发人






这部作品是根据
.



接近

JavaScript:

function wysiwyg_convert() {

    var wysiwyg_textarea = document.querySelector( '.wysiwyg-editor textarea' );
    var wysiwyg_div_edit = document.querySelector( '.wysiwyg-editor .wysiwyg-editor-contents' );

    wysiwyg_div_edit.onkeypress = function() {

        if( wysiwyg_textarea.value != wysiwyg_div_edit.innerHTML ) {

            wysiwyg_textarea.value = wysiwyg_div_edit.innerHTML;

        }

        else {

            if( wysiwyg_div_edit.innerHTML != wysiwyg_textarea.value ) {

                wysiwyg_div_edit.innerHTML = wysiwyg_textarea.value;

            }

        }

    }

}

function wysiwyg_addtag( tag, href, title, fontsize, color ) {

    var tag;
    var wysiwyg_div_edit = document.querySelector( '.wysiwyg-editor .wysiwyg-editor-contents' );

    if( tag == 'strong' || tag == 'em' || tag == 'ins' ) {

        wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + '>Text</' + tag + '>';

    }

    else if( tag == 'img' || tag == 'br' ) {

        if( tag == 'img' ) {

            wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' src="' + href + '" alt="' + title + '" />';

        }

        if( tag == 'br' ) {

            wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' />';

        }

    }

    else {

        if( tag == 'a' ) {

            var href = document.getElementById( href ).value;
            var htxt = document.getElementById( title ).value;

            if( href != null ) {

                wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' href="' + href + '">' + htxt + '</' + tag + '>';

            }

        }

        if( tag == 'span' ) {

            if( fontsize != null ) {

                wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' style="font-size:' + fontsize + 'pt;">Text</' + tag + '>';

            }

            else if( color != null ) {

                if( document.getElementById('wtgl_color').style.display == 'block' ) {

                    var color = document.getElementById( color ).value;

                }

                wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' style="color:#' + color + ';">Text</' + tag + '>';


            }

        }

    }

}

function wysiwyg_save() {

    // enable it only for testing purposes

    var wysiwyg_textarea = document.querySelector( '.wysiwyg-editor textarea' );
    alert( wysiwyg_textarea.value );

}

function wysiwyg_toggle( id ) {

    var id = document.getElementById( id );

    if( id.style.display == 'block' ) {

        id.style.display = 'none';

    }

    else {

        id.style.display = 'block';

    }

}

document.addEventListener( 'DOMContentLoaded', function() {

    wysiwyg_convert();

});

函数所见即所得转换（）{
var wysiwyg_textarea=document.querySelector（“.wysiwyg editor textarea”）；
var wysiwyg_div_edit=document.querySelector（'.wysiwyg editor.wysiwyg editor contents'）；
wysiwyg_div_edit.onkeypress=函数（）{
if（所见即所得文本区域.value！=所见即所得div\u edit.innerHTML）{
wysiwyg_textarea.value=wysiwyg_div_edit.innerHTML；
}
否则{
if（wysiwyg_div_edit.innerHTML！=wysiwyg_textarea.value）{
wysiwyg_div_edit.innerHTML=wysiwyg_textarea.value；
}
}
}
}
函数所见即所得添加标签（标签、href、标题、字体大小、颜色）{
var标签；
var wysiwyg_div_edit=document.querySelector（'.wysiwyg editor.wysiwyg editor contents'）；
if（tag='strong'| | tag='em'| | tag==''ins'）{
wysiwyg_div_edit.innerHTML=wysiwyg_div_edit.innerHTML+“文本”；
}
else if（标记=='img'| |标记=='br'）{
如果（标记=='img'）{
wysiwyg_div_edit.innerHTML=wysiwyg_div_edit.innerHTML+“”；
}
如果（标记=='br'）{
wysiwyg_div_edit.innerHTML=wysiwyg_div_edit.innerHTML+“”；
}
}
否则{
如果（标记=='a'）{
var href=document.getElementById（href）.value；
var htxt=document.getElementById（title）.value；
如果（href！=null）{
wysiwyg_div_edit.innerHTML=wysiwyg_div_edit.innerHTML+“”+htxt+“”；
}
}
如果（标记='span'）{
if（fontsize！=null）{
wysiwyg_div_edit.innerHTML=wysiwyg_div_edit.innerHTML+“文本”；
}
else if（颜色！=null）{
if（document.getElementById（'wtgl_color'）.style.display=='block'）{
var color=document.getElementById（color）.value；
}
wysiwyg_div_edit.innerHTML=wysiwyg_div_edit.innerHTML+“文本”；
}
}
}
}
函数wysiwyg_save（）{
//仅为测试目的启用它
var wysiwyg_textarea=document.querySelector（“.wysiwyg editor textarea”）；
警报（wysiwyg_textarea.value）；
}
功能所见即所得切换（id）{
var id=document.getElementById（id）；
如果（id.style.display=='block'）{
id.style.display='none'；
}
否则{
id.style.display='block'；
}
}
document.addEventListener（'DOMContentLoaded'，function（）{
所见即所得转换（）；
});

我想创建一个函数，该函数将在div内接收所选文本（如果选中），当按下其中一个样式按钮时，它将生成如下内容：

selected text

---

我可以使用我已有的函数-

wysiwyg\u addtag

并在其中添加一些代码吗？如果可以的话，怎么做？

Javascript有一个内置的窗口方法，名为

window.getSelection（）

您可以使用它将所选文本转换为如下所示的字符串

var text=window.getSelection（）.toString（）

然后，创建一行代码就很容易了，如下所示：

var replace=”“+text+“”

并将其注入HTML。然而，清除输入以防止某种XSS是明智的

下面是一些关于该方法的文档：
Javascript有一个内置的窗口方法，名为
window.getSelection（）

您可以使用此选项来旋转选定的纹理
function wysiwyg_convert() {

    var wysiwyg_textarea = document.querySelector( '.wysiwyg-editor textarea' );
    var wysiwyg_div_edit = document.querySelector( '.wysiwyg-editor .wysiwyg-editor-contents' );

    wysiwyg_div_edit.onkeypress = function() {

        if( wysiwyg_textarea.value != wysiwyg_div_edit.innerHTML ) {

            wysiwyg_textarea.value = wysiwyg_div_edit.innerHTML;

        }

        else {

            if( wysiwyg_div_edit.innerHTML != wysiwyg_textarea.value ) {

                wysiwyg_div_edit.innerHTML = wysiwyg_textarea.value;

            }

        }

    }

}

function wysiwyg_addtag( tag, href, title, fontsize, color ) {

    var tag;
    var wysiwyg_div_edit = document.querySelector( '.wysiwyg-editor .wysiwyg-editor-contents' );

    if( tag == 'strong' || tag == 'em' || tag == 'ins' ) {

        wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + '>Text</' + tag + '>';

    }

    else if( tag == 'img' || tag == 'br' ) {

        if( tag == 'img' ) {

            wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' src="' + href + '" alt="' + title + '" />';

        }

        if( tag == 'br' ) {

            wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' />';

        }

    }

    else {

        if( tag == 'a' ) {

            var href = document.getElementById( href ).value;
            var htxt = document.getElementById( title ).value;

            if( href != null ) {

                wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' href="' + href + '">' + htxt + '</' + tag + '>';

            }

        }

        if( tag == 'span' ) {

            if( fontsize != null ) {

                wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' style="font-size:' + fontsize + 'pt;">Text</' + tag + '>';

            }

            else if( color != null ) {

                if( document.getElementById('wtgl_color').style.display == 'block' ) {

                    var color = document.getElementById( color ).value;

                }

                wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' style="color:#' + color + ';">Text</' + tag + '>';


            }

        }

    }

}

function wysiwyg_save() {

    // enable it only for testing purposes

    var wysiwyg_textarea = document.querySelector( '.wysiwyg-editor textarea' );
    alert( wysiwyg_textarea.value );

}

function wysiwyg_toggle( id ) {

    var id = document.getElementById( id );

    if( id.style.display == 'block' ) {

        id.style.display = 'none';

    }

    else {

        id.style.display = 'block';

    }

}

document.addEventListener( 'DOMContentLoaded', function() {

    wysiwyg_convert();

});