https://github.com/dashpilot/html-template-editor

Make any HTML template editable!
https://github.com/dashpilot/html-template-editor

Last synced: 7 months ago
JSON representation

Make any HTML template editable!

• Host: GitHub
• URL: https://github.com/dashpilot/html-template-editor
• Owner: dashpilot
• Created: 2021-03-06T16:18:49.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2021-03-06T17:32:12.000Z (about 5 years ago)
• Last Synced: 2025-01-14T12:49:06.783Z (over 1 year ago)
• Language: JavaScript
• Homepage: html-template-editor-git-main-dashpilot.vercel.app
• Size: 79.1 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# html-template-editor

Make any HTML template editable!

Simple on-page editor that features inline-editing, image upload and resize, adding/sorting/removing template blocks. Easy to integrate into any HTML template and independant of CSS frameworks (Can be used with Bootstrap/Tailwind/Uikit/Bulma/Custom CSS/etc).

## Demo

## How to

Integrate the editor with any existing HTML template by adding the following to the head of each page:

    

      const inline_editor = 'h1,h2,h3,h4,h5,p'; // which element should be inline-editable

      const img_width = 800; // resize images to this width

      const page_id = 'page'; // id of the div that contains the page's contents, see below

    

    

    

Wrap the part of the page that you want to save in a div with an id of `page`:

    


      

    


That's all! No further changes required!

## Creating content blocks that users can add to the page

To create your own content blocks, just wrap your custom HTML in a 'template'-tag, add a unique id and the following data-attributes:

`data-name`: The name of the content block as it should appear in the interface

`data-insert`: the wrapper element the content block should be inserted into

    

        	

    	

    		


    			
Mauris eleifend ligula

    			
Vivamus in nisi commodo, auctor magna vel, viverra turpis.



    		



    	


    

Check out the example on:  to see how it all works together

## Backend

The editor (currently?) has no back-end, but exposes a 'save'-function so you can easily integrate your own prefered back-end. To save data to your own back-end, just create a save-function that takes the html as a parameter, for example:

    function save(html){

      // validate user and validate data

      // ...

      // then save to you backend

      var opts = {};

      opts.html = html;

      fetch('/path/to/your/api', {

        method: 'post',

        body: JSON.stringify(opts)

      }).then(function(response) {

        return response.json();

      }).then(function(data) {

        console.log('Saved.');

      });

    }