https://github.com/jaandrle/simpleeditor

JS class for creating very simple text/html editor combinated with <iframe> element
https://github.com/jaandrle/simpleeditor

chrome designmode editor firefox ie iframe

Last synced: 13 days ago
JSON representation

JS class for creating very simple text/html editor combinated with <iframe> element

• Host: GitHub
• URL: https://github.com/jaandrle/simpleeditor
• Owner: jaandrle
• License: mit
• Created: 2018-01-12T18:54:33.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T17:30:18.000Z (over 1 year ago)
• Last Synced: 2024-03-15T17:05:59.801Z (8 months ago)
• Topics: chrome, designmode, editor, firefox, ie, iframe
• Language: JavaScript
• Homepage:
• Size: 543 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![IE <=9 - supported](https://img.shields.io/badge/IE%20%3C=9-supported-green.svg) ![IE >9 - tested](https://img.shields.io/badge/IE%20%3E9-tested-brightgreen.svg) ![Firefox - tested](https://img.shields.io/badge/Firefox-tested-brightgreen.svg) ![Chrome - tested](https://img.shields.io/badge/Chrome-tested-brightgreen.svg)  ![Safari - tested](https://img.shields.io/badge/Safari-tested-brightgreen.svg)

# SimpleEditor

JS class for creating very simple text/html editor combinated with `````` element.

**[Actual version](https://github.com/jaandrle/SimpleEditor/releases/tag/v0.7)**

## Editor creation

### JavaScript

  ```javascript

    var i_am_instance= class_SimpleEditor.init({

        editor_element: iframe_NODE_element,

        default_value: default_content

    });

  ```

### HTML

  ```html

    

    Bold

```

## Methods

  - *format*(format_name): 

    * primary for using as *onclick* listener

    * format_name= [DOMString](https://developer.mozilla.org/en-US/docs/Web/API/DOMString) command name (i.e. 'Commands List' below);

  - *getContent*: return `````` HTML content

  - *getTextContent*: return `````` text content

## Commands List

  - "**bold**", "**italic**", "**underline**": Toggle bold/italic format new or selected text

  - "**removeFormat**": remove format

  - "**insertOrderedList**", "**insertUnorderedList**", "**insertParagraph**": add ```
```, ```
```, or ```
```

  - "**createEmail**", "**createLink**", "**insertImage**": Toggle email, URL link or create image

    * in case of email and URL link: the link is created from selected text (if detected), or you can add link via prompt

    * "**insertImage**": for now no detection implemented (in aditional, you must combine this with some uploader)

  - "**justifyLeft**", "**justifyRight**", "**justifyCenter**", "**justifyFull**": alingment change

  - Another possibilites in [Document.execCommand()](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)

## Register validator

  - Email example:

    ```javascript

      i_am_instance.setValidationFunction("createEmail", function emailValidation(email_candidate) {

        /*_@_*/ let e= email_candidate.split("@"); if(e.length!==2) return false;

        /*_@_._*/ e= [e[0], ...e[1].split(".")]; if(e.length!==3) return false;

        const _e= !/(#|\?|!|\\|\/|\||\.\.)/i.test(e[0]);

        return _e && e.reduce((r,o)=>r&&o.length>1&&!/\s/.test(o), _e);

      });

    ```