vue-html-editor

Build Status Coverage Status bitHound Score Dependency Status devDependency Status

A Vue.js component implementing the HTML editor with the jQuery summernote plugin.

Demo

The demo page is HERE.

Screenshot

Requirements

Instllation

npm

$ npm install vue-html-editor

bower

$ bower install vue-html-editor

Usage

The HTML snippets are as follows:

<div class="container" id="app">
  <vue-html-editor model="{{@ text}}"></vue-html-editor>
  <div style="margin-top:40px">
    <div> The HTML contents are as follows:</div>
    <hr>
    <div >{{{text}}}</div>
  </div>
</div>

The Javascript snippets are as follows:

var Vue = require("vue");

var vm = new Vue({
  el: "#app",
  components: {
    "vue-html-editor": require("vue-html-editor")
  },
  data: {
    text: "Hello World!"
  }
});

Component Properties

model

The model bind to the control, which must be a two way binding variable.

language

The optional code of language used by the summernote plugin. Default value is 'en-US'. Note that the language code passed to this property must be a language code together with a country code. This limitation is due to names of the i18n localizaiton files of the summernote plugin.

height

The optional height of the HTML editor, in pixels. Default value is 160.

minHeight

The optional minimum height of the HTML editor, in pixels. Default value is 160.

maxHeight

The optional maximum height of the HTML editor, in pixels. Default value is 800.

toolbar

The optional configuration of toolbar of the HTML editor. This value will be passed to the constructor of the summernote directly. Default value is as follows

[
  ["font", ["bold", "italic", "underline", "clear"]],
  ["fontsize", ["fontsize"]],
  ["para", ["ul", "ol", "paragraph"]],
  ["color", ["color"]],
  ["insert", ["link", "picture", "hr"]]
]

API

control

This property is a reference to the JQuery selection of the base texearea control. It could be used to call the APIs of summernote. For example, editor.control.code(val) will set the HTML content of the editor to the specified value, where editor is the reference to the vue-html-editor component.

Contributing

Building and Testing

First you should install all depended NPM packages. The NPM packages are used for building and testing this package.

$ npm install

Then install all depended bower packages. The bower packages are depended by this packages.

$ bower install

Now you can build the project.

$ gulp build

The following command will test the project.

$ gulp test

The following command will perform the test and generate a coverage report.

$ gulp test:coverage

The following command will perform the test, generate a coverage report, and upload the coverage report to coveralls.io.

$ gulp test:coveralls

You can also run bower install and gulp build together with the following command:

npm build

Or run bower install and gulp test:coveralls together with the following command:

npm test

License

The MIT License