ठीक है, CodeMirror की समृद्ध क्षमताओं का उपयोग कर एक एकल लाइन संपादक बनाने के लिए एक तरीका है। सबसे पहले, आपको एक पूर्ण-विशेषीकृत कोड मिरर ऑब्जेक्ट जोड़ना होगा (टेक्स्टरेरा का उपयोग करें)।
मान लें कि आपको var cm = CodeMirror(...) मिल गया है। (value: "" का उपयोग करें)। फिर
cm.setSize(200, cm.defaultTextHeight() + 2 * 4);
// 200 is the preferable width of text field in pixels,
// 4 is default CM padding (which depends on the theme you're using)
// now disallow adding newlines in the following simple way
cm.on("beforeChange", function(instance, change) {
var newtext = change.text.join("").replace(/\n/g, ""); // remove ALL \n !
change.update(change.from, change.to, [newtext]);
return true;
});
// and then hide ugly horizontal scrollbar
cm.on("change", function(instance, change) {
$(".CodeMirror-hscrollbar").css('display', 'none');
// (!) this code is using jQuery and the selector is quite imperfect if
// you're using more than one CodeMirror on your page. you're free to
// change it appealing to your page structure.
});
// the following line fixes a bug I've encountered in CodeMirror 3.1
$(".CodeMirror-scroll").css('overflow', 'hidden');
// jQuery again! be careful with selector or move this to .css file
यह मेरे लिए बस ठीक काम करता है है।
स्रोत
2013-03-06 19:46:23
कोडमिरर एक इन-ब्राउज़र कोड संपादन उपकरण नहीं है? मैं नहीं देखता कि आपके इनपुट फ़ील्ड को कोड-एडिटर की आवश्यकता है? 'रंगीन' से आपका क्या मतलब है? – nimrod
@ निमोद: सिंटेक्स हाइलाइटिंग मुझे लगता है। –
आप एक टेक्स्टरेरा का उपयोग कर सकते हैं और इसकी ऊंचाई एक पंक्ति पर सेट कर सकते हैं। यह मेरे लिए एक "ठीक" दृष्टिकोण प्रतीत होता है। यह निश्चित रूप से बुरा नहीं है और अपने आप को कुछ बनाना शायद अधिक कठिन है। हालांकि आपको अभी भी भाषा पार्सर बनाना है, ताकि सही टोकन सही ढंग से हाइलाइट किए जाएं। –