Having an issue with a function that registers buttons above a textarea to insert bbcode. It works well when there's only one editor on a page, but problems arise with multiple editors.
Visit this example for reference: http://codepen.io/anon/pen/JWOzZj
In the example, you'll notice that the buttons in the second editor work fine, while those in the first do not and seem to overwrite everything into the last editor created.
Since I'm not proficient in JS, I'm hopeful it's a simple fix to make it reusable.
Below is the provided JS code:
/*
* 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);
}
}
/* More of the JS code continues... */
And here's the HTML code related to the form:
<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>