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

标签 javascript html css

我制作了一些非常小的所见即所得文本编辑器，具有一些非常基本的功能，这是代码(See live demo in jsfiddle):

HTML:

<section class="wysiwyg-editor" data-wysiwyg="true">
    <h2 id="hdwysiwygfw3v">WYSIWYG : By @natanel97</h2>
    <textarea id="wysiwyg_ta_ead"></textarea>
    <div class="wysiwyg-editor-toolbar wysiwyg-editor-toolbar-menu">
        <!-- enable only for test purposes
        <button class="wysiwyg-editor-toolbar-menu menu-button" onclick="wysiwyg_save()"><i class="fa fa-floppy-o"></i></button>
        -->
        <button class="wysiwyg-editor-toolbar-menu menu-button" onclick="wysiwyg_addtag( 'strong' )"><i class="fa fa-bold"></i></button>
        <button class="wysiwyg-editor-toolbar-menu menu-button" onclick="wysiwyg_addtag( 'em' )"><i class="fa fa-italic"></i></button>
        <button class="wysiwyg-editor-toolbar-menu menu-button" onclick="wysiwyg_addtag( 'ins' )"><i class="fa fa-underline"></i></button>
        <button class="wysiwyg-editor-toolbar-menu menu-button" onclick="wysiwyg_toggle( 'wtgl_link' )"><i class="fa fa-link"></i></button>
        <div class="wysiwyg-editor-toolbar-menu hover-button-drop-down">
            <button class="wysiwyg-editor-toolbar-menu menu-button">Font Size <i class="fa fa-caret-down"></i></button>
            <ul class="wysiwyg-editor-toolbar-menu drop-down-menu">
                <li><a href="javascript:;" onclick="wysiwyg_addtag( 'span', null, null, '9' )">9pt</a></li>
                <li><a href="javascript:;" onclick="wysiwyg_addtag( 'span', null, null, '11' )">11pt</a></li>
                <li><a href="javascript:;" onclick="wysiwyg_addtag( 'span', null, null, '13' )">13pt</a></li>
                <li><a href="javascript:;" onclick="wysiwyg_addtag( 'span', null, null, '16' )">16pt</a></li>
                <li><a href="javascript:;" onclick="wysiwyg_addtag( 'span', null, null, '19' )">19pt</a></li>
                <li><a href="javascript:;" onclick="wysiwyg_addtag( 'span', null, null, '21' )">21pt</a></li>
                <li><a href="javascript:;" onclick="wysiwyg_addtag( 'span', null, null, '26' )">26pt</a></li>
            </ul>
        </div>
        <div class="wysiwyg-editor-toolbar-menu hover-button-drop-down">
            <button class="wysiwyg-editor-toolbar-menu menu-button">Color <i class="fa fa-caret-down"></i></button>
            <ul class="wysiwyg-editor-toolbar-menu drop-down-menu color-selection">
                <li><a href="javascript:;" style="background:#000;" onclick="wysiwyg_addtag( 'span', null, null, null, '000' )">Black</a></li>
                <li><a href="javascript:;" style="background:#fff;" onclick="wysiwyg_addtag( 'span', null, null, null, 'fff' )">White</a></li>
                <li><a href="javascript:;" style="background:#c60b0b;" onclick="wysiwyg_addtag( 'span', null, null, null, 'c60b0b' )">Dark red</a></li>
                <li><a href="javascript:;" style="background:#f39106;" onclick="wysiwyg_addtag( 'span', null, null, null, 'f39106' )">Orange</a></li>
                <li><a href="javascript:;" style="background:#2597d9;" onclick="wysiwyg_addtag( 'span', null, null, null, '2597d9' )">Ocean blue</a></li>
                <li><a href="javascript:;" style="background:#72b442;" onclick="wysiwyg_addtag( 'span', null, null, null, '72b442' )">Grass green</a></li>
                <li><a href="javascript:;" style="background:#cc3366;" onclick="wysiwyg_addtag( 'span', null, null, null, 'cc3366' )">Fuchsia pink</a></li>
                <li><a href="javascript:;" onclick="wysiwyg_toggle( 'wtgl_color' );"><i class="fa fa-ellipsis-h"></i></a></li>
            </ul>
        </div>
        <div class="wysiwyg-editor-toolbar-menu hover-button-drop-down">
            <button class="wysiwyg-editor-toolbar-menu menu-button">Font <i class="fa fa-caret-down"></i></button>
            <ul class="wysiwyg-editor-toolbar-menu drop-down-menu">
                <li><a href="javascript:;">Default</a></li>
            </ul>
        </div>
        <button class="wysiwyg-editor-toolbar-menu menu-button" onclick="wysiwyg_toggle( 'wtgl_info' )"><i class="fa fa-info"></i></button>
    </div>
    <div class="wysiwyg-editor-contents" id="wysiwyg_ce_ead" contenteditable="true"></div>
    &nbsp;
    <div class="wysiwyg-scenes">
        <div class="scene" id="wtgl_link">
            <div class="wysiwyg-scenes-tables">
                <div class="tr">
                    <div class="td" style="width:120px;">Link url:</div>
                    <div class="td"><input type="text" id="wysiwyg-link-href" placeholder="Must start with &quot;http://&quot;" /></div>
                </div>
                <div class="tr">
                    <div class="td">Text:</div>
                    <div class="td"><input type="text" id="wysiwyg-link-text" placeholder="Describe the link" /></div>
                </div>
                <div class="tr">
                    <div class="td"></div>
                    <div class="td">
                        <button onclick="wysiwyg_addtag( 'a', 'wysiwyg-link-href', 'wysiwyg-link-text' );wysiwyg_toggle( 'wtgl_link' )">Add link</button>
                        <button type="reset" onclick="wysiwyg_toggle( 'wtgl_link' )">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="scene" id="wtgl_color">
            <div class="wysiwyg-scenes-tables">
                <div class="tr">
                    <div class="td">Custom HTML Color:</div>
                </div>
                <div class="tr">
                    <div class="td"><input type="text" id="wysiwyg-text-color" maxlength="6"
                    onkeypress="if( this.value == '#' || this.value==' ' ){ this.value = ''; }" onblur="if( this.value == '#' || this.value==' ' ){ this.value = ''; }"
                    placeholder="Without the '#'" /></div>
                </div>
                <div class="tr">
                    <div class="td">
                        <button onclick="wysiwyg_addtag( 'span', null, null, null, 'wysiwyg-text-color' );wysiwyg_toggle( 'wtgl_color' )">Add</button>
                        <button type="reset" onclick="wysiwyg_toggle( 'wtgl_color' )">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="scene" id="wtgl_info">
            <div class="wysiwyg-scenes-tables">
                <div class="tr">
                    <div class="td">
                        <p><strong>Untitled WYSIWYG</strong></p>
                        <p>Text editor</p>
                        <p>v0.1</p>
                        <p>
                        Written &amp; Developed by <a href="http://stackoverflow.com/users/6247920/natanel97">@natanel97</a></p>
                        <p>
                            <br />
                            <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
                                <img alt="Creative Commons license" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" />
                            </a>
                            <br />
                            <span style="font-size:11.6px;">This work is licensed under a
                                <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
                               Attribution-NonCommercial-ShareAlike 4.0 International </a>.
                            </span>
                            <br />
                        </p>
                        <button type="reset" onclick="wysiwyg_toggle( 'wtgl_info' )">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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();

});

我想创建一个函数，该函数将在 div 内接收选定的文本(如果选择)，并且当按下其中一个样式按钮时，它将生成类似: <someHTMLtag [...]>Selected Text</someHTMLtag> 的内容。 .

我可以使用我已有的功能来实现吗 - wysiwyg_addtag并在里面添加一些代码？如果可以的话，怎样做？

最佳答案

Javascript 有一个内置的窗口方法，名为 window.getSelection()

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

var text = window.getSelection().toString();

然后就像创建一行代码一样简单:

var replace = "<b>" + text + "</b>"

并将其注入(inject) HTML。不过，明智的做法是清理您的输入，以防止某种 XSS。

以下是有关该方法的一些文档:https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

关于JavaScript:如何获取用户选择，并在选择前后插入标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37871124/

上一篇：JavaScript - 如何使用 DOM 将多个 LI 放入 1 个 UL

下一篇：javascript - 这段代码如何导致缓冲区溢出

相关文章：

javascript - AngularJS 表单没有提交 ng-click 事件

javascript - YouTube 视频结束后隐藏 div

html - 如何使用 Nokogiri 将 HTML 转换为 Markdown？

html - Bootstrap 输入不是全宽且没有圆 Angular

javascript - 没有 jQuery/JS 库的连续 Ajax 请求

c# - 如何解析这段HTML？

html - Chrome 无法正确加载谷歌字体

jquery - 使用 css 更改文本来更改方形图案？

css - 正确定位绝对定位元素的工具提示

javascript - 将复选框标记复制到另一个表单

©2024 IT工具网  联系我们