3

我正在尝试在 textarea 上方创建几个按钮来插入一些 HTML 代码——一个非常穷人的 HTML 编辑器。我有几个 INPUT 元素，并且我正在使用 jQuery 设置一个单击处理程序，该处理程序将调用 jQuery 的append()or html()ortext()函数。

处理程序触发，它显示一个调试警报（），但我试图附加的文本没有出现在文本区域中。当我在 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;  
    }
}
4

5 回答 5

11

我猜想 jQuery 正在尝试将 HTML DOM 元素附加到textarea.

尝试使用该val方法获取和设置textarea' 值，如下所示：

$('#PersonalGreeting').val($('#PersonalGreeting').val() + '<b>bold text here</b>');
于 2009-08-26T01:36:48.427 回答
1

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

像TinyMCE这样的现成 WYSIWYG 编辑器是免费且易于实现的。与其重新发明轮子（这比看起来要困难得多），不如尝试现有的轮子。

于 2009-08-26T01:39:56.443 回答
1

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);
  });
});
于 2009-08-26T01:50:58.463 回答
0

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

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

可能值得一试。

编辑：没有尝试重新发明轮子，我在WYMEditor上取得了成功

于 2009-08-26T01:39:54.400 回答
0

你可以这样做：

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

但这实际上不会将文本呈现为粗体。老实说，我实际上并不确定如何在 textarea 中将文本渲染为粗体，我认为有一些 js 诡计。

于 2009-08-26T01:47:03.723 回答