From 5d4441d9137bce9b1e0c52181d8810c6fc79c408 Mon Sep 17 00:00:00 2001 From: Jared Reich Date: Sat, 15 Jul 2017 06:30:45 -0600 Subject: [PATCH] Use HTMLElement as root instead of id closes #10, closes #40 --- README.md | 6 +++++- demo.html | 2 +- dist/pell.js | 6 ++---- dist/pell.min.js | 2 +- src/pell.js | 6 ++---- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 1784623..3710300 100644 --- a/README.md +++ b/README.md @@ -122,21 +122,25 @@ window.pell ```js pell.init({ + // actions: Array actions: [ 'bold', { name: 'italic', icon: '☺', title: 'Zitalic' }, 'underline' ], + // classes: Array 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: 'pell' + // root: HTMLElement + root: document.getElementById('pell') }) ``` diff --git a/demo.html b/demo.html index f72d24d..c1455e0 100644 --- a/demo.html +++ b/demo.html @@ -61,7 +61,7 @@

HTML output:

document.getElementById('text-output').innerHTML = html document.getElementById('html-output').textContent = html }, - root: 'pell' + root: document.getElementById('pell') }) diff --git a/dist/pell.js b/dist/pell.js index 57ebd80..dc8439f 100644 --- a/dist/pell.js +++ b/dist/pell.js @@ -156,11 +156,9 @@ var init = function init(settings) { settings.classes = _extends({}, defaultSettings.classes, settings.classes); - var root = document.getElementById(settings.root); - var actionbar = document.createElement('div'); actionbar.className = settings.classes.actionbar; - root.appendChild(actionbar); + settings.root.appendChild(actionbar); var editor = document.createElement('div'); editor.contentEditable = true; @@ -168,7 +166,7 @@ var init = function init(settings) { editor.oninput = function (event) { return settings.onChange && settings.onChange(event.target.innerHTML); }; - root.appendChild(editor); + settings.root.appendChild(editor); settings.actions.forEach(function (action) { var button = document.createElement('button'); diff --git a/dist/pell.min.js b/dist/pell.min.js index e6a0d28..c2ed36b 100644 --- a/dist/pell.min.js +++ b/dist/pell.min.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.pell={})}(this,function(t){"use strict";var e=Object.assign||function(t){for(var e=1;e1&&void 0!==arguments[1]?arguments[1]:null;document.execCommand(t,!1,e)},r=function(t){return/^https?:\/\//.test(t)&&t||"http://"+t},o={bold:{icon:"B",title:"Bold",result:function(){return i("bold")}},italic:{icon:"I",title:"Italic",result:function(){return i("italic")}},underline:{icon:"U",title:"Underline",result:function(){return i("underline")}},strikethrough:{icon:"S",title:"Strike-through",result:function(){return i("strikeThrough")}},heading1:{icon:"H1",title:"Heading 1",result:function(){return i("formatBlock","

")}},heading2:{icon:"H2",title:"Heading 2",result:function(){return i("formatBlock","

")}},paragraph:{icon:"¶",title:"Paragraph",result:function(){return i("formatBlock","

")}},quote:{icon:"“ ”",title:"Quote",result:function(){return i("formatBlock","

")}},olist:{icon:"#",title:"Ordered List",result:function(){return i("insertOrderedList")}},ulist:{icon:"•",title:"Unordered List",result:function(){return i("insertUnorderedList")}},code:{icon:"</>",title:"Code",result:function(){return i("formatBlock","
")}},line:{icon:"―",title:"Horizontal Line",result:function(){return i("insertHorizontalRule","
")}},link:{icon:"🔗",title:"Link",result:function(){var t=window.prompt("Enter the link URL");t&&i("createLink",r(t))}},image:{icon:"📷",title:"Image",result:function(){var t=window.prompt("Enter the image URL");t&&i("insertImage",r(t))}},undo:{icon:"↺",title:"Undo",result:function(){return i("undo")}},redo:{icon:"↻",title:"Redo",result:function(){return i("redo")}}},u=function(t){t.actions=t.actions?t.actions.map(function(t){return"string"==typeof t?o[t]:e({},o[t.name],t)}):Object.keys(o).map(function(t){return o[t]}),t.classes=e({},n.classes,t.classes);var i=document.getElementById(t.root),r=document.createElement("div");r.className=t.classes.actionbar,i.appendChild(r);var u=document.createElement("div");u.contentEditable=!0,u.className=t.classes.editor,u.oninput=function(e){return t.onChange&&t.onChange(e.target.innerHTML)},i.appendChild(u),t.actions.forEach(function(e){var n=document.createElement("button");n.className=t.classes.button,n.innerHTML=e.icon,n.title=e.title,n.onclick=e.result,r.appendChild(n)})},l={init:u};t.init=u,t.default=l,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.pell={})}(this,function(t){"use strict";var e=Object.assign||function(t){for(var e=1;e1&&void 0!==arguments[1]?arguments[1]:null;document.execCommand(t,!1,e)},r=function(t){return/^https?:\/\//.test(t)&&t||"http://"+t},o={bold:{icon:"B",title:"Bold",result:function(){return i("bold")}},italic:{icon:"I",title:"Italic",result:function(){return i("italic")}},underline:{icon:"U",title:"Underline",result:function(){return i("underline")}},strikethrough:{icon:"S",title:"Strike-through",result:function(){return i("strikeThrough")}},heading1:{icon:"H1",title:"Heading 1",result:function(){return i("formatBlock","
")}},heading2:{icon:"H2",title:"Heading 2",result:function(){return i("formatBlock","
")}},paragraph:{icon:"¶",title:"Paragraph",result:function(){return i("formatBlock","
")}},quote:{icon:"“ ”",title:"Quote",result:function(){return i("formatBlock","
")}},olist:{icon:"#",title:"Ordered List",result:function(){return i("insertOrderedList")}},ulist:{icon:"•",title:"Unordered List",result:function(){return i("insertUnorderedList")}},code:{icon:"</>",title:"Code",result:function(){return i("formatBlock","
")}},line:{icon:"―",title:"Horizontal Line",result:function(){return i("insertHorizontalRule","
")}},link:{icon:"🔗",title:"Link",result:function(){var t=window.prompt("Enter the link URL");t&&i("createLink",r(t))}},image:{icon:"📷",title:"Image",result:function(){var t=window.prompt("Enter the image URL");t&&i("insertImage",r(t))}},undo:{icon:"↺",title:"Undo",result:function(){return i("undo")}},redo:{icon:"↻",title:"Redo",result:function(){return i("redo")}}},u=function(t){t.actions=t.actions?t.actions.map(function(t){return"string"==typeof t?o[t]:e({},o[t.name],t)}):Object.keys(o).map(function(t){return o[t]}),t.classes=e({},n.classes,t.classes);var i=document.createElement("div");i.className=t.classes.actionbar,t.root.appendChild(i);var r=document.createElement("div");r.contentEditable=!0,r.className=t.classes.editor,r.oninput=function(e){return t.onChange&&t.onChange(e.target.innerHTML)},t.root.appendChild(r),t.actions.forEach(function(e){var n=document.createElement("button");n.className=t.classes.button,n.innerHTML=e.icon,n.title=e.title,n.onclick=e.result,i.appendChild(n)})},l={init:u};t.init=u,t.default=l,Object.defineProperty(t,"__esModule",{value:!0})});
diff --git a/src/pell.js b/src/pell.js
index 0527a07..8a2fe5e 100644
--- a/src/pell.js
+++ b/src/pell.js
@@ -115,17 +115,15 @@ export const init = settings => {
 
   settings.classes = { ...defaultSettings.classes, ...settings.classes }
 
-  const root = document.getElementById(settings.root)
-
   const actionbar = document.createElement('div')
   actionbar.className = settings.classes.actionbar
-  root.appendChild(actionbar)
+  settings.root.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)
-  root.appendChild(editor)
+  settings.root.appendChild(editor)
 
   settings.actions.forEach(action => {
     const button = document.createElement('button')