textarea中的两个插件

时间:2014-08-28 11:59:09

标签: javascript jquery

我需要在页面上的一个元素中使用两个插件。我从来不需要这样做,并尝试在下面的代码中。大部分都不起作用!

<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>

任何人都可以帮助我吗?谢谢。

1 个答案:

答案 0 :(得分:0)

所以你不能使用它们因为每个人都控制并包裹textarea。由于编辑器是两者中最复杂的,所以最好的做法是采用标签的代码并根据需要进行调整。

所以这是一个有效的例子,但是如果你想要你可以触发我用于更改事件的函数(添加它)或其他方式

<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/

您可以键入文本并使用编辑器,当您想高亮显示hastag时,单击按钮。如果您希望自动发生这种情况,您必须更改此行:

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

并将功能附加到按键上(例如实验)