3

私は問題があります。私はしばらくの間それに取り組もうとしてきました、そして私は爆発する準備ができています. 私の要件は次
のとおりです。HTML タグを挿入するために使用したいエディターの上に外部ツールバー (YUI の一部ではない) があります。ユーザーがツールバーのリンクをクリックできるようにする必要があります。その後、いくつかのことが発生する可能性があります。

  1. 選択されたテキストがある場合、このテキストは HTML タグにラップされます
  2. 選択されたテキストがない場合、空の HTML タグがエディターに挿入されます
  3. シナリオに関係なく、カーソルは新しい要素内に配置する必要があります。これにより、ユーザーがさらにテキストを入力したときに新しい要素に常駐します。

この機能は、エディターのツールバーで「B」または「U」ボタンを押すのと非常によく似ています (このエディターを使用しているので、これもうまく機能します :-))。それはすべてをきれいに保ちます。これまでのところ、1 または 2 は実行できますが、3 は実行できません。ステップ 3 は非常に重要です。これがないと、ユーザー エクスペリエンスが大幅に損なわれるからです。私はそれを実装するためにあなたの助けが本当に必要です. 以下は、挿入を実行するメソッドの単純化されたバージョンです (単純化のために DIV を挿入するだけです)。this._oEditor - YUI エディターのローカル インスタンス:

this._insertElement = function() {
var sSelection = this._oEditor._getSelection(); // Attempt to get selected text from the editor
if (sSelection == '') sSelection = ' '; // If nothing was selected, insert a non-breaking space

var sNewElt = '<div>' + sSelection + '</div>';

this._oEditor.execCommand('inserthtml', sNewElt);

this._oEditor.focus(); // This gives the editor focus, but places cursor in the beginning!
}

カーソルを正しい位置に配置するにはどうすればよいですか? それは可能ですか？また、これを実装するためのより良い方法があれば、私はそれで大賛成です。ありがとうございました！

4

2 に答える 2

3

ソリューションは次のとおりです。

this._insertElement = function() {
   var sSelection = this._oEditor._getSelection(); 
  if (sSelection == '') sSelection = ' '; 

  var sNewElt = '<div>' + sSelection + '</div>';

  this._oEditor.execCommand('inserthtml', sNewElt);

  var pos = 1000; //pos determines where to place the cursor. if greater than the length of characters, it will place at the end.
  if(this._oEditor.createTextRange) { //IE Specific code
        var range = this._oEditor.createTextRange();   
        range.move("character", pos);   
        range.select();   
    } else if(this._oEditor.selectionStart) {  //Works with Firefox and other browsers 

        this._oEditor.focus();   
        this._oEditor.setSelectionRange(pos, pos);   
  }  
  this._oEditor.focus(); 
}
于 2009-04-28T02:22:00.593 に答える
1

カーソルを配置するには、ブラウザごとに異なる方法が必要です。IEではTextRangeオブジェクトを作成する必要がありますが、Mozillaではwindow.find（）またはSelectionオブジェクトを使用できます。webkit/ safari/chromeにはさらに別のメソッドが必要です。

于 2009-04-28T01:33:04.657 に答える