Twitter Bootstrap araçlarını CodeMirror'a uygula?

Kullanıcıların bazı kod yazabildikleri bir textarea formum var. Bu textarea'yı CodeMirror kod düzenleyici bir kutuyla değiştiriyorum, böylece Bootstrap kalıplarını uygulamak istiyorum. Bir sınır enter image description here Twitter Bootstrap araçlarını CodeMirror'a uygula?

Yani özellikle, ben kod editörü yuvarlak köşeler vermek gerekir düşünüyorum:

formu şu anda, kod editörü dışındaki tüm form elemanları Bootstrap stylings sahip olduğu neye benzediği , doğru genişlik (giriş xxlarge) ve üzerinde hareket ettirildiğinde mavi parlak noktalar.

Bunu nasıl yaparım? Gerekli CSS'yi manuel olarak kopyalamanın yanında bunu yapmanın bir yolu var mı?

GÜNCELLEME Ben Bootstrap gelen textarea CSS kopyalayana çalıştı ve kod editörü içine tıkladığınızda tüm odak CSS dışında iyi görünüyor.

enter image description here

vurgulamak yerine dışına, içeride insan: Bu ne alıyorum. Bunu nasıl düzelttiğim hakkında bir fikrin var mı?

Bu, Bootstrap kopyalayarak ilave CSS:

.CodeMirror { 
     line-height: 1.3em; 
     font-family: monospace; 

     /* Necessary so the scrollbar can be absolutely positioned within the wrapper on Lion. */ 
     position: relative; 
     /* This prevents unwanted scrollbars from showing up on the body and wrapper in IE. */ 
     overflow: hidden; 
     background-color: white; 
     width: 530px; 

     /* Copied from Bootstrap's textarea */ 
     display: inline-block; 
     padding: 4px 6px; 
     margin-bottom: 9px; 
     color: #555555; 
     border: 1px solid #ccc; 
     -webkit-border-radius: 3px; 
     -moz-border-radius: 3px; 
     border-radius: 3px; 
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; 
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s; 
     -ms-transition: border linear 0.2s, box-shadow linear 0.2s; 
     -o-transition: border linear 0.2s, box-shadow linear 0.2s; 
     transition: border linear 0.2s, box-shadow linear 0.2s; 
    } 

    .CodeMirror-focused { 
     /* Copied from Bootstrap's textarea */ 
     border-color: rgba(82, 168, 236, 0.8); 
     outline: 0; 
     outline: thin dotted \9; 
     /* IE6-9 */ 

     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    }

kaynak

2012-10-05 grautur

Kopyalanan kodunuzu ve Benim için herhangi bir değişiklik yapmadan çalışıyor gibi görünüyor, ya da belki de bunu düzeltmişsiniz .. –

CodeMirror orijinal textarea gizler ve div ve pre elemanların (oldukça kompleks) yapı oluşturur. Aynı efekti elde etmek için .CodeMirror sınıfına sahip olan en dıştaki div stilini oluşturabilirsiniz.

Bu, CodeMirror stil sayfasını özelleştirmeyi veya sınıf/öğe için kendi stilinizi eklemeyi gerektirir. Bootstrap'i LESS kullanarak yapıyorsanız, textarea stilini çoğaltmaktan kaçınmak için bir mixin uygulanmasının bir yolu olabilir, ancak çoğaltma miktarı minimumdur.

kaynak

2012-10-05 08:07:35

Awesome, thanks! Bootstrap'in textarea'sından CSS üzerinden kopyalamayı denedim ve kod editörüne odaklanmam dışında çoğunlukla doğru görünüyor. (Yukarıdaki sorumu güncelledim.) Mavi vurgular çevreleyen yerine kod düzenleyicide içseldir. Bunu nasıl düzelteceğiniz konusunda herhangi bir öneriniz var mı? – grautur

Anahat farklı olabilir çünkü öğe türleri farklıdır. Hızlı bir JS Fiddle kuracağım ve durumun bu olup olmadığını göreceğim. –

http://jsfiddle.net/YhLjn/ - taslak bir "div" ve "textarea" da aynı şekilde davranıyor gibi görünüyor. Belki de 'odaklı' sınıf içsel bir öğeye mi uygulanıyor? –

(Kod Ayna/v3 Önyükleme) textarea teması:
henüz doğrulama devletler için destek (has-hata vardır uyarı vardır-başarı) yok mu

.CodeMirror { 
    /* Bootstrap Settings */ 
    box-sizing: border-box; 
    margin: 0; 
    font: inherit; 
    overflow: auto; 
    font-family: inherit; 
    display: block; 
    width: 100%; 
    padding: 6px 12px; 
    font-size: 14px; 
    line-height: 1.42857143; 
    color: #555; 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
    /* Code Mirror Settings */ 
    font-family: monospace; 
    position: relative; 
    overflow: hidden; 
} 

.CodeMirror-focused { 
    /* Bootstrap Settings */ 
    border-color: #66afe9; 
    outline: 0; 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
}

kaynak

2014-12-31 23:55:27 tfmontague

Twitter Bootstrap araçlarını CodeMirror'a uygula?

cevap

İlgili konular