Question

我当前的项目涉及使用文档编辑器，无论好坏，使用mshtml实现并将contentEditable设置为true。我们当然正在考虑用其他东西替换这个设置，但目前认为它不是一个选项。

如果重要，我们正在使用VS 2008（.Net 3.5）＆amp; C＃：

document = (HtmlDocument)this.editorWebBrowser.Document;
body = (HtmlBody)document.body;
body.contentEditable = true;

我们希望隐藏UI背后的大部分结构编辑，但让用户以他们喜欢的方式编辑文本。当我们添加一个具有多种样式的div时会出现问题：

（添加一个body标签来模拟我们正在以编程方式执行的操作，因此您可以在IE中进行测试，但请记住我们正在使用C＃/ .Net / VS.）

<BODY contentEditable="true">
  <DIV class="intro" style="border: 1px solid blue; width=100%;">
    <P>My Intro</P>
  </DIV>
  <P>Other Text</P>
</BODY>

这有两个问题：

The first click by the user selects the div。我们希望点击直接转到文本，永远不要让用户看到调整大小的句柄。
如果用户将光标放在“其他文本”中，然后尝试使用键盘移动到div文本，则会阻止它们。当你在它外面移动时，div被视为一个角色。

所以，实际上，有没有办法让div表现得像一个背景装饰，但周围的一切仍然可以编辑？这个html完全是内部的，所以我们可以随心所欲地做任何事情。因此div本身并不重要。重要的是我们：

包含多个P或其他标签
直观地向用户显示所有包含的P或其他标签是一个组的一部分，如边框和＆amp ;;当前div的背景颜色现在就完成了。

This SO question让我担心我们目前的设置无法实现我想要的东西，但我要求帮助其他遇到类似问题的人。我将在一段时间内添加一些我们提出的不完美的解决方案。

可能与否，感谢您的任何想法。

Answer 1

部分解决方案：将包含div设置为contentEditable = false，然后在内部元素上再次设置为true，如下所示：

<BODY contentEditable="true">
  <DIV class="intro" contentEditable="false" style="border: 1px solid blue; width=100%;">
    <P contentEditable="true">My Intro</P>
  </DIV>
  <P>Other Text</P>
</BODY>

这可能解决问题1（用户选择div）但对问题2没有任何作用。

Answer 2

由于HTML是内部的，并且不需要与其他任何东西一起使用，只需用表来表示区域，而不是div：

<table class="intro">
  <tbody>
    <tr>
      <td>
        Intro
      </td>
    </tr>
  </tbody>
</table>

这解决了这两个问题，但是使编辑或解析的代码变得非常复杂。我们更喜欢更清洁的解决方案。

使用mshtml设置contentEditable，防止选择div

2 个答案: