TinyMCE textarea

Question

पर सीमा-त्रिज्या जोड़ना क्या TinyMCE'd textareas में सीमा-त्रिज्या जोड़ना संभव है? यह मुझे मार रहा है कि मैंने अपने इनपुट फ़ील्ड इत्यादि पर कोनों को गोलाकार किया है, लेकिन मैं इसे अपने टेक्स्टरेरा पर काम नहीं कर सकता .. शायद क्योंकि टिनीएमसीई इसे आईएफआरएएम में बदल रहा है? क्या इसके आसपास कोई रास्ता है? आपका बहुत बहुत धन्यवाद!

Answer 1

एक समाधान editor_css setting का उपयोग करना है। यह सीएसएस डिफ़ॉल्ट tinymce सीएसएस लोड होने के बाद लागू हो जाता है इस प्रकार डिफ़ॉल्ट एक ओवरराइट।

मैं editor.css नामक एक फ़ाइल निम्न

.defaultSkin table.mceLayout {border:1px solid black} 

युक्त बनाया है और इस संपादक के चारों ओर एक अच्छा पतली काली रेखा बनाता है editor_css

editor_css : 'path_to_css'.'/editor.css', 

का उपयोग कर TinyMCE पैरामीटर सेट।

Answer 2

एक छोटे से एमसीई पाठ क्षेत्र में सीमा त्रिज्या जोड़ने के लिए आपको फ़ाइल के नीचे निम्न सीएसएस नियम जोड़ना होगा: /themes/advanced/skins/default/ui.css। नोट: यदि आप कस्टम त्वचा का उपयोग कर रहे हैं तो आपको इन नियमों को उस त्वचा के लिए बनाए गए सीएसएस फ़ाइल के अंदर जोड़ना होगा।

#article_tbl, #article_ifr{ 
    -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */ 
    -moz-border-radius: 12px; /* FF1-3.6 */ 
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */  
} 

$article_tbl{ 
    border: 1px solid silver; 
} 

#article_ifr{ 
    -webkit-border-top-left-radius: 0px; 
    -webkit-border-top-right-radius: 0px; 
    -webkit-border-bottom-right-radius: 12px; 
    -webkit-border-bottom-left-radius: 12px; 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 12px; 
    -moz-border-radius-bottomleft: 12px; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    border-bottom-right-radius: 12px; 
    border-bottom-left-radius: 12px;  
} 

#article_tbl{ 
    -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */ 
    -moz-border-radius: 12px; /* FF1-3.6 */ 
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */  
} 

.mceToolbar{   
    -webkit-border-top-left-radius: 12px; 
    -webkit-border-top-right-radius: 12px; 
    -webkit-border-bottom-right-radius: 0px; 
    -webkit-border-bottom-left-radius: 0px; 
    -moz-border-radius-topleft: 12px; 
    -moz-border-radius-topright: 12px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-bottomleft: 0px; 
    border-top-left-radius: 12px; 
    border-top-right-radius: 12px; 
    border-bottom-right-radius: 0px; 
    border-bottom-left-radius: 0px; 
} 

.defaultSkin table.mceLayout tr.mceLast td { 
    border-bottom: 1px solid silver; 
    -webkit-border-top-left-radius: 0px; 
    -webkit-border-top-right-radius: 0px; 
    -webkit-border-bottom-right-radius: 12px; 
    -webkit-border-bottom-left-radius: 12px; 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 12px; 
    -moz-border-radius-bottomleft: 12px; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    border-bottom-right-radius: 12px; 
    border-bottom-left-radius: 12px; 
} 

Answer 3

एक और तरीका है प्रोग्राम के रूप में init पर TinyMCE कंटेनर के लिए कक्षाओं को जोड़ने के लिए है:

textarea.tinymce({ 
    setup: function(editor) { 
     editor.on('init', function() { 
      editor.getContainer().className += ' with-border'; 
     }); 
    } 
}); 

सीएसएस:

.with-border { 
    border: 1px solid black; 
} 

Integration and Setup देखें | TinyMCE प्रलेखन

setup विकल्प आपको एक ऐसी घटना निर्दिष्ट करने की अनुमति देता है जो TinyMCE संपादक उदाहरण प्रस्तुत करने से पहले निष्पादित किया जाएगा।