GitHub / GitLab如何“内联”发布编辑工作

Question

GitHub / GitLab如何实现实时问题编辑？当按下 e 或编辑按钮时，问题描述就变成了一个表单，但我看不到ajax调用或者其他什么...它如何加载替换静态内容？

Answer 1

HTML已经存在。这是您正在查看的“静态”内容。

它的基础是你可以将contenteditable属性应用于任何HTML元素，并且它变得可编辑。

<div contenteditable>
 You can edit this. Click me.
</div>

我没有具体看过他们的代码，但是他们可能正在做这样的事情，或者他们正在将它加载到WYSIWYG中。无论哪种方式，他们都可能使用已经存在的内容的直接HTML，因此不需要AJAX调用。

const content = document.querySelector('div');
document.querySelector('button').addEventListener('click', () => {
  content.setAttribute('contenteditable', !content.contenteditable);
});

<button>Toggle Edit</button>
<div>
  <h1>Hello There</h1>
  <p>This is content.</p>
</div>