असीमित तत्व डालने के बाद सीकेएडिटर कर्सर की स्थिति

Question

मुझे सीकेएडिटर प्लगइन विकसित करने में परेशानी हो रही है जो पाठ प्रवाह में अनुपयोगी सामग्री डालती है। मैं रेंज फ़ंक्शंस का उपयोग करने की कोशिश कर रहा हूं, लेकिन कम सफलता के साथ प्रलेखन तारकीय से कम है। तो, कुछ पाठ दिया, मान लीजिए कि प्लगइन आवेषण "[[असंपादित सामान]]" और फिर WYSIWYG प्रदर्शन पर लपेटता है कि एक अवधि तो यह एक रंग में स्टाइल किया जा सकता है में:

<p>This is some text[[uneditable stuff here]]</p>

जब पहली डालने uneditable सामान, हम चाहते हैं कि उपयोगकर्ता टाइपिंग या एक नई लाइन के लिए एंटर मारने पर जारी रखने में सक्षम हो। निम्नलिखित कोड (जो मैं यहाँ मिल गया: How to set cursor position to end of text in CKEditor?) फ़ायरफ़ॉक्स में काम करता है लेकिन (स्वाभाविक रूप से) नहीं IE9, 8, या 7 में:

var s = editor.getSelection(); 
editor.insertElement(e); // element 'e'= a span created earlier 
var p = e.getParent(); 
s.selectElement(p); 
var selected_ranges = s.getRanges(); 
selected_ranges[0].collapse(false); // false = to the end of the selected node 
s.selectRanges(selected_ranges); // putting the current selection there 

तो क्या मैं क्या करना चाहते है कि कर्सर स्थिति पर चला जाता है "^" :

<p>This is some text<span>[[uneditable stuff here]]</span>^</p>

नए तत्व पंक्ति के अंत में नहीं है, तो यह बनाने के बाद, कर्सर यहाँ के पास जाना चाहिए:

<p>This is some text<span>[[uneditable stuff here]]</span>^ with more text after the new element</p>

एफएफ में, मैं लाइन के अंत में कर्सर प्राप्त कर सकता हूं हालांकि नए तत्व के बाद स्थिति में नहीं। आईई में, कर्सर अभी भी नए स्पैन के अंदर है, जो मैं टाइप करता हूं जब मैं टाइप करता हूं और यह अभी भी अवधि के सीएसएस रंग में है, और SOURCE व्यू पर स्विच करते समय, टेक्स्ट चला गया है (क्योंकि यह एक अयोग्य अवधि है)।

मुझे पता है कि वहाँ एक श्रेणी है .setStartAfter विधि, लेकिन यह एफएफ/क्रोम में भी इसे काम करने में पूरी तरह असमर्थ रही है।

क्या किसी के पास सीकेडिटर में रेंज और चयन विधियों का उपयोग करने पर वास्तव में अच्छा संभाल है? मुझे पता है मैं नहीं!

यह सोचने लगते हैं कि केवल संपादक का उपयोग करना .insertElement गलत है, और मुझे FakeElement (insertBogus?) फ़ंक्शंस के बारे में जानना चाहिए, जो मुझे समझ में नहीं आता है। लिंक और छवियों के लिए स्टॉक प्लगइन्स में यह समस्या प्रतीत नहीं होती है।

Answer 1

मुझे इसे हल करने के लिए कुछ चुस्त चीजें करना पड़ा, लेकिन इसे हल किया गया: गैर-संपादन योग्य आइटम (विशेषता सामग्री के साथ एक अवधि-संपादन योग्य: झूठी) बनाने के बाद मुझे टेक्स्ट के साथ "डमी" अवधि बनाना पड़ा एक जगह से मिलकर। तो, मैं असली अवधि, फिर डमी डालें। लेकिन केवल एक नया आइटम बनाते समय।

तो यह "किसी चयनित आइटम को संपादित करने से निपटने से नहीं" अनुभाग में जाता है। यहां, 'ए' संपादक का उदाहरण है, 'ई' वांछित गैर-संपादन योग्य वस्तु है, 'एफ' डमी अवधि है।

var e=new CKEDITOR.dom.element('span',a.document); 
e.setAttributes({// stuff to create our element}); 
var f=new CKEDITOR.dom.element('span',a.document); 
f.setAttributes({ 
    'class':'dummyF' 
}); 
f.setText(' '); // that's just one space 

// after section dealing with editing a selected item, in "else": 
var sel = a.getSelection(); // current cursor position 
a.insertElement(e); // the real new element 
if(CKEDITOR.env.ie || CKEDITOR.env.webkit){ // IE & Chrome like this way 
    f.insertAfter(e); 
    sel.selectElement(f); 
} 
else { //FF likes this way (to ensure cursor stays in the right place) 
    f.insertAfter(e); 
    var rangeObjForSelection = new CKEDITOR.dom.range(a.document); 
    rangeObjForSelection.selectNodeContents(f); 
    a.getSelection().selectRanges([ rangeObjForSelection ]); 
} 

मुझे यह मानना ​​है कि मैं पूरी तरह से अपना कोड समझ नहीं पा रहा हूं। मैं परीक्षण और त्रुटि के घंटों के माध्यम से वहाँ गया। ओह, और मैं से छुटकारा पाने के लिए एक htmlFilter नियम जोड़ने के लिए किया था छोड़ दिया पर 'म' तत्वों:

e.addRules({ 
    // e is the htmlFilter: applied to editor data before/upon output 
    elements:{ 
    span:function(s){ // 's' is any spans found in the editor 
     if(s.attributes&&s.attributes['data-cke-myelement']) { 
      //stuff to do with my element 
     } 
     else if(s.attributes['class']=='dummyF') { //CKEDITOR.env.ie&& 
      // for dummy spans to deal with "can't type or hit enter after new element" problem 
      realtext = new String(s.children[0]['value']); 
      realtext.replace(/^ /,''); 
      s.children[0]['value'] = realtext; 
      delete s.name; 
     } 
    } 
    } 
}); 

मैं भी जोड़ने के लिए है कि मैं क्यों मैंने पहले "nbsp" संस्थाओं को बदलने के लिए किया था याद नहीं है है अवधि को हटा रहा है। लेकिन यह काम करता है। और मुझे नहीं पता कि आप इसे हटाने के बजाय "s.name" का उपयोग क्यों करते हैं।

उम्मीद है कि किसी की मदद करता है।

Answer 2

मैं एक ही मुद्दे का सामना करना पड़ा है और मैं में <span>&#8203; + element + &#8203;</span>

const eHtml = '<span>&#8203; ' + svgHtml + '&#8203;</span>'; // Wrap element in a span with sorrounding &#8203; 
const wrpEl = CKEDITOR.dom.element.createFromHtml(eHtml); 
editor.insertElement(wrpEl); 
wrpEl.remove(true); // Remove wrapping span leaving children. 

यह मेरे लिए ठीक काम किया मेरी एसवीजी तत्व लपेटकर से पहले और मेरे असंपादित सामग्री (SVG तत्व) के बाद कर्सर है करने में सक्षम था, अब मैं कर रहा हूँ एसवीजी तत्व पर अंत में शुरुआत और अंत में इलाज प्राप्त करें।