javascript - 对如何重用这个 javascript 函数感到困惑

Question

所以我有一个函数可以注册文本区域上方的所有按钮，以将 bbcode 插入该文本区域。它工作得很好，直到我在同一页面上有不止一个这样的编辑器。

此处示例:http://codepen.io/anon/pen/JWOzZj

您将在该示例中看到，第二个编辑器的按钮有效，但第一个无效，因为它似乎将所有内容都覆盖到最后一个编辑器中。

我对 JS 不是很在行，所以我希望它能简单地被重用。

这是JS代码:

/*
 * Forked from Octus Editor: https://github.com/julianrichen/octus-editor MIT license
 */
function OctusEditor(editor_id) 
{
    var editor_bar = 'bar_' + editor_id;
    var this_editor = document.getElementById(editor_id);
    /*
     * init()
     *
     * Start editor
     */
    function init() 
    {
        var quotes  = document.querySelectorAll('[data-quote]');

        // Register tags
        registerElements(editor_bar);

        // Register all possible quotes.
        for (var x = 0; x < quotes.length; x++) 
        {
            quotes[x].addEventListener("click", registerQuote, false);
        }
    }

    /*
     * registerElements()
     *
     * Register all tags from each editor
     */
    function registerElements(id) 
    {
        // Get all styles
        var tags    = document.querySelectorAll('#' + editor_bar + ' .styles ul li[data-tag]'),
            snippet = document.querySelectorAll('#' + editor_bar + ' .styles ul li[data-snippet]');
        // register all the tags
        for (var i = 0; i < tags.length; i++) 
        {
            // Log editor id
            tags[i].editor_id = id;
            // Add click event
            tags[i].addEventListener("click", registerTag, false);
        }

        // register all the snippets
        for (var x = 0; x < snippet.length; x++) 
        {
            // Log editor id
            snippet[x].editor_id = id;
            // Add click event
            snippet[x].addEventListener("click", registerSnippet, false);
        }
    }

    /*
     * registerTag()
     *
     * Get tag from each editor
     */
    function registerTag() 
    {
        // Get textarea
        var dataTag = this.dataset.tag;

        // Do we have a sub class?
        if(this.dataset.subtag) 
        {
            // Fire tag
            createTag(dataTag, this.dataset.subtag);
        } 
        else 
        {
            // Fire tag
            createTag(dataTag);
        }
    }

    /*
     * registerSnippet()
     *
     * Get tag from each editor
     */
    function registerSnippet() 
    {       
        // Fire snippet
        snippet(this.dataset.snippet);
    }

    /*
     * registerQuote()
     *
     * Register all quotes
     */
    function registerQuote() 
    {
        var username = this.dataset.quote;
        var text = this.dataset.comment;
        quote(text, username);
    }

    /*
     * quote()
     *
     * Insert a quote, decodeEntities sorts out the html for the textarea
     */
     function decodeEntities(encodedString)
     {
         var textArea = document.createElement('textarea');
         textArea.innerHTML = encodedString;
         return textArea.value;
     }

     function quote(text, name)
     {
         text = decodeEntities(text);

         content = "[quote=" + name + "]" + text;
         content += "[/quote]";

         this_editor.value += content;
     }

    /*
     * bbcode()
     *
     * Insert tag
     */
    function createTag(tag, subtag) 
    {
        var selected,
            ins,
            sel,
            popUpData;
        // Add a sub tag?
        if (typeof subtag != 'undefined') 
        {
            subtag = '=' + subtag;
        } 
        else 
        {
            subtag = '';
        }

        this_editor.focus();

        if (typeof this_editor.selectionStart != 'undefined') 
        {
            selected = this_editor.value.slice(this_editor.selectionStart, this_editor.selectionEnd);
        } 
        else if (document.selection && document.selection.type != 'Control') // for IE compatibility
        { 
            selected = document.selection.createRange().text;
        }

        popUpData = popUp(tag, subtag, selected);
        if(popUpData === null || typeof popUpData == 'undefined') 
        {
            return;
        }
        tag      = popUpData[0];
        subtag   = popUpData[1];
        selected = popUpData[2];
        ins = '[' + tag + '' + subtag + ']' + selected + '[/' + tag +']';
        if (!document.execCommand("insertText", false, ins)) 
        {
            this_editor.value = this_editor.value.slice(0, this_editor.selectionStart) + ins + this_editor.value.slice(this_editor.selectionEnd);
        }
    }

    /*
     * snippet()
     *
     * Insert snippet
     */
    function snippet(tag) 
    {
        var selected,
            ins,
            sel;

        this_editor.focus();

        if (typeof this_editor.selectionStart != 'undefined') 
        {
            selected = this_editor.value.slice(this_editor.selectionStart, this_editor.selectionEnd);
        } 
        else if (document.selection && document.selection.type != 'Control') // for IE compatibility
        { 
            selected = document.selection.createRange().text;
        }

        popUpData = popUp(tag, selected);
        if(popUpData === null || typeof popUpData == 'undefined') 
        {
            return;
        }
        tag      = popUpData[0];
        selected = popUpData[1];
        ins = tag + selected;
        if (!document.execCommand("insertText", false, ins)) 
        {
            this_editor.value = this_editor.value.slice(0, this_editor.selectionStart) + ins + this_editor.value.slice(this_editor.selectionEnd);
        }
    }

    /*
     * getYouTubeID()
     *
     * Get YouTube ID
     */
     function getYouTubeID(input)
     {
        var id;

        var this_button = document.getElementById('youtube-bbcode');
        var yt_limit = this_button.getAttribute('data-limit');

        if(input === "") 
        {
            input = window.prompt('Enter YouTube URL, limited to ' + yt_limit + ' per post');
        }
        id = input.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i);
        if(id === null) 
        {
            return null;
        }
        return id[1];
    }

    /*
     * popUp()
     *
     * Checks if a pop-up needs to be called
     */
    function popUp(tag, subtag, selected) 
    {
        var data;

        if(tag == 'youtube') 
        {
            selected = getYouTubeID(selected);
            if(selected === null) 
            {
                return null;
            }
        } 
        else if(tag == 'url' && selected != "") 
        {
            subtag = window.prompt('Enter a valid URL');
            if(subtag === null || subtag === '') 
            {
                return null;
            } 
            else 
            {
                subtag = '=' + subtag;
            }
        } 
        else if(tag == 'url' && selected === "") 
        {
            subtag = window.prompt('Enter a valid URL');
            if(subtag === null || subtag === '') 
            {
                return null;
            } 
            else 
            {
                subtag = '=' + subtag;
            }
            selected = window.prompt('URL link text');
            if(selected === null || selected === '') 
            {
                selected = 'link';
            }
        }

        data = [tag, subtag, selected];

        return data;
    }

    /*
     * Allow keyboard shortcut
     *
     * All people to use keyboard shortcut
     */
    document.onkeydown = function(e) 
    {
        var field = document.getElementById(editor_id);
        if (field === document.activeElement)
        {
            var key = e.keyCode || e.which;
            if (e.ctrlKey) 
            {
                switch (key) 
                {
                    //http://help.adobe.com/en_US/AS2LCR/Flash_10.0/00000520.html
                    case 66: // Ctrl+B
                        e.preventDefault();
                        createTag(field, 'b');
                        break;
                    case 73: // Ctrl+I
                        e.preventDefault();
                        createTag(field, 'i');
                        break;
                    case 85: // Ctrl+U
                        e.preventDefault();
                        createTag(field, 'u');
                        break;
                    case 76: // CTRL+L
                        e.preventDefault();
                        createTag(field, 'url');
                        break;
                }
            }
        }
    };

    // Init
    init();
}

以及表单的 HTML:

<script type="text/javascript">
window.onload = function() {
    OctusEditor('test');
};
</script>
    <div id="bar_test" class="octus-editor group">
            <div class="styles group">
                <ul>
                <li data-tag="b" class="bold" accesskey="B">B</li>
                <li data-tag="i" class="italic" accesskey="I">I</li>
                <li data-tag="u" class="underline" accesskey="U">U</li>
                <li data-tag="s" class="strike">S</li>
                </ul>
                <ul>
                <li data-tag="img">img</li>
                <li data-tag="url">url</li>
                </ul>
                <ul>
                <li data-tag="code">code</li>
                <li data-tag="quote">quote</li>
                <li data-tag="spoiler">spoiler</li>
                </ul>
        </div>
            <div class="textarea group">
                <textarea name="{:name}" rows="3" cols="17" id="test"></textarea>
            </div>
    </div>

Answer 1

组合你的 onload 函数:

window.onload = function() {
    OctusEditor('test');
    OctusEditor('test2');
};

codepen