Как сделать текст, чтобы обернуть изображение в редакторе - PullRequest
Новая
       31

Как сделать текст, чтобы обернуть изображение в редакторе

0 голосов
/ 04 апреля 2011

У меня есть редактор на моей странице (плагин Cquitor jquery).

По умолчанию он может вставлять изображение, но текст не переносит его.Я попытался выровнять по вертикали: сверху, но это не помогло:

enter image description here

Какой CSS-код я должен указать на изображение, чтобы обернуть текст?Вы можете попытаться сделать это в firebug на демонстрационной странице CLEditor

PS Я попробовал float: left, и это сработало.Но я должен учитывать, что это редактор, и пользователь может переместить это изображение вправо (и тогда оно должно быть с плавающей точкой: вправо, но как определить, когда следует переключать направление с плавающей точкой) - поэтому я думаю, должно быть другое решение.

1 Ответ

1 голос
/ 04 апреля 2011

Редакторы WYSIWYG не являются заменой правильного кода.У некоторых из лучших есть раскрывающийся список CSS, который будет использовать ваши собственные таблицы стилей, позволяя вам выбрать изображение и выбрать float:left (плюс вам, возможно, также понадобятся некоторые поля) или какой-нибудь пользовательский класс CSS.

Кроме того, вы получите такие вещи, как <b>this<b></b> is bold<b>, если не будете слишком осторожны.В целом, это дерьмо.

Если вы используете стандартный макет, вы можете определить что-то вроде этого и позволить CSS выполнять работу вместо редактора. 

.article img {
  float:left;
  margin-right:5px;
  margin-bottom:5px

}

Когда вы дадите этот уровень контроля неквалифицированному пользователю, вы, скорее всего, получите непредвиденные результаты.

Если вам удобно заходить в HTML и делать прямые правки, вы можете использовать собственные классы CSS. 

  .article img.left {
      float:left;
      margin-right:5px;
      margin-bottom:5px

    }

   .article img.right {
      float:right;
      margin-left:5px;
      margin-bottom:5px

    }

Затем вам нужно добавить имена классов в тег img: 

<img class="left" src="..." />

или 

<img class="right" src="..." />
...