JaySunSyn · Feb 19, 2016 · Feb 19, 2016 · Feb 19, 2016 · Mar 21, 2016 · May 5, 2016
Showing with 297 additions and 131 deletions.

+4 −1 .gitignore

+10 −0 ForkChangeLog.md

+54 −0 README.md

+4 −2 bower.json

+56 −24 demo/demo-element.html

+169 −104 polymer-tinymce.html
diff --git a/.gitignore b/.gitignore
@@ -1 +1,4 @@
-bower_components
+bower_components
+bower_components/*
+.#*
+#*#
diff --git a/ForkChangeLog.md b/ForkChangeLog.md
@@ -0,0 +1,10 @@
+	## 1.0.1
+
+	 Added property "buttons". Used to create custom buttons. It's an object, each key is
+	the button identifier and the value is an object with the following properties:
+
+	- text (text to display)
+	- onclick ( function)
+	- icon: false ( or icon reference) check tinymce docs
+
+
diff --git a/README.md b/README.md
@@ -2,6 +2,48 @@
 
 A tinymce HTML Editor as an Polymer Element.
 
+# Fork notes
+
+The fork makes it easier to work with events (change), and supports multiple
+instances of the editor on the same page.
+
+## Add custom buttons easily:
+
+E.g Bind the "buttons" property to some property in your parent element
+
+```html
+	<polymer-tinymce buttons="{{customButtons}}">...
+```
+
+```js
+   customButtons: {
+      type: Object,
+      value: {
+       'someButton': {
+       'text':'Some custom button here',
+       'onclick': function(ev) {
+          alert('custom action');
+       }
+      }
+   }
+```
+
+## Supported events:
+
+* init
+* focus
+* change
+
+( fixed events 'this' scope )
+
+## change event:
+
+change event receives the new html content ( see demo page for example )
+
+## Support for multiple instances
+
+Each text area will have a unique id, to avoid conflicts with other instances
+
 ```
 <polymer-tinymce id="editor"
 	  	tinytoolbar="insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image" 
@@ -29,4 +71,16 @@ Get and set content:
 </script>
 ```
 
+## Test environment
+
+Install polyserve
+
+    npm install -g polyserve
+
+And run polyserve on the main directory. Then go to
+
+[http://localhost:8080/components/polymer-tinymce/demo/index.html](http://localhost:8080/components/polymer-tinymce/demo/index.html)
+
+To test the component
+
 ![Demo Pic](http://www.synappses.com/wp-content/uploads/2015/06/tinymceDemo.png "Polymer-Tinymce")
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "polymer-tinymce",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "authors": [
     "Jalal Fathi <jfathi.mail@gmail.com>"
   ],
@@ -27,6 +27,8 @@
   },
   "devDependencies": {
     "web-component-tester": "*",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "paper-elements": "PolymerElements/paper-elements#^1.0.1"
+
   }
 }
diff --git a/demo/demo-element.html b/demo/demo-element.html
@@ -3,36 +3,68 @@
 <link rel="import" href="../polymer-tinymce.html">
 
 <dom-module id="demo-element" is="dom-bind">
-  <template>
+    <template>
 
-	  <polymer-tinymce id="editor"
-	  	tinytoolbar="insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image" 
-	  	tinyplugins='["template advlist autolink lists link image charmap print preview anchor","searchreplace visualblocks code fullscreen","insertdatetime media table contextmenu paste"]'
-      templates='[
-    {"title": "Some title 1", "description": "Some desc 1", "content": "My content"}, 
-    {"title": "Some title 2", "description": "Some desc 2", "url": "http://google.com"}]'
-	  ></polymer-tinymce>
+	<polymer-tinymce id="editor" buttons="{{customButtons}}"
+	  		 tinytoolbar="insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image" 
+	  		 tinyplugins='["template advlist autolink lists link image charmap print preview anchor","searchreplace visualblocks code fullscreen","insertdatetime media table contextmenu paste"]'
+			 templates='[
+				    {"title": "Some title 1", "description": "Some desc 1", "content": "My content"}, 
+				    {"title": "Some title 2", "description": "Some desc 2", "url": "http://google.com"}]'
+	></polymer-tinymce>
 
-	  <paper-input id="contentInput" placeholder="Content" value="Hi this is <strong>Jalal</strong>!"></paper-input>
-	  <paper-button on-tap="setContent" raised>Set Content</paper-button>
-	  <paper-button on-tap="getContent" raised>Get Content</paper-button>
+	<paper-input id="contentInput" placeholder="Content" value="Hi this is <strong>Jalal</strong>!"></paper-input>
+	<paper-button on-tap="setContent" raised>Set Content</paper-button>
+	<paper-button on-tap="getContent" raised>Get Content</paper-button>
 
-  </template>
+	<hr>
 
-  <script>
-      Polymer({
+	<h2>Another editor</h2>
+
+	<polymer-tinymce id="editor2"
+			 tinytoolbar="insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image" 
+			 tinyplugins='["template advlist autolink lists link image charmap print preview anchor","searchreplace visualblocks code fullscreen","insertdatetime media table contextmenu paste"]'
+			 templates='[
+				    {"title": "Some title 1", "description": "Some desc 1", "content": "My content"}, 
+				    {"title": "Some title 2", "description": "Some desc 2", "url": "http://google.com"}]'
+	></polymer-tinymce>
 
-        is: "demo-element",
+    </template>
 
-        getContent:function(){
-        	this.$.contentInput.value = this.$.editor.getContent();
-        },
+    <script>
+     Polymer({
 
-        setContent:function(){
-        	this.$.editor.setContent(this.$.contentInput.value);
-        }
+	 is: "demo-element",
+	 properties: {
+
+	     customButtons: {
+		 type: Object,
+		 value: {
+		     'someButton': {
+			 'text':'Some custom button here',
+			 'onclick': function(ev) {
+			     alert('custom action');
+			 }
+		     }
+		 }
+	     }
+	 },
 
-      });
-  </script>
+	 getContent:function(){
+	     this.$.contentInput.value = this.$.editor.getContent();
+	 },
 
-</dom-module>
+	 setContent:function(){
+	     this.$.editor.setContent(this.$.contentInput.value);
+	 },
+
+	 ready: function() {
+	     this.$.editor.addEventListener('change', function(ev) {
+		 console.log('Editor content changed', ev.detail);
+	     })
+	 }
+
+     });
+    </script>
+
+</dom-module>