javascript中的iframe和不推荐使用的方法

编程问答 2022-08-15

问题描述

我正在LAMP堆栈上构建一个与帖子相关的经典cms，作为一个项目在以后的访谈中展示并有可能找到工作。我想构建一个富文本编辑器。在对r / javascript和堆栈溢出进行了一些研究之后，我得出了一些结论。

  1. 请勿使用“ contentEditable = true”标志，因为根据 CKEditor的开发者https://stackoverflow.com/a/11479435/10245890并不理想
  2. 由于iframe与iframe隔离，因此普遍共识 提供。
  3. 是的，我知道我不会自己构建下一个CKEditor，这需要 多年比我经验丰富的人，我只想学习 关于Javascript API。
  4. 通常，我想在版本中使用原始版本的语言 以便更好地了解它们。

使用简单的富文本编辑器的“简便”方法是使用execCommand，但它已过时。我想出的是这样的：

function formatBold(){
  var selection = document.getSelection().toString();
  var originalString = document.getElementById("post-body-editor").innerHTML;
  document.getElementById("post-body-editor").focus();
  document.getElementById("post-body-editor").innerHTML = originalString.replace(selection,'<b>'+ selection +'</b>');
  return;
}
document.addEventListener('keydown',function(event) {
  if(event.ctrlKey && event.key === 'b'){
    formatBold();
    return;
  }
  return;
});

使用HTML按钮或按键来调用该函数。我在MDN中看到有一种方法可以实现插入链接，用粗体显示文本格式等。问题是。我看到一些标记为deprecated的方法，即使不是很多，但它们似乎正在起作用。我应该使用它们还是让它自己工作，如上所示？我意识到这不是最优雅的解决方案，但我认为它可以正常工作。同样，任何文章或其他阅读材料也会受到赞赏。

编辑：格式化

解决方法

如果问题仅在于使用不赞成使用/过时的功能，答案是：不使用。但是，我怀疑execCommand不会真正从浏览器中删除，这会破坏大量现有页面……如果您真的想创建WYSIWYG编辑器，则必须深入DOM领域。在那种情况下，使用innerHTML是一种例外，您可以使用Nodes和ShadowRoot等。

Teemu在上面的评论中答复了

。
htmliframeiframejavascriptrich-text-editor