У меня проблема. Я делаю решение для транскрипции видео. Когда я нажимаю Enter, мне нужно добавить флаг времени - чтобы пользователь мог набирать, пока не нажмет Enter, но все, что я получаю, это флаг времени в конце каждой строки.
Я ценю любую помощь.
[hh:mm:ss] my text
my text [hh:mm:ss]
my new text
//if (!(start_element.hasAttribute('title'))) {
start_element.setAttributes({
'title': tim
});
var charCode = (evt.which) ? evt.which : event.keyCode;
console.log(evt.data.keyCode);
if (evt.data.keyCode == 13) {
CKEDITOR.instances.editor1.insertHtml('[' + tim + ']');
}
//}
Следующий код здесь не работает в Qaru из-за CKEditor с использованием IFrame, который вызывает нарушение политики перекрестного происхождения.
Вы можете увидеть полную рабочую демонстрацию здесь, на JSFiddle:
Вам необходимо установить очень малый тайм-аут, который вызывается после нажатия ввода, прежде чем текст будет вставлен. В этом примере я использовал 100 миллисекунд. Это хорошо работает для меня.
Я также пытался настроить readonly
для редактора, чтобы предотвратить ввод текста. Кажется, это не работает. Так что вам нужно верить, что кто-то не набирает действительно быстро после входа в игру. Проблема в том, что insertHTML происходит слишком быстро, прежде чем строка будет введена в редактор.
var $target = $('#modal');
var editorName = 'foobar';
clearEditorInstances();
// Add textarea to target div.
$target.append($('<form>').append($('<textarea>', {
id: editorName,
name: editorName
}))).hide();
// Setup editor.
$('textarea#' + editorName).ckeditor({
height: 300,
toolbarStartupExpanded: true,
width: '100%',
on: {
instanceReady: function(e) {
$target.show(); // Show editor, when ready.
insertTime(this);
},
key: function(e) {
if (e.data.keyCode == 13 /* Enter key */ ) {
insertTime(this);
}
}
}
});
function insertTime(editor) {
editor.document.$.body.readonly = true;
window.setTimeout(function() {
var timestamp = moment().format('HH:mm:ss');
var timeHtml = CKEDITOR.dom.element.createFromHtml('<span>' + timestamp + ' </span>');
editor.insertElement(timeHtml);
editor.document.$.body.readonly = false;
}, 100 /* Typing delay */ );
}
function clearEditorInstances() {
for (name in CKEDITOR.instances) {
CKEDITOR.instances[name].destroy();
}
}
#modal {
position: absolute;
left: 30px;
top: 45px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/adapters/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div id="modal"></div>
Можно просто добавить разрыв строки до временного кода?
if (evt.data.keyCode == 13) {
CKEDITOR.instances.editor1.insertHtml('\n[' + tim + ']');
evt.preventDefault(); // do not insert line break, because we already did this
}
Но это добавляет timecode к следующей строке. Если вы хотите добавить в текущую строку, вы можете сделать что-то вроде
if (evt.data.keyCode == 13) {
// get all current lines
var lines = CKEDITOR.instances.editor1.innerHtml.split('\n');
// add timecode to beginning of last line
lines[lines.length - 1] = '[' + tim + ']' + lines[lines.length - 1];
// join all lines and write back to editor
CKEDITOR.instances.editor1.innerHtml = lines.join('\n');
}
В конце вы можете использовать регулярное выражение для перемещения всех временных флагов с конца на начало. Используйте /^(.*)(\[[0-9][0-9]?:[[0-9][0-9]?\])$/gm
(Regex101), чтобы найти его и заменить на $2 $1
. Поскольку он совпадает только в конце строки, он не должен забирать какие-либо посередине, если кто-то должен был разместить временную метку вручную.
Объяснение (из Regex101)
/^(.*)([[0-9][0-9]?:[[0-9][0-9]?])$/gm
^ утверждает положение в начале строки
1-я группа захвата (. *)
. * соответствует любому символу (кроме терминаторов строк)
- Квантификатор - совпадение между нулевым и неограниченным временем, как можно больше раз, при необходимости, при необходимости (жадный)
Вторая группа захвата ([[0-9] [0-9]?: [[0-9] [0-9]?])
[соответствует символу [буквально (с учетом регистра)
Сопоставьте один символ, присутствующий в списке ниже [0-9]
0-9 одиночный символ в диапазоне между 0 (ASCII 48) и 9 (ASCII 57) (с учетом регистра)
Сопоставьте один символ, присутствующий в списке ниже [0-9]?
? Квантификатор - совпадение между нулем и одним раз, как можно больше раз, при необходимости возвращаясь (жадный)
0-9 одиночный символ в диапазоне между 0 (ASCII 48) и 9 (ASCII 57) (с учетом регистра)
: соответствует символу: буквально (с учетом регистра)
Сопоставьте один символ, присутствующий в списке ниже [[0-9]
[соответствует символу [буквально (с учетом регистра)
0-9 одиночный символ в диапазоне между 0 (ASCII 48) и 9 (ASCII 57) (с учетом регистра)
Сопоставьте один символ, присутствующий в списке ниже [0-9]?
] соответствует символу] буквально (с учетом регистра)
$ утверждает позицию в конце строки
Глобальные флаги шаблонов
g модификатор: глобальный. Все совпадения (не возвращаются после первого матча)
m модификатор: многострочный. Вызывает ^ и $ для соответствия началу/концу каждой строки (не только начало/конец строки)>