{"id":16955595,"url":"https://github.com/marceauka/content-editable-js","last_synced_at":"2025-04-11T21:33:46.291Z","repository":{"id":57206389,"uuid":"245657860","full_name":"MarceauKa/content-editable-js","owner":"MarceauKa","description":"Interact with your content and update it with ease!","archived":false,"fork":false,"pushed_at":"2020-03-10T10:52:41.000Z","size":283,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-10T11:34:29.767Z","etag":null,"topics":["contenteditable","editor","live"],"latest_commit_sha":null,"homepage":"https://marceauka.github.io/content-editable-js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MarceauKa.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-07T15:32:01.000Z","updated_at":"2024-08-04T03:40:37.000Z","dependencies_parsed_at":"2022-09-04T03:21:14.180Z","dependency_job_id":null,"html_url":"https://github.com/MarceauKa/content-editable-js","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarceauKa%2Fcontent-editable-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarceauKa%2Fcontent-editable-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarceauKa%2Fcontent-editable-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarceauKa%2Fcontent-editable-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarceauKa","download_url":"https://codeload.github.com/MarceauKa/content-editable-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248483475,"owners_count":21111457,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["contenteditable","editor","live"],"created_at":"2024-10-13T22:12:44.402Z","updated_at":"2025-04-11T21:33:46.266Z","avatar_url":"https://github.com/MarceauKa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Content Editable JS\n\nContent editable helps you to interact with your HTML content.\nJust add some attributes and let the magic happen!\n\n- [Demo](https://marceauka.github.com/content-editable-js)\n- [Basic usage](#basic-usage)\n- [Documentation](#documentation)\n- [Extend](#extend)\n- [Server](#server)\n- [Contribute](#contribute)\n- [Licence](#licence)\n\n## Basic usage\n\n**Please note that library should not be used in production yet!**\n\n### Add the library\n```html\n\u003c!-- With CDN --\u003e\n\u003cscript src=\"https://unpkg.com/content-editable-js/dist/content-editable.js\"\u003e\u003c/script\u003e\n\u003c!-- Locally --\u003e\n\u003cscript src=\"dist/content-editable.js\"\u003e\u003c/script\u003e\n```\n\nNote: If you want to integrate content-editable-js to your own JS app, use npm `npm install content-editable-js --save`\n\n### Call the library\n```html\n\u003cscript type=\"text/javascript\"\u003e\nlet editable = contentEditable({\n    // (default: true) Auto show the editor when initialized\n    showOnInit: true,\n    // (default: false) Show debug infos\n    debug: true,\n    // (default: null) URL called to save your content\n    defaultEndpoint: 'http://127.0.0.1:1080/server.php',\n    // (default: {}) Additional headers sent to your endpoint\n    headers: {\n        'Authorization': 'Bearer your-token'\n    },\n})\n\u003c/script\u003e\n```\n\n### Prepare your HTML\n```html\n\u003ch4 data-editable=\"title\"\u003eHello world!\u003c/h4\u003e\n\n\u003cimg src=\"...\" data-editable=\"picture\" data-editable-is-image /\u003e\n\n\u003cp data-editable=\"paragraph\" data-editable-is-text\u003e\n    Lorem ipsum dolor sit amet            \n\u003c/p\u003e\n```\n\n## Documentation\n\n### Editable\n\nAn **Editable** is an HTML element that can be edited.\n\n- `data-editable=\"KEY\"`  \nWhere `KEY` is the name of the editable.\n\n- `data-editable-type=\"TYPE\"`  \nWhere `TYPE` is the type of the editable. Optional.  \n\n|Name      |Description    |\n|----------|---------------|\n| `text`   | __(default)__ Simple text element without HTML |\n| `html`   | Simple element with HTML content |\n| `image`  | Simple image content |\n\n### Groups\n\nA **Group** is a collection of editables which are sent together to a same endpoint.\nGroups must be configured at the parent of your editables.\n\n- `data-group=\"KEY\"`  \nWhere `KEY` is the name of the group. It must be unique.\n\n- `data-group-endpoint=\"URL\"`  \nWhere `URL` is your endpoint for the included editables.\n\n#### Example\n```html\n\u003ctable data-group=\"openings\" data-group-endpoint=\"http://your.url/openings/edit\"\u003e\n\u003ctr\u003e\n    \u003ctd data-editable=\"week-days\"\u003eMonday to Friday\u003c/td\u003e\n    \u003ctd data-editable=\"week-hours\"\u003e8am to 8pm\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd data-editable=\"weekend-days\"\u003eSaturday\u003c/td\u003e\n    \u003ctd data-editable=\"weekend-hours\"\u003e10am to 7pm\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n```\n\n### Methods\n\nThe function `contentEditable()` returns an App instance with some methods:\n\n|Method        |Description                    |\n|--------------|-------------------------------|\n|show()        |Show the app and init editables|\n|hide()        |Hide the app|\n|setRecorder() |Add [your own recorder](#recorder) logic|\n|setToolbar()  |Add [your own toolbar](#toolbar) logic|\n\n## Extend\n\n### Editable types\n\n__TODO__\n\n### Recorder\n\nRecorder is in charge to post changes to your endpoints. When initializing you can replace the default one.\nJust bring your own object (or class) with just a function named `save(changes = [])`.\n\n```js\nlet contentEditable = contentEditable({ /* your config */ })\n\ncontentEditable.setRecorder({\n  save(changes = [], endpoint = null) {\n      /* My logic */\n  }\n})\n```\n\nSee the default recorder located at [src/classes/recorder.js](https://github.com/MarceauKa/content-editable-js/tree/master/src/classes/recorder.js) for details.\n\n### Toolbar\n\nThe toolbar is the default component responsible for showing edit buttons. You can replace it at the initialization.\nJust implement an object with the functions `show()` and `hide()`. \nThe library will hide the default one immediatly and replace it with your own.\n\n```js\nlet contentEditable = contentEditable({ /* your config */ })\n\ncontentEditable.setToolbar({\n  show() { /* My logic */ },\n  hide() { /* My logic */ }  \n})\n```\n\nSee the default toolbar located at [src/classes/toolbar.js](https://github.com/MarceauKa/content-editable-js/tree/master/src/classes/toolbar.js) for details.\n\n### Localization\n\nFor now, this library is translated in English and French.\nLocalizations are hard-coded in `src/classes/i18n.js`.\n\nNote that the locale is based on the HTML **lang attribute**.\n\n### Backend\n\nYou can easily develop your own backend (in PHP, node.js, etc...), when changes are made, your endpoint will be reached with a POST request, containing:\n- Your configured headers\n- Array of objects containing the editable name and the editable value \n\n## Server\n\nThis library provides a basic PHP server to test your integration. \nClone this repo and just run the following PHP command at the root:\n\n```bash\nphp -S 127.0.0.1:1080\n```\n\nYou now have the access to:\n- The demo page: [http://127.0.0.1:1080/index.html](http://127.0.0.1:1080/index.html)\n- The server endpoint: [http://127.0.0.1:1080/server.php](http://127.0.0.1:1080/server.php)\n\n## Support\n\nContent Editable is built for modern web browsers. No supports for IE.\nFor bugs and suggestions, [open an issue here](https://github.com/MarceauKa/content-editable-js/issues).\n\n## Contribute\n\nFeel free to make a PR! Once cloned, use these commands:\n\n```\nnpm install # or yarn install\nnpm run dev # or npm run watch\nnpm run prod # before commit \n```\n\n## Licence\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarceauka%2Fcontent-editable-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarceauka%2Fcontent-editable-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarceauka%2Fcontent-editable-js/lists"}