Question

我正在尝试在textarea上面创建几个按钮来插入一些HTML代码 - 一个非常糟糕的HTML编辑器。我有几个INPUT元素，我正在使用jQuery设置一个点击处理程序，它将调用jQuery的append()或html()或text()函数。

处理程序触发，它显示调试警报（），但我试图追加的文本没有显示在textarea中。当我检查Firebug中的textarea时，我看到我作为textarea的子项附加的文本 - 但它变暗了，就像元素的样式设置为display：none。但Firebug的CSS检查员没有显示任何显示或可见性属性的变化。

当我将点击处理程序设置为'append（）'，然后多次单击时，在Firebug中我看到一遍又一遍地添加文本 - 但每个新块仍然是不可见的。如果我在Firebug中选择“编辑HTML”，然后在附加文本旁边键入一些字符，整个文本块 - 由jQuery添加的文本和我在Firebug中添加的内容 - 突然出现。

如果我不使用点击处理程序，但使用像onclick="javascript:insert('bold');"

这样的内联处理程序调用我的追加函数，也会发生这种情况。

任何人都知道为什么不显示附加文字？

以下是相关代码：

HTML：

<input type='button' id='bold' value='B' onclick='javascript:insert("bold")' />

<textarea name='PersonalGreeting' id='PersonalGreeting'>default text</textarea>

Javascript：

function insert( cmd )  {
    switch ( cmd )  {
        case 'bold':
            $('#PersonalGreeting').append('<b>bold text here</b>');
            break;  
    }
}

Answer 1

我猜想jQuery正试图将HTML DOM元素附加到textarea。

尝试使用val方法获取并设置textarea的值，如下所示：

$('#PersonalGreeting').val($('#PersonalGreeting').val() + '<b>bold text here</b>');

Answer 2

基本问题是您无法将HTML放在<textarea>中。实际上，您根本无法将HTML元素附加到一个元素。您可以使用.val()方法更改内部显示的文本，但这不会使其变为粗体。这只会使<b>显示为文本的一部分。

现成的WYSIWYG编辑器如TinyMCE免费且易于实施。而不是重新发明轮子（这是一个很多比它看起来更难），尝试现有的轮子。

Answer 3

SLaks和VoteyDisciple是正确的。当你将它视为字符串函数时，你对append的使用是错误的。

来自http://docs.jquery.com/Manipulation/append

将内容添加到每个内部匹配元素。这个操作是在里面插入元素的最佳方法所有匹配元素的结尾。它类似于做一个appendChild 所有指定的元素，添加他们进入文件。

重新启动这个问题可能比它的价值更令人头痛，除非这是为了创造一个优越的竞争产品或自己的实验。

此外，我会回避使用突出的JavaScript，因为您在onclick='javascript:insert("bold")'元素中嵌入了input的示例中显示了这一点。相反，您将拥有更优雅的解决方案，如下所示：

<强> HTML

<input type="button" value="B" class="editor-command" >
<input type="button" value="I" class="editor-command" >
<input type="button" value="U" class="editor-command" >

JavaScript （未经测试）

$(document).ready(function() {
  var textarea = $('#PersonalGreeting')
  $(".editor-command").each(function(i, node) {
    textarea.val(textarea.val() + '<$>text here</$>'.replace(/\$/g, node.value);
  });
});

Answer 4

如果主要问题是textarea不可见，我会尝试这个：

$('#PersonalGreeting').append('<b>bold text here</b>').show();

可能值得一试。

编辑：没有试图重新发明轮子，我已经取得了成功WYMEditor

Answer 5

你可以这样做：

 $('#PersonalGreeting').append('[b]bold text here[/b]');

但这实际上不会将文本呈现为粗体。说实话，我实际上并不确定如何在textarea中将文本呈现为粗体，我还有一些js技巧。

jQuery附加文本是不可见的

5 个答案: