• readme: https://dzone.com/articles/writing-a-very-simple-js-editor
  • source: https://github.com/ftomassetti/simple-web-editor

思路:

  1. 控制一个span光标定位符直接插入到文本中.
  2. 然后根据光标定位符, 放置光标
var updateHtml = function() {
  $("#editor")[0].innerHTML = (window as any).editor.generateHtml();
  var cursorPos = $(".cursor-placeholder").position();
  var delta = $(".cursor-placeholder").height() / 4.0;
  $(".blinking-cursor").css({top: cursorPos.top, left: cursorPos.left - delta});
};
  1. 响应上下左右, tab, delete, 等等功能键.