W on CMS edit page

Author: ALPIXELMaiki

README.md

@@ -25,3 +25,4 @@
 * Cookies : [Vue-cookie](https://github.com/alfhen/vue-cookie)
 * HighCharts : [Vue-HighCharts](https://github.com/weizhenye/vue-highcharts)
 * Vue Analytics : [Vue-ua](https://github.com/ScreamZ/vue-analytics)
+* Date picker : [Vue-Flatpickr](https://github.com/jrainlau/vue-flatpickr)

package.json

@@ -23,12 +23,17 @@
     "axios": "^0.15.3",
     "babel-core": "^6.24.0",
     "babel-loader": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.0.0",
+    "babel-preset-stage-2": "^6.22.0",
     "cross-env": "^3.2.3",
     "css-loader": "^0.25.0",
+    "exports-loader": "^0.6.4",
+    "expose-loader": "^0.7.3",
     "file-loader": "^0.9.0",
     "highcharts": "^5",
+    "imports-loader": "^0.7.1",
     "jasmine-core": "^2.5.2",
     "json-loader": "^0.5.4",
     "karma": "^1.5.0",
@@ -45,14 +50,17 @@
     "phantomjs-prebuilt": "^2.1.14",
     "postcss-loader": "^1.3.3",
     "style-loader": "^0.13.1",
+    "tinymce-vue-2": "0.0.2",
     "vue-axios": "^1.2.2",
     "vue-cookie": "^1.1.3",
+    "vue-flatpickr": "^2.3.0",
     "vue-head": "^2.0.10",
     "vue-highcharts": "0.0.9",
     "vue-loader": "^10.0.0",
     "vue-router": "^2.2.1",
     "vue-template-compiler": "^2.2",
     "vue-ua": "^1.3.0",
+    "vue2-dropzone": "^2.2.4",
     "vuelidate": "^0.4"
   }
 }

src/js/components/editor.vue

@@ -0,0 +1,58 @@
+<template>
+    <div>
+      <textarea rows="30" :id="tinyId">{{editorValue}}</textarea>
+    </div>
+</template>
+
+<script>
+    import Vue from 'vue'
+    import tinymce from 'tinymce'
+    import theme from 'tinymce/themes/modern/index.js'
+
+
+	export default {
+		name: 'tinymce',
+        data() {
+            return {
+
+            }
+        },
+		props: {
+            editorValue: {
+                required : true
+            },
+            tinyId: {
+                required : true,
+                validator: function (value) {
+                    return !_.isEmpty(value)
+                }
+            }
+	    },
+        watch: {
+            editorValue(){
+                this.$emit('editorValueUpdate', this.editorValue)
+            }
+        },
+        created () {
+
+            var vm = this
+
+            tinymce.init({
+                selector: '#' + this.tinyId,
+                themes:"modern",
+
+                setup: function(editor) {
+
+                    editor.on('blur', function() {
+                        var newContent = editor.getContent()
+
+                        vm.$emit('editorValueUpdate', newContent)
+                    })
+
+                }
+            })
+
+        }
+	}
+
+</script>

src/js/components/filters.vue

@@ -64,6 +64,13 @@
     Vue.filter('upper', (str) => {
         return _.upperCase(str)
     })
+
+    /*
+        Use case : {{ "hElLO" | upper }} => "hello"
+    */
+    Vue.filter('lower', (str) => {
+        return _.lowerCase(str)
+    })
     /*
         Use case : {{ "hello" | capitalize }} => "Hello"
     */
@@ -76,9 +83,21 @@
     Vue.filter('truncate', (str, length = 30) => {
         return _.truncate(str, {'length':length})
     })
-
+    /*
+        Use case : {{ "hello world !" | sanitaize }} => "hello-world"
+    */
     Vue.filter('sanitize',(str) => {
-        return str.toLowerCase().replace(/[^\w ]+/g,'').replace(/ +/g,'-')
+
+        var cleanStr = str.toLowerCase().replace(/[^\w ]+/g,'').replace(/ +/g,'-')
+
+        if(_.endsWith(cleanStr, '-'))
+            cleanStr = cleanStr.slice(0,-1)
+
+        if (_.startsWith(cleanStr, '-'))
+            cleanStr = cleanStr.slice(1)
+
+        return cleanStr
+
     })