3

HTMLコードを挿入するために、テキストエリアの上にいくつかのボタンを作成しようとしています-非常に貧弱なHTMLエディターです。いくつかの INPUT 要素があり、jQuery を使用して、jQuery のappend()orhtml()またはtext()関数を呼び出すクリック ハンドラーを設定しています。

ハンドラーが起動し、debug alert() が表示されますが、追加しようとしているテキストがテキストエリアに表示されません。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 要素を .xml に追加しようとしていると思いますtextarea。

メソッドを使用して、次のように の値valを取得および設定してみてください。textarea

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

基本的な問題は、.html 内に HTML を配置できないことです<textarea>。実際、HTML 要素を要素に追加することはまったくできません。このメソッドを使用して、.val()内部に表示されるテキストを変更できますが、太字にはなりません。これ<b>により、テキストの一部として表示されるようになります。

TinyMCEのような市販の WYSIWYG エディターは無料で、簡単に実装できます。車輪を再発明するのではなく (見た目よりもはるかに難しい)、既存の車輪を試してみてください。

于 2009-08-26T01:39:56.443 に答える
1

SLaks と VoteyDisciple は正しいです。append を文字列関数として認識しているため、append の使用に誤りがあります。

http://docs.jquery.com/Manipulation/appendから

一致したすべての要素の内部にコンテンツを追加します。この操作は、一致したすべての要素の最後に要素を挿入するための最良の方法です。これは、指定されたすべての要素に対して appendChild を実行し、それらをドキュメントに追加することに似ています。

これが優れた競合製品を作成する試みであるか、独自の実験である場合を除き、これを一からやり直すことは、その価値よりも頭痛の種になる可能性があります.

また、要素にonclick='javascript:insert("bold")'埋め込まれた例で示したように、邪魔なJavaScriptの使用を避けます。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

主な問題がテキストエリアが表示されないことである場合、私はこれを試します：

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

試してみる価値があるかもしれません。

編集：車輪を再発明しようとしない無駄に、私はWYMEditorで成功しました

于 2009-08-26T01:39:54.400 に答える
0

あなたはこれを行うことができます：

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

ただし、実際にはテキストが太字になるわけではありません。正直なところ、テキストエリア内でテキストを太字にする方法が実際にはわかりません.jsのトリックを想像しています。

于 2009-08-26T01:47:03.723 に答える