Edição em linha
Componente de edição em linha com clique para editar nos estilos texto, área de texto e select. Suporta salvamento automático ao desfocar, PATCH opcional ao servidor e atalhos de teclado. Enter para salvar (texto/select), Ctrl+Enter para salvar (área de texto), Escape para cancelar.
Texto
Edição de texto em linha de uma única linha
_inline_edit.html.erb
███ ███████ ███████ ██████ ███ ████ ████ █████████████ █████ ████████████ ██████ ██ ██████ ██████████ ██
████ █████████████████████████████
███████████████████████████████ ███ ███
████████████████████████████████████████ ████████████ ███
█████████████████████
█████ █████████████████████████████████
█████████████████████████████████████
█████████████████████ ████ ████ ██████████ ██████████████████ ███████████████████████ ██████████████ ███████████████ █████████████████ ████████████ ███ ███████████████ ███████████████████ ███████ ██ ████████████ ████
███ ██████████████ ██ ███████████ ██
███████
inline_edit_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ █████████ ████████
██████ ██████ █ █
████ ███████
███████████ █ █████ ████████ ████████ ████ █
█
█████████ █
inline_edit_text_component.html.erb
████ █████████████████████████████
███████████████████████████████ ████ ███
████████████████████████████████████████ █████████████ ███
█████████████████████
█████ █████████████████████████████████
█████████████████████████████████████
██████████ ███████████████ ████
███ ████████████ ██
███████
████ ████████████████████████████████ ███████████████
inline_edit_text_component.rb
█ ██████████████████████ ████
█████ ███████████████████████ █ ███████████████████
███ █████████████████ ██████ ███ ████ ████ █████████████ █████ ████████████ ██████ ██ ██████ ████████
█████ █ ████
██████ █ █████
████ █ ███
█████████████ █ ████████████
████████████ █ ███████████
██████████████ █ █████████████ ██ ██
inline_edit_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ █████████ ████████
██████ ██████ █ █
████ ███████
███████████ █ █████ ████████ ████████ ████ █
█
█████████ █
Área de texto
Edição de texto em linha multilinha
_inline_edit.html.erb
███ ███████ ███████ ██████ ███ ████ ████ █████████████ █████ ████████████ ██████ ██ ██████ ██████████ ██
████ █████████████████████████████
███████████████████████████████ ███ ███
████████████████████████████████████████ ████████████ ███
███████████████████ ████████
█████ █████████████████████████████████
█████████████████████████████████████
█████████████████████ █████ ████ ████ ██████████ ██████████████████ ███████████████████████ ██████████████ ███████████████ █████████████████ ████████████ ███████████████████ ███ ███████████████ ███████████████████ ███████ ██ ████████████ ████
███ ██████████████ ██ ███████████ ██
███████
inline_edit_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ █████████ ████████
██████ ██████ █ █
████ ███████
███████████ █ █████ ████████ ████████ ████ █
█
█████████ █
inline_edit_textarea_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
███ █████████████████ ██████ ███ ████ ████ █████████████ █████ ████████████ ██████ ██ ██████ ████████
█████ █ ████
██████ █ █████
████ █ ███
█████████████ █ ████████████
████████████ █ ███████████
██████████████ █ █████████████ ██ ██
inline_edit_textarea_component.html.erb
████ █████████████████████████████
███████████████████████████████ ████ ███
████████████████████████████████████████ █████████████ ███
███████████████████ ████████
█████ █████████████████████████████████
█████████████████████████████████████
██████████ ███████████████ ████
███ ████████████ ██
███████
████ ████████████████████████████████ ███████████████
inline_edit_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ █████████ ████████
██████ ██████ █ █
████ ███████
███████████ █ █████ ████████ ████████ ████ █
█
█████████ █
Select
Edição em linha com lista suspensa de seleção
_inline_edit.html.erb
███ ███████ ███████ ██████ ███ ████ ████ █████████████ █████ ████████████ ██████ ██ ██████ ████████ ███ ████████ ██
██
███████████████ █ ████████████ █ ███ ██████████████ ██ ██████████ █
█████████████ █ ███████████████ █ ███████████████████████ █ ███
██
████ █████████████████████████████
███████████████████████████████ ███ ███
████████████████████████████████████████ ████████████ ███
█████████████████████
█████ █████████████████████████████████
inline_edit_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ █████████ ████████
██████ ██████ █ █
████ ███████
███████████ █ █████ ████████ ████████ ████ █
█
█████████ █
inline_edit_select_component.html.erb
████ █████████████████████████████
███████████████████████████████ ████ ███
████████████████████████████████████████ █████████████ ███
█████████████████████
█████ █████████████████████████████████
█████████████████████████████████████
██████████ ███████████████ ████
███ ████████████ ██
████ ██████████ ███ ██████████████ ████████████████████ ███████████ █████████████████████ ██████████ █ ██ ████
█████ ██████████████████████ ███████████████████████ ████████████████ ██████ ████ ██████ ██
inline_edit_select_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
███ █████████████████ █████████ ██████ ███ ████ ████ █████████████ █████ ████████████ ██████ ██ ██████ ████████
█████ █ ████
████████ █ ███████
██████ █ █████
████ █ ███
█████████████ █ ████████████
████████████ █ ███████████
inline_edit_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ █████████ ████████
██████ ██████ █ █
████ ███████
███████████ █ █████ ████████ ████████ ████ █
█
█████████ █
Changelog
- Initial release with text, textarea, and select styles
Obter Acesso Completo
Desbloqueie o código-fonte deste componente e de todos os outros. Pagamento único para acesso vitalício.
Obter Acesso Agora