{"id":20139231,"url":"https://github.com/lpreterite/vue-tinymce","last_synced_at":"2025-04-05T18:05:51.912Z","repository":{"id":45722602,"uuid":"51688772","full_name":"lpreterite/vue-tinymce","owner":"lpreterite","description":"提供给 vue 开发者使用的 TinyMCE 组件","archived":false,"fork":false,"pushed_at":"2024-05-01T20:18:08.000Z","size":2811,"stargazers_count":183,"open_issues_count":13,"forks_count":31,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-29T17:03:13.124Z","etag":null,"topics":["editor","tinymce","vue","vue-component"],"latest_commit_sha":null,"homepage":"http://lpreterite.github.io/vue-tinymce/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lpreterite.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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-02-14T09:40:56.000Z","updated_at":"2024-11-07T07:02:43.000Z","dependencies_parsed_at":"2024-05-01T21:44:36.584Z","dependency_job_id":"d69fb898-42c4-456d-bad8-974970e4be5a","html_url":"https://github.com/lpreterite/vue-tinymce","commit_stats":{"total_commits":74,"total_committers":4,"mean_commits":18.5,"dds":0.05405405405405406,"last_synced_commit":"f155f9c1c9264b23316ec535098e01328b804cc7"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lpreterite%2Fvue-tinymce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lpreterite%2Fvue-tinymce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lpreterite%2Fvue-tinymce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lpreterite%2Fvue-tinymce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lpreterite","download_url":"https://codeload.github.com/lpreterite/vue-tinymce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378140,"owners_count":20929296,"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":["editor","tinymce","vue","vue-component"],"created_at":"2024-11-13T21:44:30.630Z","updated_at":"2025-04-05T18:05:51.856Z","avatar_url":"https://github.com/lpreterite.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![vue-tinymce](docs/assets/vu-tinymce-logo.png)\n\n# vue-tinymce\n\n[![npm version](https://img.shields.io/npm/v/@packy-tang/vue-tinymce.svg)](https://www.npmjs.com/package/@packy-tang/vue-tinymce)\n![vue](https://img.shields.io/npm/dependency-version/@packy-tang/vue-tinymce/peer/vue)\n![tinymce](https://img.shields.io/npm/dependency-version/@packy-tang/vue-tinymce/peer/tinymce)\n[![NPM downloads](http://img.shields.io/npm/dm/@packy-tang/vue-tinymce.svg)](https://www.npmjs.com/package/@packy-tang/vue-tinymce)\n\n提供给 vue 开发者使用的 TinyMCE 组件\n\n## 目的\n\n为开发人员简单使用 TinyMCE 的 Vue 组件。提供非常简单易懂的源代码提供给开发人员作为参考，当然你也可以直接使用这个组件到你的项目。发现问题可以提到 issue，期望你的反馈 👏。\n\n## 如何使用\n\n### 安装组件\n\n```sh\nyarn add @packy-tang/vue-tinymce\n# or\nnpm install @packy-tang/vue-tinymce\n```\n\n### 引入\n\n```html\n\u003ctemplate\u003e\n    \u003c!-- 全局引入TinyMCE --\u003e\n    \u003cscript src=\"//unpkg.com/tinymce@5.1.5/tinymce.min.js\"\u003e\u003c/script\u003e\n    \u003c!-- App --\u003e\n    \u003cdiv id=\"app\"\u003e\n        \u003cvue-tinymce\n            v-model=\"content\"\n            :setup=\"setup\"\n            :setting=\"setting\" /\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n    import Vue from \"vue\"\n    import VueTinymce from \"@packy-tang/vue-tinymce\"\n\n    //安装组件\n    Vue.use(VueTinymce)\n\n    new Vue({\n        el: \"#app\",\n        data: function() {\n            return {\n                content: \"\u003cp\u003ehtml content\u003c/p\u003e\",\n                setting: {\n                    height: 500\n                }\n            }\n        },\n        methods: {\n            setup(editor) {\n                console.log(editor)\n            }\n        }\n    })\n\u003c/script\u003e\n```\n\n### 其他使用例子\n\n- vue-cli使用例子：[传送门](https://github.com/lpreterite/vue-tinymce-example/tree/master/vue)\n- webpack使用例子：传送门(待补上)\n\n## 属性\n\n| 名称       | 描述                                                  |\n| ---------- | ----------------------------------------------------- |\n| `:content`   | 类型`String`，作为文本内容传入编辑器，可以使用`v-model`实现双向绑定 |\n| `@change`   | 类型`Function`，编辑器中`Input` `Change` `Undo` `Redo` `ExecCommand` `KeyUp` `NodeChange`事件响应后触发的事件返回文本内容                  |\n| `:setting` | 类型`Object`，编辑器的设置，`setup`不建议在这设置     |\n|`:setup`| 类型`Function`, 常用与自定义编辑器处理，组件内部做了些处理，建议在这里添加自定义的代码 |\n\n### 更多使用细节\n\n想了解更多内容请移步至[使用细节](http://lpreterite.github.io/vue-tinymce/#/Example)\n\n\n## 本地调试\n\n```sh\n# 运行本地例子\n$ npm run serve \n# 构建\n$ npm run build\n# 发布版本\n$ npm run release\n```\n\n## 构建支持\n\n本仓库由[sao-esm](https://github.com/lpreterite/sao-esm)作为模板构建。\n\n## License\n\nCopyright (c) packy-tang lpreterite@126.com\n\n根据[MIT协议](./LICENSE)的开源软件.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flpreterite%2Fvue-tinymce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flpreterite%2Fvue-tinymce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flpreterite%2Fvue-tinymce/lists"}