Repository files navigation

A lightweight, customizableWYSIWYG JavaScript HTML content editor withAI Agent capabilities for modern web applications. Provides a robust and intuitive content editing experience with AI-powered assistance.

Allows you to edit the content of previously created templates or designs while maintaining the original design. Unlike other editors, it allows editing the entire document including both body and head sections, without using deprecated execCommand().

• Integrated AI Agent for intelligent content editing
• Full document editing (body and head sections)
• Modern implementation (no deprecated execCommand)
• Comprehensive undo/redo system
• Advanced image handling with preview and resizing
• Link management with target control
• Source code editing capability
• AI-assisted code editing and generation
• Restorable dynamic content
• Touch-enabled drag interface

Once the editing is finished, I save the changes I receive in an index.html file to replace the downloaded one.

• DEMO template 1
• DEMO template 2
• DEMO template 3
• DEMO template 4
• DEMO template collection

To try out the AI, you can create an account athttps://openrouter.ai and use a free model, or install Ollama. In order for Ollama to work in local mode, you will need to configure CORS. Here's how:https://duckduckgo.com/?q=Ollama+CORS

You can include the editor in your project using either the CDN or by downloading the files directly:

<linkrel="stylesheet"href="https://cdn.jsdelivr.net/gh/FranBarInstance/simple-html-editor@master/simplehtmleditor.min.css"><scriptsrc="https://cdn.jsdelivr.net/gh/FranBarInstance/simple-html-editor@master/simplehtmleditor.min.js"></script>

1. Downloadsimplehtmleditor.min.css andsimplehtmleditor.min.js
2. Include them in your project

The editor code must be wrapped in a div with the idncsedt-implement and placed at the end of your page immediately before the closing</body> tag. This includes both the .js and .css files.

Basic setup with default options:

<!-- ncsedt-implement:before --><divid="ncsedt-implement"><linkrel="stylesheet"href="https://cdn.jsdelivr.net/gh/FranBarInstance/simple-html-editor@master/simplehtmleditor.min.css"><scriptsrc="https://cdn.jsdelivr.net/gh/FranBarInstance/simple-html-editor@master/simplehtmleditor.min.js"></script><script>window.addEventListener('DOMContentLoaded',function(){vareditor=newncSimpleHtmlEditor({// AI configurationaiBackends:{ollama:{enabled:true,url:'http://localhost:11434/api/generate',model:'qwen2.5-coder:7b'}// Configure other AI backends as needed}});editor.start();});</script></div><!-- ncsedt-implement:end -->

Thencsedt-implement:before comment helps detect dynamic changes that should be removed before saving.

IMPORTANT: Do not enter the API key in the settings, as this poses a security risk. There is an option to configure the model in the editor.

varoptions={// Selector for editable content, default "body"editableContentSelector:"body",// Enable linear undo/redo history (non-linear history possible when false)usesLinearUndoHistory:true,// Time window in milliseconds for grouping multiple changes into a single history entrymutationGroupingWindowMs:200,// Number of toolbar columns, by default null, as set in csstoolbarCols:null,// Save button, disable on click in millisecondssaveTimeout:500,// Maximum image size in bytes (large base64 images degrade DOM performance)maxImageSizeBytes:1200000,// AI Backend configurationsaiBackends:{ollama:{enabled:true,url:'http://localhost:11434/api/generate',model:'qwen2.5-coder:7b'},openrouter:{enabled:false,url:'https://openrouter.ai/api/v1/chat/completions',model:'qwen/qwen-2.5-coder-32b-instruct:free'},anthropic:{enabled:false,url:'https://api.anthropic.com/v1/messages',model:'claude-3-opus-20240229'},azure:{enabled:false,url:'',model:''},gemini:{enabled:false,url:'https://generativelanguage.googleapis.com/v1beta/models/',model:'gemini-pro'},openai:{enabled:false,url:'https://api.openai.com/v1/chat/completions',model:'gpt-4-turbo'}},// AI Model ParametersaiModelParams:{temperature:0.5,top_p:0.9},// Additional prompts for AIadditionalPrompts:{"name":'Instructions...'},// Custom prompts for AIcustomPrompts:{"translate":'Translate to English',"traduce":'Traduce a Español',},// Active buttons and toolbar ordertoolbar:['edit','undo','redo','up','down','previous','next','cut','copy','paste','head','code','agent','link','image','save','github'],};vareditor=newncSimpleHtmlEditor(options);

The editor is designed to edit the whole page (body) but there is no problem to edit a specific selector:

vareditor=newncSimpleHtmlEditor({editableContentSelector:"#id",});

For editableContentSelector: ".class" only the first element found will be editable.

varoptions={buttons:{help:{/*             * Same a key name: "help"             */name:'help',/*             * Image for toolbar icon             */icon:'help.png',/*             * Alt text             */title:'Help',/*             * Set when the button is disabled, in this case never             */disabled:function(){returnfalse},/*             * On click action             */action:function(){varlink=document.createElement('a');varncsedt=document.querySelector('#ncsedt-implement');link.setAttribute('href','https://github.com/FranBarInstance/simple-html-editor');link.setAttribute('target','_blank');ncsedt.appendChild(link);link.click();}}},/*     * Add the button at the end of the toolbar     */toolbar:['edit','undo','redo','up','down','previous','next','cut','copy','paste','head','code','agent','link','image','save','github','help']};vareditor=newncSimpleHtmlEditor(options);

Disabled is called whenever there are changes in the editor so that you can determine when to disable the button, an example is the isUndoButtonDisabled function of the undo button, which is disabled whenever editing is not active and enabled if the history is not empty:

ncSimpleHtmlEditor.prototype.isUndoButtonDisabled=function(){return!this.isEditingEnabled()||!this.hasUndoHistory();};ncSimpleHtmlEditor.prototype.hasUndoHistory=function(){returnthis.historyUndo.length>0;};

You can mark tag as "restorable" to restore dynamic changes, such as a "preloader".

There are two ways to do this, with the tag "ncsedt-restorable" or with the attribute "data-ncsedt-restorable".

To mark a code block as "restorable" we use the tag "ncsedt-restorable":

<ncsedt-restorable><divclass="preload">        ...</div></ncsedt-restorable>

To mark a tag as "restorable" we use the attribute data-ncsedt-restorable:

<divclass="preload"data-ncsedt-restorable="true">

To understand what "restorable" does, let's imagine a "preload" plugin that needs a DIV with a class at the beginning of BODY:

<divclass="preload"></div>

When the plugin is executed the code has changed dynamically and may look similar to this:

<divclass="preload done"></div>

Saving the template will also save the .done class and the preload will not be executed again.

It will not work with dynamic changes that are executed before loading the editor code.

You can mark code block as "removable" to remove block on save.

The following code block will be removed when saving the template:

<ncsedt-removable><div>        ...</div></ncsedt-removable>

The editor supports two types of AI prompts:

Additional prompts are predefined prompts that modify the AI's behavior. They are applied before the user's prompt.

additionalPrompts:{"only replacement":'Instructions:\n Provide only what is requested, including all code or text that does not change, without additional comments, without Markdown. The div id ncsedt-implement code must never be modified.'}

Custom prompts are predefined prompts that users can quickly select from the AI agent dialog. These are stored as key-value pairs where the key is displayed in the dropdown menu and the value is the prompt text that will be inserted into the prompt field.

customPrompts:{"translate":'Translate to English',"traduce":'Traduce a Español',}

When a custom prompt is selected from the dropdown, its value is automatically inserted into the prompt textarea, making it easy to reuse common instructions.

The editor provides several events that you can listen to for extending functionality:

• editorstart: Fired after the editor initialization is complete
• editorchanges: Fired when changes affect the editor's state
• contentchanges: Fired when editable content is modified
• focusedchange: Fired when the focused element changes

• showModal: Fired when any dialog is displayed
• click: Fired for various button interactions
• change: Fired when file inputs or form fields are modified

editor.addEventListener('contentchanges',function(e){console.log('Content was modified');});

The editor provides several events that you can listen to for extending functionality:

• editorstart: Fired after the editor initialization is complete
• editorchanges: Fired when changes affect the editor's state
• contentchanges: Fired when editable content is modified
• focusedchange: Fired when the focused element changes

• showModal: Fired when any dialog is displayed
• click: Fired for various button interactions
• change: Fired when file inputs or form fields are modified

editor.addEventListener('contentchanges',function(e){console.log('Content was modified');});

• isEditingEnabled(): Determine if editing is active, true/false.
• getCurrentFocusedElement(): Get the current element that has the focus.
• getPreviousFocusedElement(): Get the previous element that had the focus
• getEditable(): Get editable element.
• getClipboard(): Get clipboard content, can be null.
• getDocumentHTML(selector = null): Get the HTML with the current changes, If no selector is indicated, the complete document.

vareditor=newncSimpleHtmlEditor({buttons:{save:{action:function(){/*                 * Disable editing mode to remove elements that                 * should only be in edit mode.                 */editor.editOff();/*                 * Get HTML to save                 */varhtml=editor.getDocumentHTML();// Your code to save the html here./*                 * Restore editing mode.                 */editor.editOn();}}}});

The editor works on more than 90% of modern templates without the need to modify the template.

There are issues with dynamically generated content, such as animations, preloading, etc. Some plugins modify tag attributes dynamically so that the modified attributes are saved when the template is saved.

MIT License