محرر YUI (RTE): إدراج عنصر HTML ووضع المؤشر في الداخل

Question

لدي مشكلة. لقد كنت أحاول معالجة ذلك لفترة من الوقت الآن وأنا مستعد لتنفجر. إليك متطلباتي:
لدي شريط أدوات خارجي (وليس جزءا من YUI) أعلى المحرر الذي أريد استخدامه لإدراج علامات HTML. يجب أن يكون المستخدم قادرا على النقر فوق رابط على شريط الأدوات بعد ذلك قد يحدث عدد قليل من الأشياء:

1. إذا كان هناك أي نص محدد، يتم لف هذا النص في علامة HTML
2. إذا لم يكن هناك نص محدد، فسيتم إدراج علامة HTML فارغة في المحرر
3. بغض النظر عن السيناريو، يجب وضع المؤشر داخل العنصر الجديد، بحيث عندما يدخل المستخدم المزيد من النص، فإنه موجود في العنصر الجديد

تشبه هذه الوظيفة إلى أزرار الضغط "ب" أو "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!
}

ما الذي يجب أن أفعله لوضع المؤشر في الموضع الصحيح؟ هل هو ممكن؟ أيضا، إذا كانت هناك طريقة أفضل لتنفيذ هذا، فأنا جميعا لذلك. شكرًا لك!

Answer 1

هنا كاملة الحل:

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(); 
}

Answer 2

يتطلب وضع المؤشر أساليب مختلفة للمتصفحات المختلفة. مع أي سترغب في إنشاء textrange. كائن، في Mozilla، يمكنك الاستفادة من Window.Find () أو اختيار كائن، Webkit / Safari / Chrome تتطلب طريقة أخرى.