Я делаю редактор Python для сайта, и для этой цели я использую библиотеку javascript Code Mirror. У меня есть кнопка с именем toggle invisibles. Если пользователь нажимает кнопку, будут отображаться пробелы и маркеры конца строки. Я хотел также отображать вкладки. Поскольку зеркальное отображение кода показывает только пробелы и конец строки, я добавил ручной способ также показывать вкладки.

В зеркале кода вкладки имеют HTML <span class="cm-tab" cm-text=" "></span>. Я установил фоновое изображение для класса .cm-tab в css, чтобы вкладки были видны с этим изображением.

Поскольку я хочу переключить видимость элемента span, изначально я установил для него visibility: hidden. А в JavaScript, когда пользователь нажимает кнопку toggle invisibles, я устанавливаю видимость visible.

Вот код:

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();});
});

Проблема в том, что, когда я нажимаю кнопку, вкладки отображаются с фоновым изображением. но когда я нажимаю ввод, чтобы перейти к следующей строке, вкладки становятся невидимыми. Я добавил атрибут style к вновь созданным вкладкам также в функции click, основанной на этом посте.

1
Sri Harsha

1 ответ

Я создал два тега стиля и предоставил класс .cm-tab. Вот мой код:

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

а затем измените HTML-код #tab-style в JavaScript.

$("#tab-style").html(".cm-tab{visibility:visible}");
58540594