wraps texts between line breaks in paragraph elements (<p>)
handles text/html paste events:
- Removes all styles and attributes from the pasted html so it matches the expected styles

Installation

Run npm install --save content-editable.

Usage

Basic example

<html>
  <body>
    <div class="container"></div>
    
    <script src="path/to/content-editable.js"></script>
    <script>
      const component = new contentEditable.TextView({
        target: document.querySelector('.container'),
        data: {
          // class: would set a custom class for the created div
          // style: would set custom styles for the created div
          // editable: [true] If the created div's content should be editable
          html: '<p>The initial text</p>',
        }
      });
    </script>
  </body>
</html>

Usage inside a svelte component:

<TextView bind:html></TextView>

<script>
  import { TextView } from 'contenteditable/src/TextView.html';
  
  export default {
    data() {
      return {
        html: '<p>The initial text</p>',
      };
    },
    components: {
      TextView
    }
  }
</script>

Subscribe to changes:

const component = /* get TextView from somewhere */

component.observe('html', html => console.log('HTML content changed to', html));
component.observe('text', text => console.log('Plain text content changed to', text));

To learn more about svelte observers, see the docs.

Keywords

FAQs

What is content-editable?

Is content-editable well maintained?

Last updated on 26 Jun 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

content-editable