Моя компания создает CMS. Как интерфейсный веб-разработчик, меня просят создать функцию «контекстного редактирования».

Вы можете увидеть здесь пример http://www.concrete5.org / документация / общие-темы / редактирование в контексте /

Я хочу знать, какую программу мы должны знать, чтобы создать это? Можно ли этого добиться с помощью только JavaScript или каких-то интерфейсных инструментов, или для этого нужен серверный язык?

Спасибо.

0
Jaspero 13 Сен 2010 в 22:01

2 ответа

Лучший ответ

Для однострочного редактирования есть простой способ включить встроенное редактирование с помощью только CSS (и небольшого количества JavaScript для IE7). На странице в режиме редактирования используйте текстовое поле для отображения текста, будь то в режиме редактирования или в режиме просмотра.

Вот CSS, чтобы поле формы выглядело как обычный текст, пока оно не зависнет или не сфокусировано:

.inContextEdit
{
    border: solid 1px transparent;
    margin: -2px -3px;
    padding: 1px 2px;
}
.inContextEdit.focus, /* IE7 doesn't recognize :focus */
.inContextEdit:focus,
.inContextEdit:hover
{
    border-color: #ccc;
}

Затем немного JavaScript для IE7:

function focusInput(el)
{
    el.className += " focus";
}
function blurInput(el)
{
    el.className = el.className.replace(/ *focus\b/g, "");
}

А вот разметка, которую вы бы использовали:

<input name="PageTitleInput"
      value="Page title"
      class="inContextEdit"
    onfocus="focusInput(this);"
     onblur="blurInput(this);" />

Этот трюк будет работать с <textarea> вместо <input>, но вам, вероятно, будет лучше найти существующий элемент управления для вашего многострочного текста. CSS может быть сложным, и будет сложно скрыть полосу прокрутки в режиме просмотра. Есть несколько существующих элементов управления с возможностями форматированного текста.

1
gilly3 13 Сен 2010 в 20:15

Потребуются как передний, так и задний конец инструменты.

Я предполагаю, что вы говорите о редакторе на месте ... jquery имеет довольно много плагинов для него.

Если вам нужен редактор форматированного текста, попробуйте TinyMCE. Я использовал его, и он мне тоже понравился.

0
jrharshath 13 Сен 2010 в 18:05