vue-html5-editor, 用于vue的html5所见即所得编辑器

分享于 

8分钟阅读

GitHub

  繁體
A html5 wysiwyg editor for vue
  • 源代码名称:vue-html5-editor
  • 源代码网址:http://www.github.com/PeakTai/vue-html5-editor
  • vue-html5-editor源代码文档
  • vue-html5-editor源代码下载
  • Git URL:
    git://www.github.com/PeakTai/vue-html5-editor.git
    Git Clone代码到本地:
    git clone http://www.github.com/PeakTai/vue-html5-editor
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/PeakTai/vue-html5-editor
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    简介介绍

    vue-html5-editor是一个vue的富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持ie11.

    Vue-html5-editor是面向vue的所见即所得编辑器,易于灵活,与 Vue.js 2.0 + 兼容,支持 IE11.

    screenshot

    点击查看演示效果演示在这里。

    安装安装

    Npm

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

    作为全局组件导入和安装

    importVuefrom'vue'importVueHtml5Editorfrom'vue-html5-editor'Vue.use(VueHtml5Editor,options);

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

    consteditor1=newVueHtml5Editor(options1)constapp1=newVue({
     components:{
     editor1
     }
    })consteditor2=newVueHtml5Editor(options2)constapp2=newVue({
     components:{
     editor2
     }
    })

    浏览器直接使用浏览器

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

    通过全局变量 VueHtml5Editor 来安装。

    使用全局变量 VueHtml5Editor 安装。

    Vue.use(VueHtml5Editor, options)
    使用说明用法

    模板代码如下:

    <vue-html5-editor :content="content" :height="500"></vue-html5-editor>
    命令行选项
    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 urluploadHandler(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 {
     returnjson.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 }
    })
    组件属性属性
    <editor :content="content" :height="500" :z-index="1000" :auto-height="true" :show-module-name="false"></editor>

    电子邮件内容

    要编辑的html内容

    高度

    编辑器高度,如果设置了 auto-height 为true,将设置为编辑器的最小高度。

    编辑器的高度或者 min-height ( 如果自动高度为 true )。

    z-index

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

    设置编辑器的z-index 样式属性,默认 1000.

    自动高度

    是否自动根据内容控制编辑器高度,默认为true。

    自动调整编辑器高度,默认 true。

    show-module-name

    局部设置是否显示模块名称,会覆盖全局的设定。

    本地设置 showModuleName

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

    更改

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

    当内容更改时,Emited将当前内容作为事件数据传递。

    许可证

    Apache-2.0


    EDI  Html5  Wysiwyg  
    相关文章