Skip to main content

Inline editor

Inline Editor#

The inline editor lets you edit content inside the context of a HTML page.

  1. Install the chrome extension or the tag
  2. Enhance your html

Install the chrome extension or the tag#

Chrome extension#

Tag#

<script src="https://inline-editor.gitlify.com/_v/1.2/main.js" async="true" />

To trouble shoot make sure the above domain is included in your CSP Headers, if it doesn't show up in network traffic.

Conditional loading and Google Tag Manager#

Conditional loading simplifies a lot. The following snippet can be pasted in the html document or also Google Tag Manager

<script>
if (location.hostname === '...' and localStorage.getItem('gitlify.inline_editor') === true) {
var script = document.createElement('script');
script.src = "https://inline-editor.gitlify.com/_v/1.2/main.js";
script.async = true;
window.addEventlistener('load', () => {
document.body.appendChild(script)
})
}

Note for this to be useable editors, have to set localStorage.setItem('gitlify.inline_editor', true).

Enhance the HTML#

Prepare for edit#

<!DocType HTML>
<html>
<head>
<title data-gitlify-id="page#1243" data-gitlify-html="title">Peter</title>
</head>
<body data-gitlify-toolbox="page">
...
<div data-gitlify-id="article#1243" data-gitlify-attr-id="_id" id="section_uuu">
<span data-gitlify-html="name">Andrew</span>
<img src="..." data-gitlify-attr-src="title" data-gitlify-attr-src="title">
</div>
<!-- Because title metatag is hard to edit-->
<div data-gitlify-edit="page#1243" />
</body>
</html>

Prepare for list, search, create and delete#

This only works with our SDK and not out of the box. We are happy to link to your project here;-)