• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

vue-html5-editor: 一个vue的html5富文本编辑器插件

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

vue-html5-editor

开源软件地址:

https://gitee.com/tai/vue-html5-editor

开源软件介绍:

简介 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

点击查看演示效果 Demo is here

安装 Installation

Npm

npm install vue-html5-editor --save-dev

引入并安装作为全局组件

import and install as global component

import Vue from 'vue'import VueHtml5Editor from 'vue-html5-editor'Vue.use(VueHtml5Editor,options);

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

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

浏览器直接使用 browser

<script src="serverpath/vue.js"></script><script src="serverpath/vue-html5-editor.js"></script>

通过全局变量VueHtml5Editor来安装.

Install using global variable VueHtml5Editor.

Vue.use(VueHtml5Editor, options)

使用说明 Usage

模板代码如下:

template code as follows:

<vue-html5-editor :content="content" :height="500"></vue-html5-editor>

options

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

<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.

事件

<editor @change="updateData"></editor>

change

每次内容有变动时触发,回传改变后的内容.

Emited when the content changes,and pass the current content as event data.

License

Apache-2.0


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap