Multiple instances, preload content

closes jaredreich#2, closes jaredreich#14

README.md

@@ -12,7 +12,7 @@ Live demo: [https://jaredreich.com/pell](https://jaredreich.com/pell)
 
 | library | size (min+gzip) | size (min) | jquery | bootstrap |
 |---------------|-----------------|------------|--------|-----------|
-| pell | 1.1kB  | 2.9kB  | | |
+| pell | 1.14kB | 2.98kB | | |
 | medium-editor | 27kB | 105kB | | |
 | quill | 43kB | 205kB | | |
 | ckeditor | 163kB | 551kB | | |
@@ -80,7 +80,7 @@ npm install --save pell
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/pell/dist/pell.min.css">
  <style>
  /* override styles here */
- .pell-editor {
+ .pell-content {
  background-color: pink;
  }
  </style>
@@ -121,35 +121,49 @@ window.pell
 ```
 
 ```js
-pell.init({
- // actions: Array<string | Object>
+const editor = pell.init({
+ // element: HTMLElement (required)
+ element: document.getElementById('pell'),
+
+ // onChange: Function (required)
+ // Use the output html, triggered by element's `oninput` event
+ onChange: html => {
+ document.getElementById('text-output').innerHTML = html
+ document.getElementById('html-output').textContent = html
+ },
+
+ // styleWithCSS: boolean (optional)
+ // Outputs <span style="font-weight: bold;"></span> instead of <b></b>
+ styleWithCSS: true,
+
+ // actions: Array<string | Object> (optional)
+ // Pluck the actions you specifically want, and edit them
  actions: [
  'bold',
  { name: 'italic', icon: '&#9786;', title: 'Zitalic' },
  'underline'
  ],
- // classes: Array<string>
+
+ // classes: Array<string> (optional)
+ // Choose your custom class names
  classes: {
  actionbar: 'pell-actionbar',
  button: 'pell-button',
- editor: 'pell-editor'
- },
- // onChange: Function
- onChange: html => {
- document.getElementById('text-output').innerHTML = html
- document.getElementById('html-output').textContent = html
- },
- // root: HTMLElement
- root: document.getElementById('pell')
+ content: 'pell-content'
+ }
 })
+
+// editor.content: HTMLElement
+// To change the editor's content:
+editor.content.innerHTML = '<b><u><i>Initial content!</i></u></b>'
 ```
 
 ## Custom Styles
 
 #### SCSS:
 
 ```scss
-$pell-editor-height: 400px;
+$pell-content-height: 400px;
 // See all overwriteable variables in src/pell.scss
 
 // Then import pell.scss into styles:
@@ -160,7 +174,7 @@ $pell-editor-height: 400px;
 
 ```css
 /* After pell styles are applied to DOM: */
-.pell-editor {
+.pell-content {
  height: 400px;
 }
 ```

demo.html

@@ -44,26 +44,16 @@ <h3>HTML output:</h3>
 
  <script src="dist/pell.js"></script>
  <script>
- window.pell.init({
- /*
- actions: [
- 'bold',
- { name: 'italic', icon: '&#9786;', title: 'Zitalic' },
- 'underline'
- ],
- classes: {
- actionbar: 'pell-actionbar',
- button: 'pell-button',
- editor: 'pell-editor'
- },
- */
+ var editor = window.pell.init({
+ element: document.getElementById('pell'),
+ styleWithCSS: true,
  onChange: html => {
  document.getElementById('text-output').innerHTML = html
  document.getElementById('html-output').textContent = html
- },
- root: document.getElementById('pell'),
- styleWithCSS: true
+ }
  })
+
+ editor.content.innerHTML = '<b><u><i>Initial content!</i></u></b>'
  </script>
 
  </body>

dist/pell.css

@@ -4,7 +4,7 @@
  box-sizing: border-box;
  width: 100%; }
 
-.pell-editor {
+.pell-content {
  box-sizing: border-box;
  height: 300px;
  outline: 0;

dist/pell.js

@@ -10,7 +10,7 @@ var defaultSettings = {
  classes: {
  actionbar: 'pell-actionbar',
  button: 'pell-button',
- editor: 'pell-editor'
+ content: 'pell-content'
  }
 };
 
@@ -158,15 +158,15 @@ var init = function init(settings) {
 
  var actionbar = document.createElement('div');
  actionbar.className = settings.classes.actionbar;
- settings.root.appendChild(actionbar);
+ settings.element.appendChild(actionbar);
 
- var editor = document.createElement('div');
- editor.contentEditable = true;
- editor.className = settings.classes.editor;
- editor.oninput = function (event) {
- return settings.onChange && settings.onChange(event.target.innerHTML);
+ settings.element.content = document.createElement('div');
+ settings.element.content.contentEditable = true;
+ settings.element.content.className = settings.classes.content;
+ settings.element.content.oninput = function (event) {
+ return settings.onChange(event.target.innerHTML);
  };
- settings.root.appendChild(editor);
+ settings.element.appendChild(settings.element.content);
 
  if (settings.styleWithCSS) execute('styleWithCSS');
 
@@ -178,6 +178,8 @@ var init = function init(settings) {
  button.onclick = action.result;
  actionbar.appendChild(button);
  });
+
+ return settings.element;
 };
 
 var pell = { init: init };

src/pell.js

@@ -2,7 +2,7 @@ const defaultSettings = {
  classes: {
  actionbar: 'pell-actionbar',
  button: 'pell-button',
- editor: 'pell-editor'
+ content: 'pell-content'
  }
 }
 
@@ -117,13 +117,13 @@ export const init = settings => {
 
  const actionbar = document.createElement('div')
  actionbar.className = settings.classes.actionbar
- settings.root.appendChild(actionbar)
+ settings.element.appendChild(actionbar)
 
- const editor = document.createElement('div')
- editor.contentEditable = true
- editor.className = settings.classes.editor
- editor.oninput = event => settings.onChange && settings.onChange(event.target.innerHTML)
- settings.root.appendChild(editor)
+ settings.element.content = document.createElement('div')
+ settings.element.content.contentEditable = true
+ settings.element.content.className = settings.classes.content
+ settings.element.content.oninput = event => settings.onChange(event.target.innerHTML)
+ settings.element.appendChild(settings.element.content)
 
  if (settings.styleWithCSS) execute('styleWithCSS')
 
@@ -135,6 +135,8 @@ export const init = settings => {
  button.onclick = action.result
  actionbar.appendChild(button)
  })
+
+ return settings.element
 }
 
 export default { init }

src/pell.scss

@@ -6,8 +6,8 @@ $pell-border-width: 1px !default;
 $pell-box-shadow: 0 2px 3px $pell-border-color, 0 0 0 1px $pell-border-color !default;
 $pell-button-height: 30px !default;
 $pell-button-width: 30px !default;
-$pell-editor-height: 300px !default;
-$pell-editor-padding: 10px !default;
+$pell-content-height: 300px !default;
+$pell-content-padding: 10px !default;
 
 .pell {
  border-radius: $pell-border-radius;
@@ -16,12 +16,12 @@ $pell-editor-padding: 10px !default;
  width: 100%;
 }
 
-.pell-editor {
+.pell-content {
  box-sizing: border-box;
- height: $pell-editor-height;
+ height: $pell-content-height;
  outline: 0;
  overflow-y: auto;
- padding: $pell-editor-padding;
+ padding: $pell-content-padding;
  width: 100%;
 }