0

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

万一这很重要，我们正在使用 VS 2008 (.Net 3.5) 和 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>

这有两个问题：

  1. 用户的第一次点击选择了 div。我们希望点击直接转到文本，并且永远不要让用户看到调整大小的句柄。
  2. 如果用户将光标放在 Other Text 中，然后尝试使用键盘移动到 div 文本，则会被阻止。当您在它之外四处移动时，该 div 被视为一个字符。

那么，有效地，有没有办法让 div 表现得像一个背景装饰，但它周围的一切仍然是可编辑的？这个 html 是完全内部的，所以我们可以用它做任何我们喜欢的事情。所以 div 本身并不重要。重要的是我们：

  • 包含多个 P 或其他标签
  • 直观地向用户展示所有包含的 P 或其他标签都是一组的一部分，就像当前 div 上的边框和背景颜色这样的样式现在完成了。

这个 SO 问题让我担心我们目前的设置无法实现我想要的，但我要求帮助其他遇到类似问题的人。稍后我将添加一些我们提出的不完美的解决方案。

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

4

2 回答 2

0

部分解决方案：将包含 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 没有任何作用。

于 2010-02-12T19:05:00.680 回答
-1

由于 HTML 是内部的，不需要与其他任何东西搭配得很好，只需用表格而不是 div 来表示区域：

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

这解决了这两个问题，但使编辑或解析代码显着复杂化。我们更喜欢更清洁的解决方案。

于 2010-02-12T19:09:19.567 回答