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

最后，您可以使用正则表达式将所有时间标记从结尾移动到开头。使用/^(.*)(\[[0-9][0-9]?:[[0-9][0-9]?\])$/gm (Regex101)找到它，并替换为$2 $1。因为它只匹配在行的末尾，如果有人要放置手动时间戳，它不应该在中间拾取任何内容。

解释（来自Regex101）

/ ^（[[0-9] [0-9]？：[[0-9] [0-9]]）（*）$ /克

^断言行开头的位置

第一捕获组（。*）

。*匹配任何字符（行终止符除外）


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


第二捕获组（[[0-9] [0-9]？：[[0-9] [0-9]？]）

[匹配字符[字面意思（区分大小写）

匹配[0-9]
下面列表中的单个字符
0-9 0（ASCII 48）和9（ASCII 57）范围内的单个字符（区分大小写）

匹配[0-9]下面列表中的单个字符？

？量词 - 匹配0到1次，尽可能多次，根据需要回馈（贪婪）

0-9 0（ASCII 48）和9（ASCII 57）范围内的单个字符（区分大小写）

：匹配字符：字面意思（区分大小写）

匹配[[0-9]
下面列表中的单个字符
[匹配字符[字面意思（区分大小写）

0-9 0（ASCII 48）和9（ASCII 57）范围内的单个字符（区分大小写）

匹配[0-9]下面列表中的单个字符？

]字面匹配（区分大小写）

$在行尾声明位置

全球模式标志

g修饰符：全局。所有比赛（首场比赛后不返回）

m修饰符：多行。导致^和$匹配每行的开头/结尾（不仅是字符串的开头/结尾）＆gt;

Answer 2

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

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

Answer 3

由于CKEditor使用导致跨源策略违规的IFrame，以下代码在Stack Overflow上不起作用。

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

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

在插入文本之前，按Enter键后，基本上需要设置一个非常小的超时。对于这个例子，我使用了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>

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

预期结果

实际结果

代码

3 个答案: