{"id":13535775,"url":"https://github.com/ovenslove/vue-mdEditor","last_synced_at":"2025-04-02T02:31:29.641Z","repository":{"id":94222271,"uuid":"86129554","full_name":"ovenslove/vue-mdEditor","owner":"ovenslove","description":"基于VUE的markdown文本编辑器","archived":false,"fork":false,"pushed_at":"2021-07-23T02:16:08.000Z","size":702,"stargazers_count":486,"open_issues_count":20,"forks_count":106,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-11-03T00:32:50.830Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ovenslove.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-03-25T03:28:55.000Z","updated_at":"2024-10-20T23:26:00.000Z","dependencies_parsed_at":"2023-05-04T18:19:09.386Z","dependency_job_id":null,"html_url":"https://github.com/ovenslove/vue-mdEditor","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ovenslove%2Fvue-mdEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ovenslove%2Fvue-mdEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ovenslove%2Fvue-mdEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ovenslove%2Fvue-mdEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ovenslove","download_url":"https://codeload.github.com/ovenslove/vue-mdEditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743654,"owners_count":20826575,"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":[],"created_at":"2024-08-01T09:00:26.798Z","updated_at":"2025-04-02T02:31:29.188Z","avatar_url":"https://github.com/ovenslove.png","language":"Vue","funding_links":[],"categories":["UI组件"],"sub_categories":[],"readme":"# vue-mdeditor\n\n\u003e 基于VUE的markdown文本编辑器\n\n## 更新历史\n\n* 2017/08/08\n    * 修复组件配置属性的判定错误，感谢[Imprevia](https://github.com/Imprevia)\n* 2017/03/29\n    * 编辑器双向同步滚动功能\n    * 支持配置左上角版权标志（吃水不忘挖井人，谢过了）,\n    * 优化表格快捷输入\n    * 其他优化\n* 2017/03/27  \n    * 新增顶部窗口配置\n    * 优化参数配置可能出现的bug\n    * 优化组件传值，增加html格式的输出内容，便于用户上传\n    * 修复文档部分错误\n* 2017/03/24 \n    * 初始化项目\n    * 完成基本的功能，包括：\n        * H1-H6标题等快捷输入\n        * 编辑区域tab缩进\n        * 编译后文件预览并高亮\n        * VUE组件传值，配置输入和输出等\n\n## DEMO案例\n\u003e  我知道你想先看看效果，特意准备了在线DEMO，点进去看看吧\n\n**传送门** ======\u003e [vue-mdeditor](https://ovenslove.github.io/vue-mdEditor/)\n\n## 运行实例\n\n``` bash\n# 安装依赖\ncnpm install\n\n# 开启热更新服务器s在 localhost:4397 （4397为自定义端口，如果需要修改，请前往/config/index.js:26（port:4397）修改）\ncnpm run dev\n\n# 打包压缩项目，并输出生产模式文件\ncnpm run build\n\n# 打包压缩文件，过程带输出信息\ncnpm run build --report\n```\n## 使用方法\n\u003e 使用前必知\n\n本markdown组件采用vue-cli模式开发，适用于此类开发模式，其他模式请自行修改。\n\n\u003e 安装依赖\n```bash\n# 本组件css采用sass编写，亦可修改为css(请自行修改)，核心依赖marked组件，请务必安装，谢谢\n# markdown编译依赖 marked 地址：https://www.npmjs.com/package/marked\n# 同步滚动依赖 vue-scroll 地址：https://www.npmjs.com/package/vue-scroll\ncnpm i marked vue-scroll --save\n\ncnpm i node-sass sass-loader  --save-dev\n```\n\u003e 配置要求\n```html\n\u003c!--本组件使用font-awesome字体图标库，请于index.html提前引入--\u003e\n\u003clink href=\"//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css\" rel=\"stylesheet\"\u003e\n```\n```javascript\n// 根据项目修改引入文件的路径（所需文件放在了static目录下）\nimport Vue from 'vue'\nimport marked from 'marked'\nimport scroll from 'vue-scroll'\nVue.use(scroll)\nimport hljs from '../../static/js/highlight.min.js'\nimport range from '../../static/js/rangeFn.js'\n```\n```css\n/*根据项目修改引入文件的路径（所需文件放在了static目录下）*/\n/*引入reset文件*/\n@import \"../../static/css/reset\";\n/*引入github的markdown样式文件*/\n@import \"../../static/css/github-markdown.css\";\n/*引入atom的代码高亮样式文件*/\n@import \"../../static/css/atom-one-dark.min.css\";\n    \n```\n\n\u003e 父组件中\n\n```html\n\u003c!--编辑器组件，嵌入到任意父组件中--\u003e\n\u003cmarkdown \n:mdValuesP=\"msg\" \n:fullPageStatusP=\"false\" \n:editStatusP=\"false\" \n:previewStatusP=\"false\"\n:navStatusP=\"false\"  \n:icoStatusP=\"true\"  \n@childevent=\"childEventHandler\"\u003e\n\u003c/markdown\u003e\n\u003c!--变量后面的大写P表示是从父组件中传入的参数--\u003e\n\u003c!--:mdValuesP=\"msg\" 表示需要初始化传入编辑器的内容--\u003e\n\u003c!--:fullPageStatusP=\"false\" 加载时是否全屏（true全屏/false跟随父容器）--\u003e\n\u003c!--:editStatusP=\"false\" 加载时是否显示编辑容器（true显示/false不显示）--\u003e\n\u003c!--:previewStatusP=\"false\" 加载时是否显示预览容器（true全屏/false不显示）--\u003e\n\u003c!--:navStatusP=\"false\" 加载时是否显示顶部快速标签栏（true显示/false不显示）--\u003e\n\u003c!--:icoStatusP=\"false\" 加载时是否显示版权标志（true显示/false不显示）,如果取消掉，请勿忘挖井人，谢谢！--\u003e\n\u003c!--@childevent=\"childEventHandler\" 监听组件的$.emit()方法传回父组件的值，便于父容器保存获取--\u003e\n\n```\n```javascript\n// 引入markdown组件\nimport markdown from '../components/markdown'\nexport default {\n    name: 'index',\n    data() {\n        return {\n            msg: {\n                    mdValue:'## Vue-markdownEditor'\n                }\n            //初始化markdown编辑器的内容，通过props传入子组件\n        }\n    },\n    components: {\n        markdown // 声明mardown组件\n    },\n    methods: {\n        // 监听事件，接收子组件传过来的数据\n        childEventHandler:function(res){\n        // res会传回一个data,包含属性mdValue和htmlValue，具体含义请自行翻译\n            this.msg=res;\n        }\n    }\n}\n```\n## 效果展示\n\n![vue-mdeditor](http://static-oven.b0.upaiyun.com/github-resource/markdownEditor.png)\n\n## 后期更新\n\n1. 更多的语法支持\n2. 更丰富的API文档\n3. 更人性化的使用体验\n4. 更傻瓜式的配置方式\n\n\u003e 喜欢就关注一下吧。@_@!!!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fovenslove%2Fvue-mdEditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fovenslove%2Fvue-mdEditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fovenslove%2Fvue-mdEditor/lists"}