Как переключать вкладки, чтобы показать или скрыть нажатие кнопки в зеркале кода - PullRequest
Новая
       20

Как переключать вкладки, чтобы показать или скрыть нажатие кнопки в зеркале кода

1 голос
/ 24 октября 2019

Я делаю 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 к вновь созданным вкладкам также в функции щелчка, основанной на этом сообщении

Добавление правила CSS через jQuery для будущих созданных элементов

1 Ответ

0 голосов
/ 24 октября 2019

Я создал два тега стиля и предоставил класс .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}");
...