CKEditor autogrow प्लगइन खड़ी स्क्रॉलबार अस्थिर मुद्दा

Question

मैं CKEditor autogrow प्लगइन के साथ समस्या हो रही है: (के बाद पिछले मिनट ऊंचाई ऑटो बढ़ रही है)

वापसी दबाने पर, पाठ्य सामग्री शेक (एक पंक्ति कूदता है और पीछे की ओर), और एक लंबवत स्क्रॉल बार फ्लिकर ऑन-एंड-ऑफ। ऑटोग्रो काम करता है, लेकिन उपयोगकर्ता अनुभव झटकेदार है।

मैं स्क्रॉलिंग = "नहीं" और ओवरफ्लो = "छुपा" निर्दिष्ट करके लंबवत स्क्रॉल बार को छुपा सकता हूं, लेकिन पाठ सामग्री अभी भी हिलाती है।

मैं ckeditor.js में स्क्रॉल अक्षम करने हूँ:

<iframe scrolling="no" style="width:100%;height:100%;overflow:hidden;" frameBorder="0" title="'+E+'"'+' src="'+W+'"'+' tabIndex="'+(b.webkit?-1:C.tabIndex)+'"'+' allowTransparency="true"'+'></iframe> 

CKEditor प्रवर्तन कोड:

 CKEDITOR.replace('Description', 
     { 
      sharedSpaces: 
      { 
       top: 'topSpace', 
       bottom: 'bottomSpace' 

      }, 
      extraPlugins: 'autogrow,tableresize', 
      removePlugins: 'maximize,resize,elementspath', 
      skin: 'kama', 
      toolbar: [['Format', 'Font', 'FontSize'], ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'], ['TextColor', 'BGColor'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['NumberedList', 'BulletedList'], ['Outdent', 'Indent'], 
      '/', ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], ['PasteText', 'PasteFromWord'],['Cut','Copy','Paste'], ['Undo', 'Redo'], ['Find', 'Replace'], ['SpellChecker']], 
      toolbarCanCollapse: false, 
      pasteFromWordRemoveFontStyles: false, 
      enterMode: CKEDITOR.ENTER_BR, 
      shiftEnterMode: CKEDITOR.ENTER_P, 
      autoGrow_minHeight: 300 

     }) 

वहाँ किसी भी तरह से/पाठ्य सामग्री कूद से बचने के लिए कुंजी दर्ज दबाने पर स्थानांतरण (है न्यूनतम ऊंचाई के बाद autogrowing के बाद)?

Answer 1

AFAIK इस समस्या को हल करने का एकमात्र तरीका सीकेडिटर के कोड को बदलना है। (मैं 'एंट्री कुंजी' ईवेंट को संभालने का सुझाव दूंगा क्योंकि यह होता है और समय-समय पर नहीं करता है)।

Answer 2

मैं आज एक फिक्स का परीक्षण कर रहा हूं और मुझे लगता है कि मेरे पास सभी प्रमुख ब्राउज़रों के लिए एक समाधान समाधान है। इसके अलावा, मैंने क्षैतिज स्क्रॉलबार आकार के मुद्दे के लिए एक फिक्स भी बनाया है (क्षैतिज स्क्रॉलबार संपादक के आकार में वृद्धि नहीं करता है)। हालांकि यह एक कट्टरपंथी होने के बावजूद समाप्त हुआ (सादगी स्क्रॉलबार की ऊंचाई के लिए 17 पिक्सेल हार्डकोड किया गया है) इसलिए मैं क्षैतिज स्क्रॉलबार फिक्स के साथ और बिना दोनों संस्करणों के साथ आपको प्रदान करूंगा।

मुझे पता है कि एक पैच बनाने का उचित तरीका होगा और इसे सीकेएडिटर की अगली रिलीज में लागू करने का सुझाव दिया जाएगा, लेकिन इसमें कुछ समय लगता है, इस बीच आप यहां क्या कर सकते हैं। आप नीचे दिए गए लिंक से संशोधित संकुचित plugin.js फ़ाइल डाउनलोड करने और रास्ते में अपने CKEditor में रखें /plugins/autogrow/plugin.js

• क्षैतिज स्क्रॉलबार ठीक बिना कर सकते हैं: http://www.filedropper.com/plugin_3
क्षैतिज स्क्रॉलबार ठीक साथ
• : http://www.filedropper.com/plugin_1

तो क्या बदला गया था?

मैं इन संशोधनों को असम्पीडित (_source फ़ोल्डर) फ़ाइलों के माध्यम से समझाऊंगा जो पठनीय हैं जबकि संकुचित फाइलें पढ़ने और समझने में काफी कठिन हैं।

मैंने ऑटोोग्रो अस्थायी मार्कर में छोटे बदलाव किए हैं जिसका उपयोग संपादक की नई ऊंचाई की गणना के लिए किया जाता है। यहाँ नए 19.

var marker = CKEDITOR.dom.element.createFromHtml('<span style="margin:0;padding:0;border:0;clear:both;width:1px;height:0px;font-size:0;display:block;">&nbsp;</span>', doc); 

तो ऊंचाई शून्य पिक्सल 1 पिक्सेल से बदल गया है _source (असंपीड़ित) autogrow/plugin.js लाइन में मार्कर कोड का संस्करण है, एक नॉन-ब्रेकिंग स्पेस हमेशा मार्कर तत्व के अंदर छपा है और फ़ॉन्ट आकार शून्य करने के लिए मजबूर किया जाता है। इन संशोधनों के बाद यह वास्तव में समस्या को हल करता है - इसके बजाय मार्कर को डीओएम से हटाकर तुरंत इसे 1 मिलीसेकंद टाइमआउट (असम्पीडित प्लगइन.जेएस फ़ाइल में लाइन 24) के माध्यम से हटा दिया जाता है।

setTimeout(function() { 
    marker.remove(); 
},1); 

क्षैतिज स्क्रॉलबार ठीक

यह सुस्त के बिट है। मैंने अभी एक चेक जोड़ा है कि क्या संपादक स्क्रॉलविड्थ क्लाइंट की तुलना में बड़ा है Width और यदि ऐसा है तो नए हाइट न्यूनतम और अधिकतम अनुमत मानों की जांच करने से पहले नए हाइट और वर्तमान हाइट चर में 17 पिक्सल जोड़ें।

// TODO: calculate horizontal scrollbar height instead of using static 17 pixels 
if (scrollable.$.scrollWidth > scrollable.$.clientWidth) { 
    newHeight += 17; 
    currentHeight += 17; 
} 

newHeight = Math.max(newHeight, min); 
newHeight = Math.min(newHeight, max); 

बजाय 17 पिक्सेल हार्डकोडेड मूल्य, विधि में How can I get the browser's scrollbar sizes? (या कुछ इसी तरह) descibed का उपयोग करने का

स्क्रॉलबार आकार की गणना करने के लिए यह सुधार अधिक उचित बनाने के लिए इस्तेमाल किया जा सकता।

Answer 3

1. contents.css ऐड:

   शरीर {अतिप्रवाह: छिपा हुआ;

newHeight:/छिपाएं autogrow झिलमिलाहट /}

plugin.js (resizeEditor) सेट "अतिरिक्त अंतरिक्ष उपयोगकर्ता द्वारा निर्दिष्ट" = 20 (परीक्षण करने के लिए कैश को साफ़ करने की आवश्यकता है) + = 20; // फिक्स ऑटोग्रो फ़्लिकर //(editor.config.autoGrow_bottomSpace || 0);

1. plugin.js (resizeEditor) की जगह:

अगर (स्क्रॉल $ scrollHeight> scrollable.clientHeight ...

के साथ:।।

//Fix Autogrow flicker: 
    //contents.css change (test: clear css cache): body {overflow:hidden; /*Hide Autogrow flicker*/} 
    var editorBody = $(editor.editable().$); 
    if (newHeight >= max) 
     editorBody.css('overflow-y', 'visible'); 
    else 
     editorBody.css('overflow-y', 'hidden');