Использование mshtml для установки contentEditable, запретить выбор div - PullRequest
Новая
       15

Использование mshtml для установки contentEditable, запретить выбор div

0 голосов
/ 12 февраля 2010

Мой текущий проект предусматривает работу с редактором документов, который, к лучшему или к худшему, реализован с использованием mshtml и установкой для contentEditable значения true. Мы, конечно, рассматриваем возможность замены этой установки на что-то другое, но пока предположим, что это не вариант.

В случае, если это имеет значение, мы делаем это с использованием VS 2008 (.Net 3.5) и C #: 

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

Мы хотели бы скрыть большую часть структурного редактирования за нашим пользовательским интерфейсом, но позволить пользователю редактировать текст так, как ему нравится. Проблема возникает, когда мы добавляем 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. Если пользователь помещает курсор в другой текст, а затем пытается перейти к тексту div с помощью клавиатуры, это предотвращается. Div рассматривается как один символ, когда вы находитесь вне его и перемещаетесь.

Итак, есть ли способ заставить div вести себя как фоновое оформление, но все ли вокруг него по-прежнему можно редактировать? Этот HTML-код полностью внутренний, поэтому мы можем делать с ним все, что захотим. Так что сам div не имеет значения. Важно то, что мы:

  • Содержит несколько P или других тегов
  • Наглядно покажите пользователю, что все содержащиеся в нем теги P или другие являются частью одной группы, так как стили, такие как границы и цвет фона в текущем div, теперь выполняются.

Этот ТАК вопрос заставляет меня беспокоиться о том, что то, что я хочу, невозможно с нашей текущей настройкой, но я прошу помочь всем, кто сталкивается с подобной проблемой. Я добавлю пару несовершенных решений, которые мы придумаем в ближайшее время.

Возможно или нет, спасибо за любые ваши мысли.

Ответы [ 2 ]

0 голосов
/ 12 февраля 2010

Поскольку HTML-код является внутренним и ему не нужно хорошо играть с чем-то еще, просто представьте область с помощью таблицы, а не div: 

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

Это решает обе проблемы, но значительно усложняет код для редактирования или анализа. Мы бы предпочли более чистое решение.

0 голосов
/ 12 февраля 2010

Частичное решение: установите содержащий 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.

...