Я делаю редактор 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, основанной на этом посте.
Добавьте правило CSS через jQuery для будущих созданных элементов
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}");
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.