javascript - 文本区域中的两个插件

Question

我需要在页面的一个元素中使用两个插件。我从来不需要这样做并尝试过，正如下面的代码所示。大多数都不起作用!

<script type="text/javascript">
$(document).ready(function() 
{
    var wbbOpt = {buttons: "bold,italic,underline,|,img,link,|,code,quote"}

    // plugin one wysibb
    $("#editor").wysibb(wbbOpt);
    // plugin two hashtags
    $("#editor").hashtags();
    //the two plugin worked in textarea #editor
});
</script>

有人可以帮助我吗？谢谢。

Answer 1

所以你不能使用它们，因为它们每个都控制并包装文本区域。由于编辑器是两者中最复杂的，因此最好的办法是获取主题标签的代码并根据您的需要进行调整。

这是一个工作示例，但如果您愿意，可以触发我用于更改事件的函数(添加它)或其他方式

<div id="higlighter" style="width;1217px;"></div>
<textarea id="editor"></textarea>
<br />
<input id="btn" type="button" value="HASH">
<br />

$(document).ready(function() {
var wbbOpt = {
buttons: "bold,italic,underline,|,img,link,|,code,quote"
};


$("#editor").wysibb(wbbOpt);    

$('#btn').click(function () { report() });

});


function report() {

    $("#hashtag").val($("#editor").htmlcode());

            var str = $("#editor").htmlcode();
            str = str.replace(/\n/g, '<br>');
            if(!str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?#([a-zA-Z0-9]+)/g)) {
                if(!str.match(/#([a-zA-Z0-9]+)#/g)) {
                    str = str.replace(/#([a-zA-Z0-9]+)/g,'<span class="hashtag2">#$1</span>');
                }else{
                    str = str.replace(/#([a-zA-Z0-9]+)#([a-zA-Z0-9]+)/g,'<span class="hashtag2">#$1</span>');
                }
            }
            $("#editor").htmlcode(str);

}

您可以在 jsfiddle 上查看工作代码。 http://jsfiddle.net/4kj7d6mh/2/

您可以输入文本并使用编辑器，当您想要突出显示主题标签时，请单击按钮。如果您希望自动发生，则必须更改此行:

 $('#btn').click(function () { report() });

并将该函数附加到按键上(例如进行一些实验)