Вставить текст в начале каждой новой строки

1

У меня проблема. Я делаю решение для транскрипции видео. Когда я нажимаю 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 + ']');
  }
//}
Теги:
ckeditor

3 ответа

0
Лучший ответ

Следующий код здесь не работает в Qaru из-за CKEditor с использованием IFrame, который вызывает нарушение политики перекрестного происхождения.

Вы можете увидеть полную рабочую демонстрацию здесь, на JSFiddle:

https://jsfiddle.net/MrPolywhirl/xy96htus/

Вам необходимо установить очень малый тайм-аут, который вызывается после нажатия ввода, прежде чем текст будет вставлен. В этом примере я использовал 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>
Поделиться
  • 0
    Это работает как шарм спасибо большое
0

Можно просто добавить разрыв строки до временного кода?

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
    ваше решение кажется правильным, но оно не сработало, что-то не так с ckeditor, я думаю, когда я вижу источник '<p> мой текст [3.940068] </ p> <p> мой новый текст [7.477115] </ p >»
  • 0
    теперь я получаю: не могу прочитать свойство 'split' из неопределенного
0

В конце вы можете использовать регулярное выражение для перемещения всех временных флагов с конца на начало. Используйте /^(.*)(\[[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 модификатор: многострочный. Вызывает ^ и $ для соответствия началу/концу каждой строки (не только начало/конец строки)>

Поделиться
  • 0
    я думаю, что это был бы последний вариант, я хотел бы, чтобы он работал без проблем, а не исправлял каждый раз

Ещё вопросы

Сообщество Overcoder
Наверх
Меню