创建我的WYSIWYG编辑器 - JavaScript奇怪的行为

时间:2014-01-27 16:36:33

标签: javascript html wysiwyg

我正在使用Visual Text编辑器。它工作得体,预览工作完美,我的JS附加也是如此。 HTML就是这个:

<div class="wysiwyg">
    <div class="wystitle">What You See Is What You Get<br>Editor by ShowTime</div>
    <div class="wysmenu"><button class="wysbutton" onClick="addBold()">Bold</button><button class="wysbutton">Italic</button><button class="wysbutton">Underline</button><button class="wysbutton">Link</button><button class="wysbutton">Color</button><button class="wysbutton">Quote</button></</div>
    <textarea rows="9" cols="145" id="wystext"></textarea><br>
    <button class="wysbutton" onClick="preview()">Preview</button><button class="wysbutton">Post!</button>
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<div class="wyspreview" id="wyspreview">Hit 'Preview' To See the Post General Look<br>Hit 'Post' To Create the Blog Post</div>

我想让Bold按钮只需添加 TEXT HERE 。这是JAvaScript:

function preview() {
    var preview = document.getElementById("wystext").value;
    document.getElementById("wyspreview").innerHTML = preview;
}

function addBold() {
    var text = document.getElementById("wystext").value;
    document.getElementById("wystext").innerHTML = text + "<strong></strong>";
    var text = null;
}

addBold函数正常工作,但只要我输入文本区域,它就不再起作用了。有什么想法吗?

2 个答案:

答案 0 :(得分:0)

您应该将文本放在标记内:

"<strong>" + text + "</strong>"

jsfiddle作为例子,也会有所帮助。

答案 1 :(得分:0)

没关系,找到了修正,只是将innerHTML编辑为value

可能会对某些用户有所帮助。