{"id":13473277,"url":"https://github.com/PeakTai/vue-html5-editor","last_synced_at":"2025-03-26T17:32:26.886Z","repository":{"id":49826165,"uuid":"61286619","full_name":"PeakTai/vue-html5-editor","owner":"PeakTai","description":"An html5 wysiwyg editor for vue","archived":true,"fork":false,"pushed_at":"2023-08-21T22:19:31.000Z","size":493,"stargazers_count":950,"open_issues_count":111,"forks_count":247,"subscribers_count":33,"default_branch":"master","last_synced_at":"2024-10-19T13:25:19.191Z","etag":null,"topics":["html5-wysiwyg-editor","vue","vue-html5-editor","wysiwyg"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PeakTai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-16T11:13:55.000Z","updated_at":"2024-10-14T03:02:52.000Z","dependencies_parsed_at":"2024-06-18T12:42:29.061Z","dependency_job_id":"100cba8b-d2a2-4dce-91fe-5004258cb3ed","html_url":"https://github.com/PeakTai/vue-html5-editor","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeakTai%2Fvue-html5-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeakTai%2Fvue-html5-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeakTai%2Fvue-html5-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeakTai%2Fvue-html5-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PeakTai","download_url":"https://codeload.github.com/PeakTai/vue-html5-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222104002,"owners_count":16931736,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html5-wysiwyg-editor","vue","vue-html5-editor","wysiwyg"],"created_at":"2024-07-31T16:01:02.307Z","updated_at":"2024-10-30T03:32:01.821Z","avatar_url":"https://github.com/PeakTai.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","基于 Vue","UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Awesome Vue.js","For Vue"],"sub_categories":["Libraries \u0026 Plugins"],"readme":"# 简介 Intro \n\nVue-html5-editor是一个Vue的富文本编辑器插件，简洁灵活可扩展，适用于vue2.0以上版本，支持IE11.\n\nVue-html5-editor is an html5 wysiwyg editor for vue,easy and flexible,compatible with Vue.js 2.0+,support IE11.\n\n![screenshot](http://tai.coding.me/vue-html5-editor/editor.png?v=20160912)\n\n[点击查看演示效果 Demo is here](http://tai.coding.me/vue-html5-editor)\n\n# 安装 Installation\n\n### Npm\n\n\n```bash\nnpm install vue-html5-editor --save-dev\n```\n\n引入并安装作为全局组件\n\nimport and install as global component\n\n```js\nimport Vue from 'vue'\nimport VueHtml5Editor from 'vue-html5-editor'\nVue.use(VueHtml5Editor,options);\n```\n\n同样你也可以作为局部组件使用，方便在不同的场景里使用不同的配置.\n\n```js\nconst editor1 = new VueHtml5Editor(options1)\nconst app1 = new Vue({\n    components:{\n        editor1\n    }\n})\nconst editor2 = new VueHtml5Editor(options2)\nconst app2 = new Vue({\n    components:{\n        editor2\n    }\n})\n```\n\n\n### 浏览器直接使用 browser\n\n```html\n\u003cscript src=\"serverpath/vue.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"serverpath/vue-html5-editor.js\"\u003e\u003c/script\u003e\n```\n通过全局变量`VueHtml5Editor`来安装.\n\nInstall using global variable `VueHtml5Editor`.\n```js\nVue.use(VueHtml5Editor, options)\n```\n\n\n# 使用说明 Usage\n\n模板代码如下：\n\ntemplate code as follows:\n\n```html\n\u003cvue-html5-editor :content=\"content\" :height=\"500\"\u003e\u003c/vue-html5-editor\u003e\n```\n\n# options\n\n```js\nVue.use(VueHtml5Editor, {\n    // 全局组件名称，使用new VueHtml5Editor(options)时该选项无效 \n    // global component name\n    name: \"vue-html5-editor\",\n    // 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称\n    // if set true,will append module name to toolbar after icon\n    showModuleName: false,\n    // 自定义各个图标的class，默认使用的是font-awesome提供的图标\n    // custom icon class of built-in modules,default using font-awesome\n    icons: {\n        text: \"fa fa-pencil\",\n        color: \"fa fa-paint-brush\",\n        font: \"fa fa-font\",\n        align: \"fa fa-align-justify\",\n        list: \"fa fa-list\",\n        link: \"fa fa-chain\",\n        unlink: \"fa fa-chain-broken\",\n        tabulation: \"fa fa-table\",\n        image: \"fa fa-file-image-o\",\n        hr: \"fa fa-minus\",\n        eraser: \"fa fa-eraser\",\n        undo: \"fa-undo fa\",\n        \"full-screen\": \"fa fa-arrows-alt\",\n        info: \"fa fa-info\",\n    },\n    // 配置图片模块\n    // config image module\n    image: {\n        // 文件最大体积，单位字节  max file size\n        sizeLimit: 512 * 1024,\n        // 上传参数,默认把图片转为base64而不上传\n        // upload config,default null and convert image to base64\n        upload: {\n            url: null,\n            headers: {},\n            params: {},\n            fieldName: {}\n        },\n        // 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩\n        // compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG)\n        // set null to disable compression\n        compress: {\n            width: 1600,\n            height: 1600,\n            quality: 80\n        },\n        // 响应数据处理,最终返回图片链接\n        // handle response data，return image url\n        uploadHandler(responseText){\n            //default accept json data like  {ok:false,msg:\"unexpected\"} or {ok:true,data:\"image url\"}\n            var json = JSON.parse(responseText)\n            if (!json.ok) {\n                alert(json.msg)\n            } else {\n                return json.data\n            }\n        }\n    },\n    // 语言，内建的有英文（en-us）和中文（zh-cn）\n    //default en-us, en-us and zh-cn are built-in\n    language: \"zh-cn\",\n    // 自定义语言\n    i18n: {\n        //specify your language here\n        \"zh-cn\": {\n            \"align\": \"对齐方式\",\n            \"image\": \"图片\",\n            \"list\": \"列表\",\n            \"link\": \"链接\",\n            \"unlink\": \"去除链接\",\n            \"table\": \"表格\",\n            \"font\": \"文字\",\n            \"full screen\": \"全屏\",\n            \"text\": \"排版\",\n            \"eraser\": \"格式清除\",\n            \"info\": \"关于\",\n            \"color\": \"颜色\",\n            \"please enter a url\": \"请输入地址\",\n            \"create link\": \"创建链接\",\n            \"bold\": \"加粗\",\n            \"italic\": \"倾斜\",\n            \"underline\": \"下划线\",\n            \"strike through\": \"删除线\",\n            \"subscript\": \"上标\",\n            \"superscript\": \"下标\",\n            \"heading\": \"标题\",\n            \"font name\": \"字体\",\n            \"font size\": \"文字大小\",\n            \"left justify\": \"左对齐\",\n            \"center justify\": \"居中\",\n            \"right justify\": \"右对齐\",\n            \"ordered list\": \"有序列表\",\n            \"unordered list\": \"无序列表\",\n            \"fore color\": \"前景色\",\n            \"background color\": \"背景色\",\n            \"row count\": \"行数\",\n            \"column count\": \"列数\",\n            \"save\": \"确定\",\n            \"upload\": \"上传\",\n            \"progress\": \"进度\",\n            \"unknown\": \"未知\",\n            \"please wait\": \"请稍等\",\n            \"error\": \"错误\",\n            \"abort\": \"中断\",\n            \"reset\": \"重置\"\n        }\n    },\n    // 隐藏不想要显示出来的模块\n    // the modules you don't want\n    hiddenModules: [],\n    // 自定义要显示的模块，并控制顺序\n    // keep only the modules you want and customize the order.\n    // can be used with hiddenModules together\n    visibleModules: [\n        \"text\",\n        \"color\",\n        \"font\",\n        \"align\",\n        \"list\",\n        \"link\",\n        \"unlink\",\n        \"tabulation\",\n        \"image\",\n        \"hr\",\n        \"eraser\",\n        \"undo\",\n        \"full-screen\",\n        \"info\",\n    ],\n    // 扩展模块，具体可以参考examples或查看源码\n    // extended modules\n    modules: {\n        //omit,reference to source code of build-in modules\n    }\n})\n```\n\n# 组件属性 attributes\n\n```html\n\u003ceditor :content=\"content\" :height=\"500\" :z-index=\"1000\" :auto-height=\"true\" :show-module-name=\"false\"\u003e\u003c/editor\u003e\n```\n\n### content\n\n编辑内容\n\nThe html content to edit\n\n### height\n\n编辑器高度，如果设置了`auto-height`为true，将设置为编辑器的最小高度.\n\nThe height or min-height ( if auto-height is true ) of editor.\n\n### z-index\n\n层级，将会设置编辑器容量的`z-index`样式属性,默认为1000.\n\nSets z-index style property of editor,default 1000.\n\n### auto-height\n\n是否自动根据内容控制编辑器高度,默认为true.\n\nResize editor height automatically,default true.\n\n### show-module-name\n\n局部设置是否显示模块名称，会覆盖全局的设定.\n\nSet `showModuleName` locally.\n\n# 事件\n```html\n\u003ceditor @change=\"updateData\"\u003e\u003c/editor\u003e\n```\n\n### change\n\n每次内容有变动时触发,回传改变后的内容.\n\nEmited when the content changes,and pass the current content as event data.\n\n# License\n[Apache-2.0](http://opensource.org/licenses/Apache-2.0)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPeakTai%2Fvue-html5-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPeakTai%2Fvue-html5-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPeakTai%2Fvue-html5-editor/lists"}