# 简介 Intro
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)
# 安装 Installation
### Npm
```bash
npm install vue-html5-editor --save-dev
```
引入并安装作为全局组件
import and install as global component
```js
import Vue from 'vue'
import VueHtml5Editor from 'vue-html5-editor'
Vue.use(VueHtml5Editor,options);
```
同样你也可以作为局部组件使用,方便在不同的场景里使用不同的配置.
```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>
```
通过全局变量`VueHtml5Editor`来安装.
Install using global variable `VueHtml5Editor`.
```js
Vue.use(VueHtml5Editor, options)
```
# 使用说明 Usage
模板代码如下:
template code as follows:
```html
<vue-html5-editor :content="content" :height="500"></vue-html5-editor>
```
# options
```js
Vue.use(VueHtml5Editor, {
// 全局组件名称,使用new VueHtml5Editor(options)时该选项无效
// global component name
name: "vue-html5-editor",
// 是否显示模块名称,开启的话会在工具栏的图标后台直接显示名称
// if set true,will append module name to toolbar after icon
showModuleName: false,
// 自定义各个图标的class,默认使用的是font-awesome提供的图标
// custom icon class of built-in modules,default using font-awesome
icons: {
text: "fa fa-pencil",
color: "fa fa-paint-brush",
font: "fa fa-font",
align: "fa fa-align-justify",
list: "fa fa-list",
link: "fa fa-chain",
unlink: "fa fa-chain-broken",
tabulation: "fa fa-table",
image: "fa fa-file-image-o",
hr: "fa fa-minus",
eraser: "fa fa-eraser",
undo: "fa-undo fa",
"full-screen": "fa fa-arrows-alt",
info: "fa fa-info",
},
// 配置图片模块
// config image module
image: {
// 文件最大体积,单位字节 max file size
sizeLimit: 512 * 1024,
// 上传参数,默认把图片转为base64而不上传
// upload config,default null and convert image to base64
upload: {
url: null,
headers: {},
params: {},
fieldName: {}
},
// 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩
// compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG)
// set null to disable compression
compress: {
width: 1600,
height: 1600,
quality: 80
},
// 响应数据处理,最终返回图片链接
// 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)
if (!json.ok) {
alert(json.msg)
} else {
return json.data
}
}
},
// 语言,内建的有英文(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": {
"align": "对齐方式",
"image": "图片",
"list": "列表",
"link": "链接",
"unlink": "去除链接",
"table": "表格",
"font": "文字",
"full screen": "全屏",
"text": "排版",
"eraser": "格式清除",
"info": "关于",
"color": "颜色",
"please enter a url": "请输入地址",
"create link": "创建链接",
"bold": "加粗",
"italic": "倾斜",
"underline": "下划线",
"strike through": "删除线",
"subscript": "上标",
"superscript": "下标",
"heading": "标题",
"font name": "字体",
"font size": "文字大小",
"left justify": "左对齐",
"center justify": "居中",
"right justify": "右对齐",
"ordered list": "有序列表",
"unordered list": "无序列表",
"fore color": "前景色",
"background color": "背景色",
"row count": "行数",
"column count": "列数",
"save": "确定",
"upload": "上传",
"progress": "进度",
"unknown": "未知",
"please wait": "请稍等",
"error": "错误",
"abort": "中断",
"reset": "重置"
}
},
// 隐藏不想要显示出来的模块
// the modules you don't want
hiddenModules: [],
// 自定义要显示的模块,并控制顺序
// keep only the modules you want and customize the order.
// can be used with hiddenModules together
visibleModules: [
"text",
"color",
"font",
"align",
"list",
"link",
"unlink",
"tabulation",
"image",
"hr",
"eraser",
"undo",
"full-screen",
"info",
],
// 扩展模块,具体可以参考examples或查看源码
// extended modules
modules: {
//omit,reference to source code of build-in modules
}
})
```
# 组件属性 attributes
```html
<editor :content="content" :height="500" :z-index="1000" :auto-height="true" :show-module-name="false"></editor>
```
### content
编辑内容
The html content to edit
### height
编辑器高度,如果设置了`auto-height`为true,将设置为编辑器的最小高度.
The height or min-height ( if auto-height is true ) of editor.
### z-index
层级,将会设置编辑器容量的`z-index`样式属性,默认为1000.
Sets z-index style property of editor,default 1000.
### auto-height
是否自动根据内容控制编辑器高度,默认为true.
Resize editor height automatically,default true.
### show-module-name
局部设置是否显示模块名称,会覆盖全局的设定.
Set `showModuleName` locally.
# 事件
```html
<editor @change="updateData"></editor>
```
### change
每次内容有变动时触发,回传改变后的内容.
Emited when the content changes,and pass the current content as event data.
# License
[Apache-2.0](http://opensource.org/licenses/Apache-2.0)
没有合适的资源?快使用搜索试试~ 我知道了~
vue-html5-editor:用于vue的html5所见即所得编辑器
共75个文件
js:35个
html:16个
gif:9个
5星 · 超过95%的资源 需积分: 50 7 下载量 167 浏览量
2021-02-06
10:35:11
上传
评论 1
收藏 111KB ZIP 举报
温馨提示
简介 Vue-html5-editor是一个Vue的富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11。 Vue-html5-editor是一个html5所见即所得编辑器,用于vue,轻松,灵活,与Vue.js 2.0+兼容,支持IE11。 安装安装 Npm npm install vue-html5-editor --save-dev ♡并安装作为一部分组件 导入并安装为全局组件 import Vue from 'vue' import VueHtml5Editor from 'vue-html5-editor' Vue . use ( VueHtml5Edito
资源推荐
资源详情
资源评论
收起资源包目录
vue-html5-editor-master.zip (75个子文件)
vue-html5-editor-master
.gitignore 553B
.babelrc 29B
.eslintrc 1KB
package.json 1KB
src
editor.js 6KB
polyfill-ie.js 2KB
index.js 3KB
range
util.js 4KB
handler.js 12KB
README.md 895B
command.js 822B
util
mixin.js 714B
editor.html 976B
style.css 3KB
i18n
en-us.js 1KB
zh-cn.js 1KB
modules
text
dashboard.html 669B
index.js 272B
dashboard.js 72B
font
dashboard.html 848B
index.js 194B
dashboard.js 2KB
info
dashboard.html 299B
index.js 304B
dashboard.js 187B
full-screen
index.js 227B
table
dashboard.html 429B
index.js 376B
dashboard.js 1KB
link
dashboard.html 219B
index.js 185B
dashboard.js 328B
index.js 704B
hr
index.js 283B
list
dashboard.html 284B
index.js 182B
dashboard.js 112B
image
dashboard.html 1KB
index.js 804B
dashboard.js 6KB
undo
index.js 190B
align
dashboard.html 402B
index.js 194B
dashboard.js 112B
color
dashboard.html 556B
index.js 206B
dashboard.js 867B
style.css 113B
eraser
index.js 225B
unlink
index.js 204B
dist
vue-html5-editor.js 86KB
LICENSE.txt 10KB
rollup.config.js 2KB
README.md 7KB
example
basic.html 2KB
i18n.html 2KB
custom-modules.html 1KB
custom-icons
list.png 4KB
undo.gif 3KB
image.gif 2KB
font.png 5KB
eraser.gif 2KB
color.gif 3KB
info.png 6KB
link.gif 3KB
hr.gif 1KB
full-screen.gif 2KB
table.gif 2KB
text.png 3KB
unlink.gif 2KB
align.png 2KB
extended-module.html 4KB
custom-icon.html 3KB
custom-color.html 1KB
.eslintignore 52B
共 75 条
- 1
应聘
- 粉丝: 27
- 资源: 4568
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 毕业设计基于STM32的测量温度与压力的数据处理设计C语言完整源码+论文.zip
- 基于MATLAB的PCA算法人脸识别项目源码+GUI界面+说明文档.zip
- 基于STM32的测量温度与压力的数据处理设计源码+论文(毕业设计).zip
- Vision Transformer 网络对不同氨气氧气浓度轨迹RAS 图像数据集的分类,包含训练权重和数据集、迁移学习
- 基于C51带字库LCD12864(ST7920)的keil工程源码,只支持8位并口通讯(不支持串口),可显示中文.zip
- 基于SI4463射频模块433MD-SMA无线模块软硬件技术资料及(SI4463)IC技术资料文档.zip
- (GPS+北斗+GSM)HLK-GS2503模块软硬件开发资料包硬件参考设计(原理图PCB)+技术文档资料.zip
- 基于BERT+Biaffine结构的关系抽取模型源码+文档说明.zip
- 利用c语言编写的冒泡排序代码
- 基于Ansoft-HFSS知识总结hfss中文教程HFSS培训教材等技术资料合集(50个).zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页