在每条新行的开头插入文本

Question

我有问题。我正在制作视频转录解决方案。当我点击 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 + ']');
  }
//}

Answer 1

以下代码在堆栈溢出上不起作用，因为ckeditor使用iframe使用造成交叉侵犯的iframe。

您可以在JSFiddle上看到一个完整的工作演示：

https://jsfiddle.net/mrpolywhirl/xy96htus/

您本质上需要设置一个非常小的超时，然后按Enter在Enter之后被调用，然后再插入文本。在此示例中，我使用了100毫秒。它对我效果很好。

我还尝试设置readonly供编辑器以防止键入。这似乎不起作用。因此，您需要相信某人在击中Enter后不会键入真正的快速。问题是，在将线路输入到编辑器中之前，插入率太快了。

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>

Answer 2

最后，您可以使用Regex将所有时间标志从末端移到开始。使用/^(.*)([[0-9][0-9]?:[[0-9][0-9]?])$/gm(Regex101(查找它，然后替换为$2 $1。因为它仅在行末端匹配，所以如果有人要放置手动时间戳，它不应在中间捡起任何。

解释(来自Regex101(

/^(。*(([[0-9] [0-9]？：[[0-9] [0-9]？]($/gm

^断言一条线开始的位置

1st捕获组(。*(

。*匹配任何字符(线终结者除外(

• 量词 - 尽可能多次匹配零和无限时间之间，根据需要回馈(贪婪(

第二个捕获组([[0-9] [0-9]？：[[0-9] [0-9]？](

[匹配字符[字面意义(敏感(

匹配以下[0-9]

的列表中存在的单个字符

0-9在0(ASCII 48(和9(ASCII 57((case敏感(范围内的一个字符

匹配以下[0-9]？

的单个字符

？量词 - 尽可能多次匹配零到一次，根据需要回馈(贪婪(

0-9在0(ASCII 48(和9(ASCII 57((case敏感(范围内的一个字符

：匹配字符：字面意思(敏感(

匹配以下列表中存在的单个字符[[0-9]

[匹配字符[字面意义(敏感(

0-9在0(ASCII 48(和9(ASCII 57((case敏感(范围内的一个字符

匹配以下[0-9]？

的单个字符

]与字符匹配](敏感(

$主张在线结束时的位置

全局模式标志

g修饰符：全局。所有比赛(在第一场比赛后不要返回(

m修饰符：多行。原因 ^和$与每行的开始/结束匹配(不仅是字符串的开始/结尾(>

Answer 3

可以在时间码之前添加换行件？

if (evt.data.keyCode == 13) {
    CKEDITOR.instances.editor1.insertHtml('n[' + tim + ']');
    evt.preventDefault(); // do not insert line break, because we already did this
}

，但这将时间代码添加到下一行。如果要添加到当前行，可以做

之类的事情

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