A Vue.js component implementing the HTML editor with the jQuery summernote plugin.
npm install vue-html-editor




A Vue.js component implementing the HTML editor with the jQuery summernote plugin.
The demo page is HERE.
- Vue.js ^0.12.0
- Summernote ^0.6.16
``shell`
$ npm install vue-html-editor
`shell`
$ bower install vue-html-editor
The HTML snippets are as follows:
`html`
The HTML contents are as follows:
{{{text}}}
The Javascript snippets are as follows:
`javascript
var Vue = require("vue");
var vm = new Vue({
el: "#app",
components: {
"vue-html-editor": require("vue-html-editor")
},
data: {
text: "Hello World!"
}
});
`
The model bind to the control, which must be a two way binding variable.
Note that the value of model could be set to null, and in that case thenull
text content of the editor will be set to an empty string. While, if the text
content of the editor is set to empty, the value of the model will be set to instead of an empty string.
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.
The optional height of the HTML editor, in pixels. Default value is 160.
The optional minimum height of the HTML editor, in pixels. Default value is 160.
The optional maximum height of the HTML editor, in pixels. Default value is 800.
The optional name of the textarea control.
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"]]
]
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 theeditor
specified value, where is the reference to the vue-html-editor
component.
- Fork it !
- Create your top branch from dev: git branch my-new-topic origin/devgit commit -am 'Add some topic'
- Commit your changes: git push origin my-new-topic
- Push to the branch: dev
- Submit a pull request to branch of Haixing-Hu/vue-html-editor repository !
First you should install all depended NPM packages. The NPM packages are used
for building and testing this package.
`shell`
$ npm install
Then install all depended bower packages. The bower packages are depended by
this packages.
`shell`
$ bower install
Now you can build the project.
`shell`
$ gulp build
The following command will test the project.
`shell`
$ gulp test
The following command will perform the test and generate a coverage report.
`shell`
$ gulp test:coverage
The following command will perform the test, generate a coverage report, and
upload the coverage report to coveralls.io.
`shell`
$ gulp test:coveralls
You can also run bower install and gulp build together with the following`
command:shell`
npm run build
Or run bower install and gulp test:coveralls together with the following`
command:shell``
npm run test