Я хочу редактировать, но без форм или входов

Question

Я хочу, чтобы мои пользователи могли редактировать текст на своей странице (не на всех), не показывая им форму.В то же время я не хочу, чтобы он был редактируемым, потому что их слишком много, и он не пригоден для использования.Лучше всего было бы что-то вроде google docs, где пользователь может читать свой текст и без проблем обновлять его.

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

В той же заметке я видел пару сайтов, которые позволяют пользователям редактировать контент в div без изменения элемента.Может кто-нибудь сказать мне, как это сделано?

Answer 1

Сайты, которые я видел, позволяющие вам редактировать содержимое div, делают это, добавляя в div событие click, которое удаляет содержимое div и добавляет редактируемый элемент и кнопку в div.

Когда пользователь нажимает новую кнопку, редактируемая кнопка и кнопка скрываются, а все, что находится в редактируемой форме, используется в качестве нового содержимого div. Часто есть вызов AJAX, чтобы также предпринять какие-то действия на сервере.

Кроме того, кнопка может быть заменена на редактируемый обработчик событий, который выполняет действия при нажатии Enter или Esc.

Обратите внимание, что content-editable - это HTML5, поэтому он пока не будет работать во всех браузерах.

EDIT

Оказывается, content-editable довольно хорошо поддерживается (http://blog.whatwg.org/the-road-to-html-5-contenteditable),, но все же может быть не тем, что вы хотите.

Answer 2

Чтобы сделать элемент DOM доступным для редактирования, вы можете прикрепить пару атрибут / значение content-editable="true" к тегу. Например,

<!-- all text within this <div> can be edited by the user -->
<div content-editable="true">
    Lorem ipsum doler sit amet
</div>

Answer 3

Я бы взглянул на jeditable , в котором есть демо .

Другой вариант, который я мог бы предложить, если вам не нравится идея формы. Может быть, вы могли бы просто стилизовать ввод, textarea, чтобы они не выглядели как «форма».

Answer 4

В качестве нового ответа я нашел этот плагин, который делает все, что я хотел.Я должен написать еще меньше кода :) http://valums.com/edit-in-place/

Answer 5

1 http://html5demos.com/contenteditable Редактируемый контент - это HTML 5, что означает, что его поддерживают не многие браузеры.

2 Эта опция немного больше визуальных эффектов, чем все остальное.

<textarea style="border: none;">Blabla</textarea>



 $('textarea').keyup(function (){           
         // here u can do ur cool stuff to autosave when a user rests for 2 secondes or more 

    });