tinymce-vue-2 - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

index.js

@@ -1,1 +0,3 @@
-module.exports = require('./TinyMce.vue');
+import TinyMce from './TinyMce.vue';
+
+export default TinyMce;

package.json

 {
   "name": "tinymce-vue-2",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A vue 2 component for TinyMCE",
@@ -10,46 +10,2 @@ "keywords": [
   ],
-  "scripts": {
-    "dev": "node build/dev-server.js",
-    "build": "node build/build.js"
-  },
-  "dependencies": {
-    "vue": "^2.1.0"
-  },
-  "devDependencies": {
-    "autoprefixer": "^6.4.0",
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
-    "babel-plugin-transform-runtime": "^6.0.0",
-    "babel-preset-es2015": "^6.0.0",
-    "babel-preset-stage-2": "^6.0.0",
-    "babel-register": "^6.0.0",
-    "chalk": "^1.1.3",
-    "connect-history-api-fallback": "^1.1.0",
-    "css-loader": "^0.25.0",
-    "eventsource-polyfill": "^0.9.6",
-    "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.9.0",
-    "friendly-errors-webpack-plugin": "^1.1.2",
-    "function-bind": "^1.0.2",
-    "html-webpack-plugin": "^2.8.1",
-    "http-proxy-middleware": "^0.17.2",
-    "json-loader": "^0.5.4",
-    "semver": "^5.3.0",
-    "opn": "^4.0.2",
-    "ora": "^0.3.0",
-    "shelljs": "^0.7.4",
-    "url-loader": "^0.5.7",
-    "vue-loader": "^10.0.0",
-    "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.1.0",
-    "webpack": "^1.13.2",
-    "webpack-dev-middleware": "^1.8.3",
-    "webpack-hot-middleware": "^2.12.2",
-    "webpack-merge": "^0.14.1"
-  },
-  "engines": {
-    "node": ">= 4.0.0",
-    "npm": ">= 3.0.0"
-  },
   "author": "Michael Bouclas <[e-mail]> (http://net-tomorrow.com/)",
@@ -56,0 +12,0 @@ "license": "MIT",

README.md

 # tinymce-vue-2
 A vue 2 component for TinyMCE.
+# Install
+`npm install tinymce-vue-2`
 
 # How to use
-* npm install tinymce-vue-2
-*
+* Make sure that window.tinymce is present or it will not work
+* Then in your code just import it like so : `import TinyMCE from 'tinymce-vue-2';`
+* Finally, added to your component as components. If you want it globally available
+you can just to this : `Vue.component('tiny-mce', TinyMCE);`
+* Check the [examples](#examples) on how to use it in your template
+
+# Examples
+Using the default options, you just need to pass an id and a model
+```
+<tiny-mce id="description" v-model="description"></tiny-mce>
+```
+
+Check the binding by doing something like `<div v-html="description"></div>` anywhere in your
+template.
+
+Check bellow on how to configure and extend the editor.
+
+### Changing the menubar
+[Read the documentation first](https://www.tinymce.com/docs/configure/editor-appearance/#menubar)
+
+Pass a prop called menubar which is either a string or a string variable. It can either be
+a string or a boolean
+
+```
+<tiny-mce id="descriptionLong"
+        v-model="descriptionLong"
+        :toolbar="'undo redo'"
+></tiny-mce>
+```
+
+### Changing the toolbar
+[Read the documentation first](https://www.tinymce.com/docs/configure/editor-appearance/#toolbar)
+
+Pass a prop called toolbar which is either a string or a string variable
+to set the toolbar
+```
+<tiny-mce id="descriptionLong"
+        v-model="descriptionLong"
+        :toolbar="'undo redo'"
+></tiny-mce>
+```
+
+It can also be an array which will set multiple toolbars
+```
+[
+    'undo redo | styleselect | bold italic | link image',
+    'alignleft aligncenter alignright'
+  ]
+```
+
+or even a boolean like `false` to disable it
+
+### Passing other configuration options
+You can pass any of the documented options to the editor using the otherProps property like so
+
+[Read the documentation first](https://www.tinymce.com/docs/configure/editor-appearance)
+
+
+```
+<tiny-mce id="descriptionLong"
+        v-model="descriptionLong"
+        :other-props="{min_height:500, elementpath: false, allow_conditional_comments: false}"
+></tiny-mce>
+```
+
+This allows you to freely configure the editor since all it does is merging your object
+with the `tinymce` one

New alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3846

increased by31.04%

Dependency count

0

decreased by-100%

Dev dependency count

0

decreased by-100%

Lines of code

1

increased byInfinity%

Number of lines in readme file

73

increased by942.86%

Worsened metrics

Number of low quality alerts

2

increased by100%

Dependency changes

• - Removedvue@^2.1.0

• - Removed@babel/parser@7.24.4(transitive)

• - Removed@vue/compiler-sfc@2.7.16(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removednanoid@3.3.7(transitive)

• - Removedpicocolors@1.0.0(transitive)

• - Removedpostcss@8.4.38(transitive)

• - Removedprettier@2.8.8(transitive)

• - Removedsource-map@0.6.1(transitive)

• - Removedsource-map-js@1.2.0(transitive)

• - Removedvue@2.7.16(transitive)