2011-12-15 14 views
15

मैं (HTML निर्यात क्षमता के साथ) एक अमीर-पाठ संपादक का प्रयास कर रहा हूँ में contenteditable/designMode मैं पर काम कर रहा हूँ, और contentEditable/designMode के लिए iOS 5 के वेबकिट सहायता का उपयोग करने का फैसला किया। मैंने एक समस्या के साथ एक दीवार मारा है जो मुझे चाहिए जो टूट रहा है। UIWebView में सामग्री को संपादित करते समय, कर्सर का पालन करने के लिए कोई स्वचालित स्क्रॉलिंग नहीं है, उदाहरण के लिए, UITextView में। टाइप करते समय, कर्सर scrollView के अंतर्गत जारी रहता है और उपयोगकर्ता को मैन्युअल रूप से स्क्रॉल करना पड़ता है।स्वचालित स्क्रॉल जब एक iPhone आवेदन के लिए एक UIWebView

- (void)webViewDidFinishLoad:(UIWebView *)webView 
{ 
    NSString *string = @"document.body.contentEditable=true;document.designMode='on';void(0)"; 
    [webView stringByEvaluatingJavaScriptFromString:string]; 

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil]; 
} 

कोई भी विचार कैसे इस समस्या का प्रतिकार करने के लिए:

यहाँ कुछ प्रासंगिक कोड है? मुझे यकीन नहीं है कि यह सफारी में भी होता है या केवल UIWebView के वेबकिट कार्यान्वयन में होता है।

यदि आप इस समस्या को दबाते हैं, तो https://bugreport.apple.com पर जाएं और डुप्लिकेट rdar: // 16455638 पर डुप्लिकेट करें।

उत्तर

3

अपने स्वयं के प्रश्न का उत्तर देने के लिए, हम अंततः यह सुनिश्चित करने के लिए बहुत सारे काम कर रहे हैं कि यह कई आईओएस संस्करणों में सही ढंग से काम करता है। हमने पाया कि सभी स्क्रॉल घटनाएं UIWebView के कारण UIWebScrollView प्रबंधित करने की कोशिश कर रही थीं। हमने UIWebView का उपयोग करने के बजाय निर्णय लिया, हम आंतरिक UIWebDocumentView/UIWebBrowserView ले लेंगे और इसे अपने स्वयं के स्क्रॉल व्यू में जोड़ देंगे। इसने हमें सामग्री के आकार को प्रबंधित करने और खुद को स्क्रॉल करने की अनुमति दी और हमने पहले जिन समस्याओं का अनुभव किया उनमें से अधिकांश को हटा दिया।

+0

मैं इस मार्ग का पता लगाना चाहता हूं, लेकिन मुझे चिंतित है क्योंकि वे निजी वर्ग हैं जो मुझे लगता है (वास्तव में दस्तावेज नहीं)। जब आपने यह ऐप सबमिट किया था तो क्या आपके पास कोई समस्या थी? क्या ऐसा करने के लिए "सुरक्षित" तरीके हैं और चीजों से बचने के लिए? जैसे, ऐप स्टोर अस्वीकृति से बचने के लिए, क्या आपको UIWebView बनाना है और फिर इन अन्य वर्गों को सीधे बनाकर दृश्यों को प्रतिबिंबित करना है? – eselk

+1

@eselk हम कई चाल, जैसे कि विधि swizzling, आईएसए swizzling, आदि का उपयोग करें। इस मामले में, यह बहुत आसान है। हम स्क्रॉल व्यू से सबव्यू लेते हैं, जो सार्वजनिक एपीआई में उजागर होता है और इसे दूसरे स्क्रॉलव्यू में जोड़ता है, जो हमारे नियंत्रण में है। –

+0

@LeoNatan क्या आप इसके लिए कुछ कोड लिख सकते हैं? – iDhaval

1

सबसे पहले आपको कीबोर्ड नोटिफिकेशन पंजीकृत करना होगा, और उस कीबोर्ड में WillShow विधि, 0.1 टाइमर अंतराल के साथ स्क्रॉल विधि को ट्रिगर करें।

-(void) keyboardWillShow:(NSNotification *)note 
    { 

     timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(scroll) userInfo:nil repeats:YES]; 

    } 

    -(void) keyboardWillHide:(NSNotification *)note 
    { 
     [timer invalidate]; 

    } 

ज फ़ाइल में एक सदस्य चर करें और और init में इसके लिए स्मृति को आबंटित() विधि।

NSString *prevStr; 

उस स्क्रॉल विधि के अंदर, निम्न कार्य करें।

-(void)scroll{ 

    if (![prevStr isEqualToString:[WebView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"]]) { 
     prevStr = [[WebView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"] retain]; 
     NSInteger height = [[WebView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight;"] intValue]; 
     NSString* javascript = [NSString stringWithFormat:@"window.scrollBy(0, %d);", height]; 
     [WebView stringByEvaluatingJavaScriptFromString:javascript]; 
    } 

} 

यह सामग्री को संपादित करते समय आपको नीचे स्क्रॉल करने की अनुमति देगा और सामग्री वेबव्यू फ्रेम से बड़ी है। और दूसरी बार आप पृष्ठ के शीर्ष पर स्क्रॉल करने में सक्षम होंगे (उस समय ऑटोस्कोल दबाया जाएगा)।

+0

हाय सेल्विन, क्या वह नीचे वेबव्यू को स्क्रॉल नहीं करेगा? यह ऐसा कुछ नहीं है जो मुझे हर समय चाहिए। उदाहरण के लिए, यदि मेरे पास लंबा टेक्स्ट है और मैं टेक्स्ट के बीच में क्लिक करता हूं, तो कर्सर को जहां क्लिक किया जाना चाहिए, नीचे स्क्रॉल न करें। या शायद मुझे गलत समझा? –

+0

हाय @ लियो। दुख की बात है कि मैं नहीं जानता कि यह कैसे करें। क्योंकि जब आप टेक्स्ट के मध्य में कर्सर लगा रहे हैं तो मैं स्क्रॉलव्यू का वर्तमान ऑफसेट प्राप्त नहीं कर पा रहा हूं। शायद हमें वर्तमान सामग्री ऑफसेट प्राप्त करने का प्रयास करना चाहिए और यदि यह नीचे के नजदीक नहीं है, तो हमें ऑटोस्क्रॉल को रोकना होगा । – Selvin

10

शोध के घंटों के बाद मुझे एक बेहतर समाधान मिला, इसलिए मैंने सोचा कि मैं साझा करूंगा।

आईओएस 5 की सामग्री में एक बग है संपादन योग्य कार्यान्वयन जहां मुख्य स्क्रॉल व्यू कैरेट के साथ स्क्रॉल नहीं करेगा। यदि बॉडी टैग (या कोई गतिशील रूप से आकार का तत्व) सामग्री बनाना उचित है, तो कैरेट हमेशा स्क्रीन बंद हो जाएगा।

यदि आप संपादन योग्य div को ओवरफ़्लो पर सेट करते हैं: स्क्रॉल, आप देखेंगे कि div स्क्रॉल करेगा। Div की स्क्रॉलिंग "बाउंस" नहीं करती है या डिफ़ॉल्ट रूप से स्क्रॉल बार नहीं होती है, लेकिन आप इसे ठीक करने के लिए div में -webkit-overflow-scrolling: touch विशेषता लागू कर सकते हैं।

इस जानकारी के साथ

, तो आप ऐसा तरह एक आवरण के साथ इसे ठीक कर सकते हैं:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> 
<style type="text/css"> 
    html, body {height: 100%;} 
    body { 
     margin: 0; 
    } 
    #wrap { 
     height: 100%; 
     width: 100%; 
     overflow-y: scroll; 
     -webkit-overflow-scrolling: touch; 
    } 
    #editor { 
     padding: 10px; 
    } 
</style> 
</head> 
<body> 
<div id="wrap"> 
    <div id="editor" contenteditable="true"> 

    </div> 
</div> 
</body> 
</html> 

मूल रूप से आप के बजाय दस्तावेज़ के div स्क्रॉल कर रहे हैं।

असुविधाजनक रूप से div की "scrollView" वर्चुअल कीबोर्ड से अवगत नहीं है, इसलिए कीबोर्ड के पीछे कैरेट गायब हो जाएगा। हालांकि, आप देखेंगे कि कीबोर्ड के पीछे की ओर स्थित कैरेट स्थिति अभी भी स्क्रीन पर है। तो इसे ठीक करने के लिए, कीबोर्ड को समायोजित करने के लिए div/UIWebView की ऊंचाई को कम करें।बाकी

कुछ आप क्या करना चाहते हो सकता है मुख्य scrollview पर अक्षम स्क्रॉल है:

webView.scrollView.scrollEnabled = NO; 

मुख्य scrollview वैसे भी स्क्रॉल नहीं करना चाहिए, लेकिन यह किसी भी स्क्रॉल खामियों रोकने चाहिए।

+0

हाय ल्यूक, मैं आपके उत्तर को स्वीकृत उत्तर के रूप में सेट कर दूंगा। मैंने वास्तव में इसे स्वयं का प्रयास किया है ('-webkit-overflow-scrolling') को स्कैन करता है, लेकिन दुर्भाग्य से यह अभी भी कुछ हद तक छोटी थी। मैं स्वीकार कर रहा हूं क्योंकि यह प्रश्न में मुझे जो चाहिए था उससे निकटतम है। –

+0

मैं जोड़ता हूं कि आपके पास # रैप नहीं है, आप उस सीएसएस को शरीर पर स्विच कर सकते हैं, और यह भी काम करेगा। – Heilemann

+1

ग्रेट समाधान! लेकिन मैंने एक छोटा मुद्दा देखा - यदि मैं एक शब्द का चयन (हाइलाइट) करता हूं और स्क्रॉलिंग करते समय हाइलाइट किए गए राज्य को स्क्रॉल करना प्रारंभ करता है और स्क्रॉलिंग समाप्त होने पर ही जाता है। वैसे भी इस पर काबू पाने के लिए? – vivek241

0

मैं "ओवरफ्लो: स्क्रॉल" सेटिंग की अपनी चाल नहीं कर सका क्योंकि यह हमारे पहले से ही अच्छे सीएसएस को गड़बड़ कर रहा है (यदि हमने संपादन योग्य div पर क्लिक करते समय ओवरफ़्लो बदल दिया है, तो लेआउट गड़बड़ हो गया है)। इसके साथ गए:

$(this).on('keypress',function(e){ 
    //$(this) is the contenteditable div 
    var lineHeight = parseInt($(this).css('line-height')) + 2; 
    //gets the height of the div   
    newh=$(this).height(); 
    if (typeof oldh === 'undefined') 
     oldh=newh;//saves the current height 
    if(oldh!=newh)//checks if the height changes 
    { 
     //if height changes, scroll up by 1 line (plus a little 2 px)    
     window.scrollBy(0,lineHeight); 
     oldh=newh;//resave the saved height since it changed 
    } 
}); 

उम्मीद है कि यह किसी की सहायता करेगा। पिटा

संबंधित मुद्दे