Saya membuat editor python untuk sebuah situs dan saya menggunakan pustaka javascript Code Mirror untuk tujuan ini. Saya memiliki tombol bernama toggle invisibles. Jika pengguna menekan tombol, spasi dan penanda akhir garis akan ditampilkan. Saya ingin menampilkan tab juga. Karena cermin kode hanya menampilkan spasi dan akhir baris, saya telah menambahkan cara manual juga untuk menampilkan tab.

Di cermin kode, tab memiliki html <span class="cm-tab" cm-text=" "></span>. Saya telah mengatur gambar latar belakang ke kelas .cm-tab di css sehingga tab akan terlihat dengan gambar itu.

Karena, saya ingin mengaktifkan visibilitas elemen span, awalnya, saya telah menyetelnya ke visibility: hidden. Dan di javascript, ketika pengguna mengklik tombol toggle invisibles, saya akan mengatur visibilitas ke visible.

Berikut kodenya:

CSS:

.cm-tab{
    background: url("url");
    visibility: hidden;
}

Javascript:

var showi = true;
$(".textarea-editor").each(function(index){
    var editor  = CodeMirror.fromTextArea($(this)[0],{
        mode: {name: "python", version: 3, singleLineStringErrors: true, globalVars: true}, 
        lineNumbers: true, 
        lineWrapping: true,
        indentUnit: 4,
        showInvisibles: false,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        autoCloseBrackets: true,
        maxInvisibles: 16,
        matchBrackets: true,
        indentWithTabs: true,
    });
    $("#toggleInvisible").click(function(){
        editor.setOption('showInvisibles', showi);
        var tab-visibility = showi?"visible:"hidden";
        var style = $('<style>.cm-tab {visibility:'+tab-visibility+'} 
        </style>');
        $(".cm-tab".append(style);
        showi=showi?false:true;
    });
    editor.on('change', function(e){ var txt = editor.getValue();});
});

Masalahnya adalah, ketika saya mengklik tombol, tab ditampilkan dengan gambar latar belakang. tetapi ketika saya mengklik enter untuk pergi ke baris berikutnya, tab menjadi tidak terlihat. Saya telah menambahkan atribut gaya ke tab yang baru dibuat juga di fungsi klik berdasarkan posting ini

Tambahkan aturan CSS melalui jQuery untuk elemen yang dibuat di masa mendatang

1
Sri Harsha 24 Oktober 2019, 14:40

1 menjawab

Jawaban Terbaik

Saya telah membuat dua tag gaya dan menyediakan kelas .cm-tab. Ini kode saya:

<style>.cm-tab{background:url();}</style>
<style id="tab-style">.cm-tab{visibility: hidden;}</style>

Dan kemudian ubah html #tab-style di javascript.

$("#tab-style").html(".cm-tab{visibility:visible}");
0
Sri Harsha 24 Oktober 2019, 12:15