2011-06-22 30 views
23

TinyMCE के (विवादित) दस्तावेज़ीकरण के अनुसार, संपादक टेक्स्टरेरा (या अन्य) तत्व के आकार को लेता है जो इसे बदल देता है। यह भी कहता है कि आप init विधि में { height: '123', width: '123' } निर्दिष्ट करके संपादक का आकार सेट कर सकते हैं।TinyMCE चौड़ाई और ऊंचाई अवज्ञाकारी!

मैंने दोनों की कोशिश की है और अभी भी केवल एक परिणाम प्राप्त है - संपादक स्वयं को आकार देता है (यह कैसे याद करता है मेरे पीछे है) पिछली बार जब उपयोगकर्ता ने इसका आकार बदल दिया था।

+4

TinyMCE का उपयोग करता है कुकी अपने पुराने आकार याद करने के लिए कर रही अंत। –

उत्तर

17

मैं सभी इस बारे में पता है, यह बहुत कष्टप्रद है।

किसी भी लोड सीएसएस फ़ाइल को यह जोड़ा जा रहा है मेरे लिए चौड़ाई तय (मैं सिर्फ वैश्विक सीएसएस में रख, TinyMCE सीएसएस फ़ाइलों में से किसी में नहीं है, मैं ऊंचाई के साथ परीक्षण नहीं किया है):

.mceEditor > table { 
    width:/* my width */ !important; 
} 

यह सभी मामलों को प्रभावित करेगा, जो मेरे मामले में ठीक था। आप .mceToolbar

आप के प्रकार के साथ उपकरण पट्टी में ही लक्षित कर सकते हैं TinyMCE पाठ क्षेत्र का आकार बदलने के लिए करना चाहते हैं, तो यह काफी चौड़ा सभी उपकरण पट्टी प्रतीक फिट करने के लिए हो सकता है।

+0

धन्यवाद, यह मेरे लिए अच्छी तरह से काम करता है! – Brian

+2

दरअसल, इस उत्तर में जोड़ने के लिए; ऊंचाई समायोजित करने के लिए ऊपर दिखाए गए वर्ग में ऊंचाई संपत्ति जोड़ें, और फिर एक और वर्ग 'td.mceIframeContainer iframe' बनाएं थोड़ा सा ऊंचाई मान (टूलबार के लिए लेखांकन) के साथ। – Brian

0

इस

<style> 
#content{width: 620px; height: 500px;} 
</style> 

<textarea name="content" id="content" cols="50" rows="15"></textarea> 
+0

इसके साथ समस्या यह है कि जैसे ही आपने अपने संपादक को मैन्युअल रूप से आकार दिया है (कोने खींचकर) यह आपकी निर्दिष्ट चौड़ाई और ऊंचाई को अनदेखा कर देगा :( – Jimbo

+0

इसे जोड़ें और यह मैन्युअल रूप से tinyMCE.init ({ मोड: "सटीक", –

1

तरह im सेटिंग चौड़ाई और संपादक क्षेत्र के लिए ऊंचाई हाँ, यह बहुत कष्टप्रद है। मैंने दिए गए इनपुट की ऊंचाई समायोजित करने के लिए अपना स्वयं का फ़ंक्शन लिखा था। आप अपने ऊंचाई/चौड़ाई सेट करने के लिए इसे संशोधित कर सकते हैं के रूप में आप चाहते हैं:

resizeIframe: function(frameid) { 
     var frameid = frameid ? frameid : this.editor.id+'_ifr'; 
     var currentfr=document.getElementById(frameid); 

     if (currentfr && !window.opera){ 
      currentfr.style.display="block"; 
      if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax 
       currentfr.height = currentfr.contentDocument.body.offsetHeight + 26; 
      } 
      else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax 
        currentfr.height = currentfr.Document.body.scrollHeight; 
      } 
      styles = currentfr.getAttribute('style').split(';'); 
      for (var i=0; i<styles.length; i++) { 
       if (styles[i].search('height:') ==1){ 
        styles.splice(i,1); 
        break; 
       } 
      }; 
      currentfr.setAttribute('style', styles.join(';')); 
     } 
    }, 
0

मैंने देखा है कि एक युक्त तालिका चौड़ाई को लागू किया गया था, और यह भी आइकन सेट td कर रहे हैं की, इसलिए वहाँ एक न्यूनतम चौड़ाई वे करने के लिए नीचे पतन करेंगे , इसलिए यदि आपके पास एक ही पंक्ति में कई आइकन हैं - तो यह आपकी चौड़ाई पर गड़बड़ कर सकता है।

संबंधित अतः मेरा सवाल का क्रमबद्ध काफी आपकी समस्या से संबंधित जा रहा समाप्त हो गया: Able to float td elements consistently?

1
tinyMCE.init({ 
     mode : "exact", 
     ..... 

मोड: "सटीक" खींचें

+0

सभी 'मोड: 'सटीक' करता है TinyMCE के बाध्यकारी मोड को बदलता है - उदाहरण के लिए यदि आप इसे 'मोड:' textareas 'के रूप में छोड़ देते हैं तो यह स्वचालित रूप से सभी के लिए बाध्य होगा 'textarea' तत्व, जबकि इसे' सटीक 'में बदलना मतलब है कि आपको यह निर्दिष्ट करने की आवश्यकता है कि कौन से तत्व बाध्य हैं (जो कोई भी तत्व हो सकता है अपने तत्वों में 'तत्व: 'x, y, z'' जोड़कर'' div' को 'textarea' को ओम करें। – Jimbo

3

द्वारा ग्रिड आकार परिवर्तन करने की क्षमता को निष्क्रिय कर देगा यहाँ मेरी ठीक है।
यह टिनीएमसीई संपादकों के कई उदाहरणों के लिए भी काम करता है (init() 'ऊंचाई' संपत्ति के साथ केवल पहले उदाहरण के लिए काम करता है, इसलिए यह संपादक बॉक्स की एक निश्चित या न्यूनतम ऊंचाई प्राप्त करने के लिए एक कामकाज है)।

.mceEditor td.mceIframeContainer iframe { 
    min-height: 350px !important; 
} 
.mceEditor table { 
    height: auto !important; 
} 
+0

यह छोटा हैक बिल्कुल वही था जो मुझे चाहिए था! धन्यवाद! वैश्विक सीएसएस बदलने से – DOOManiac

26

यह थीम सेटिंग्स के कारण अंतिम आकार बचाता है। आप इसे मैं TinyMCE पाठ क्षेत्र ('.mceContentBody' मेरे विषय में कहा जाता है) बहुत छोटा और awkwardly नई पोस्ट सामग्री क्षेत्र में margined पाया निम्नलिखित

$('textarea.tinymce').tinymce({ 
    theme_advanced_resizing: true, 
    theme_advanced_resizing_use_cookie : false, 
+1

अधिक सटीक समाधान। उस साथी के लिए धन्यवाद! – strongBAD

+0

मेरे लिए काम किया, thnx! –

+1

यह सही जवाब होना चाहिए! धन्यवाद! – bang

0

का उपयोग करके बंद कर सकते हैं। मेरी थीम में एक सीएसएस फ़ाइल है जिसे संपादक-शैली कहा जाता है। मैंने चौड़ाई (98%) को अभी तक बदल दिया है क्योंकि TinyMCE संपादक आकार को याद रखने के लिए कुकीज़ का उपयोग करता है, सीएसएस परिवर्तन चिपके नहीं थे। के बाद मेरे ब्राउजर के कैच को साफ़ करने के बाद, सीएसएस चौड़ाई/मार्जिन परिवर्तन प्रभावी हुए। आखिरकार। गाह।

-1

मुझे चौड़ाई tinyMCE 4+ textarea को प्रतिबंधित करने का सबसे अच्छा तरीका है, एक नए div या span टैग में textarea को लपेटना है। फिर उस पर चौड़ाई लागू करें।इस तरह आप निश्चित पीएक्स के बजाय प्रतिशत प्रतिशत चौड़ाई का उपयोग करते हैं। यदि आप ऊंचाई समायोजित करना चाहते हैं पंक्तियों = "15" मान संपादित करें।

उदाहरण:

<div style="width:90%!important;" ><textarea name="content"cols="100" rows="15" class="mceEditor" id="content"><?php echo $content;?></textarea></div> 
0

tinymce.init का उपयोग कर एक 'body_id' जोड़ें और फिर 'content_css' में है कि आईडी का उपयोग संपादक वांछित सीएसएस व्यवहार देने के लिए। इसलिए जैसा:

tinymce.init({ 
    selector: "textarea", 
    content_css: '/css/app.css', 
    body_id: 'new-journal-editor' 
}); 

और फिर app.css में:

#new-journal-editor { 
    height: 123px; 
    width: 123px; 
} 
0

हालांकि अच्छा सुझाव का एक बहुत यहाँ मैं सवाल पढ़कर जवाब मिला नहीं है। ऊंचाई या चौड़ाई के साथ कोई समस्या नहीं है, इसलिए ये सभी काम सीएसएस या लेखन कार्यों के साथ क्यों हैं, दस्तावेज़ों में विधि काम करती है।

मूल चुनौती का आकार बदलने के बारे में था, लेखक कभी नहीं कहा ऊंचाई या चौड़ाई काम नहीं किया है, यह सिर्फ ऐसा नहीं किया क्या वह/वह उम्मीद - यह केवल के रूप में नीचे उद्धृत कहा गया था:

" संपादक खुद को आकार देता है (यह कैसे याद करता है मेरे बाहर है) पिछली बार जब उपयोगकर्ता ने इसका आकार बदल दिया था। "

सैयदुल इस्लाम ने सवाल का सही जवाब दिया और इसे एक कदम आगे ले जाने के लिए स्टुअर्ट ने कुकीज को बंद करने का वर्णन करने के लिए आगे बढ़े। यदि आपको ऊंचाई और चौड़ाई निर्धारित करने की आवश्यकता है तो init() में किया जाए और किया जाए। आप और अधिक यहाँ पढ़ सकते हैं:

https://www.tinymce.com/docs/configure/editor-appearance/#min_height

दोनों आकार ऊंचाई के रूप में नीचे उल्लिखित चौड़ाई कार्यों में इनपुट क्षेत्र।

tinymce.init({ 
selector: '.profileTextArea', 
plugins : 'advlist autolink link image lists charmap print preview code', 
min_height: 400 
}); 
+0

बिल्कुल काम नहीं करता – kabrice

0

मैं एक ही समस्या का सामना करना पड़ रहा है, लेकिन मैं इस

#tinymce-textarea_ifr { 
    min-height: 500px !important; 
} 
.mce-tinymce { 
    width: 96% !important; 
    margin: 0 auto !important; 
} 
संबंधित मुद्दे