https://github.com/davidchambers/contenteditable

A jQuery utility which adds useful behaviour to `contenteditable` text
https://github.com/davidchambers/contenteditable

Last synced: about 2 months ago
JSON representation

A jQuery utility which adds useful behaviour to `contenteditable` text

• Host: GitHub
• URL: https://github.com/davidchambers/contenteditable
• Owner: davidchambers
• License: wtfpl
• Created: 2012-09-02T21:50:46.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2016-08-12T11:31:52.000Z (over 8 years ago)
• Last Synced: 2024-11-13T11:38:43.366Z (about 2 months ago)
• Language: CoffeeScript
• Homepage:
• Size: 12.7 KB
• Stars: 2
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# contenteditable

contenteditable is a tiny jQuery utility which adds useful behaviour to

`contenteditable` text.

## Usage

The element with the `contenteditable` attribute must be wrapped by an element

with a class of `contenteditable`. To make an `h1` editable, for example, use:

```html

Romeo & Juliet

```


When a user clicks the editable text the browser inserts the caret as near as

possible to the cursor. contenteditable also listens for click events on the

containing element (the `h1` in the above example). The event handler focuses

the editable element and selects its text. To take advantage of this handler,

include CSS similar to the following:

```css

.contenteditable {

  display: inline-block;

  background: url(images/edit.png) no-repeat right;

  padding-right: 24px;

}

```

contenteditable also listens for the enter/return keystroke when text is being

edited, in response to which it triggers a "contentedited" event. This custom

event provides a hook for application code, which might be along these lines:

```javascript

$('#play').bind('contentedited', function (event) {

  $.post('/path/to/resource', {title: $(event.target).text()})

})

```