Skip to content
This repository has been archived by the owner on May 9, 2022. It is now read-only.

Commit

Permalink
1.0 Alpha
Browse files Browse the repository at this point in the history
  • Loading branch information
peak committed Feb 20, 2017
1 parent 0dfe367 commit 954ad32
Show file tree
Hide file tree
Showing 65 changed files with 3,151 additions and 5,288 deletions.
3 changes: 3 additions & 0 deletions .babelrc
@@ -0,0 +1,3 @@
{
"presets": [ "es2015" ]
}
5 changes: 5 additions & 0 deletions .eslintignore
@@ -0,0 +1,5 @@
*.less
*.sass
*.pcss
*.css
*.html
74 changes: 74 additions & 0 deletions .eslintrc
@@ -0,0 +1,74 @@
{
"env": {
"es6": true,
"node": true,
"browser": true
},
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
},
"sourceType": "module"
},
"globals": {
"VERSION": false
},
"plugins": [
"import"
],
"rules": {
"indent": "off",
"semi": [
"error",
"never"
],
"comma-dangle": [
"error",
"never"
],
"comma-spacing": "off",
"import/no-extraneous-dependencies": "off",
"no-param-reassign": [
"error",
{
"props": false
}
],
"no-plusplus": "off",
"eol-last": "off",
"class-methods-use-this": "off",
"object-curly-spacing": "off",
"new-cap": [
"error",
{
"newIsCap": true,
"capIsNew": false,
"properties": true
}
],
"space-before-blocks": "off",
"radix": [
"error",
"as-needed"
],
"import/no-unresolved": "off",
"import/extensions": [
"error",
{
"js": "never",
"json": "always"
}
],
"no-console": [
"error",
{
"allow": [
"warn",
"error"
]
}
]
},
"extends": "eslint-config-airbnb"
}
97 changes: 71 additions & 26 deletions README.md
@@ -1,12 +1,14 @@
# Intro
# 简介 Intro

Vue-html5-editor is an html5 wysiwyg editor for vue,easy and flexible,compatible with Vue.js 1.0+.
Vue-html5-editor是一个Vue的富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11.

Vue-html5-editor is an html5 wysiwyg editor for vue,easy and flexible,compatible with Vue.js 2.0+,support IE11.

![screenshot](http://tai.coding.me/vue-html5-editor/editor.png?v=20160912)

[demo is here](http://tai.coding.me/vue-html5-editor)
[点击查看演示效果 Demo is here](http://tai.coding.me/vue-html5-editor)

# Installation
# 安装 Installation

### Npm

Expand All @@ -15,29 +17,51 @@ Vue-html5-editor is an html5 wysiwyg editor for vue,easy and flexible,compatible
npm install vue-html5-editor --save-dev
```

引入并安装作为全局组件

import and install as global component

```js
var Vue = require("vue")
var editor = require("vue-html5-editor")
Vue.use(editor,options);
import Vue from 'vue'
import VueHtml5Editor from 'vue-html5-editor'
Vue.use(VueHtml5Editor,options);
```

### browser
同样你也可以作为局部组件使用,方便在不同的场景里使用不同的配置.

```js
const editor1 = new VueHtml5Editor(options1)
const app1 = new Vue({
components:{editor1
}
})
const editor2 = new VueHtml5Editor(options2)
const app2 = new Vue({
components:{editor2
}
})
```


### 浏览器直接使用 browser

```html
<script src="serverpath/vue.js"></script>
<script src="serverpath/vue-html5-editor.js"></script>
```
Install using global variable `VueHtml5Editor`
通过全局变量`VueHtml5Editor`来安装.

Install using global variable `VueHtml5Editor`.
```js
Vue.use(VueHtml5Editor, options)
```


# Usage
# 使用说明 Usage

模板代码如下:

template code as follows
template code as follows:

```html
<vue-html5-editor :content="content" :height="500"></vue-html5-editor>
Expand All @@ -47,9 +71,11 @@ template code as follows

```js
Vue.use(VueHtml5Editor, {
//global component name
// 全局组件名称,使用new VueHtml5Editor(options)时该选项无效
// global component name
name: "vue-html5-editor",
//custom icon class of built-in modules,default using font-awesome
// 自定义各个图标的class,默认使用的是font-awesome提供的图标
// custom icon class of built-in modules,default using font-awesome
icons: {
text: "fa fa-pencil",
color: "fa fa-paint-brush",
Expand All @@ -66,21 +92,27 @@ Vue.use(VueHtml5Editor, {
"full-screen": "fa fa-arrows-alt",
info: "fa fa-info",
},
//config image module
// 配置图片模块
// config image module
image: {
//Url of the server-side,default null and convert image to base64
// 后端图片上传的地址,如果为空,默认转图片为base64
// Url of the server-side,default null and convert image to base64
server: null,
//the name for file field in multipart request
// 请求时表单参数名
// the name for file field in multipart request
fieldName: "image",
//max file size
// 文件最大体积,单位字节 max file size
sizeLimit: 512 * 1024,
// 是否压缩,默认true,设置为true时会使用localResizeIMG进行压缩
// default true,if set to true,the image will resize by localResizeIMG (https://github.com/think2011/localResizeIMG)
compress: true,
//follows are options of localResizeIMG
// 图片压缩选项
// follows are options of localResizeIMG
width: 1600,
height: 1600,
quality: 80,
//handle response data,return image url
// 响应数据处理
// handle response data,return image url
uploadHandler(responseText){
//default accept json data like {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
var json = JSON.parse(responseText)
Expand All @@ -91,8 +123,10 @@ Vue.use(VueHtml5Editor, {
}
}
},
// 语言,内建的有英文(en-us)和中文(zh-cn)
//default en-us, en-us and zh-cn are built-in
language: "zh-cn",
// 自定义语言
i18n: {
//specify your language here
"zh-cn": {
Expand Down Expand Up @@ -138,10 +172,12 @@ Vue.use(VueHtml5Editor, {
"reset": "重置"
}
},
//the modules you don't want
// 隐藏不想要显示出来的模块
// the modules you don't want
hiddenModules: [],
//keep only the modules you want and customize the order.
//can be used with hiddenModules together
// 自定义要显示的模块,并控制顺序
// keep only the modules you want and customize the order.
// can be used with hiddenModules together
visibleModules: [
"text",
"color",
Expand All @@ -158,33 +194,42 @@ Vue.use(VueHtml5Editor, {
"full-screen",
"info",
],
//extended modules
// 扩展模块,具体可以参考examples或查看源码
// extended modules
modules: {
//omit,reference to source code of build-in modules
}
})
```

# attributes of component
# 组件属性 attributes of component

```html
<editor :content.sync="content" :height="500" :z-index="1000" :auto-height="true"></editor>
```

### content

Content to edit,need two-way binding
编辑内容

The html content to edit

### height

The height or min-height ( if auto-height is true ) of editor
编辑器高度,如果设置了`auto-height`为true,将设置为编辑器的最小高度.

The height or min-height ( if auto-height is true ) of editor.

### z-index

层级,将会设置编辑器容量的`z-index`样式属性.

Sets z-index style property of editor

### auto-height

是否自动根据内容控制编辑器高度.

Resize editor height Automatically

# License
Expand Down

0 comments on commit 954ad32

Please sign in to comment.