{"id":19643514,"url":"https://github.com/panhezeng/vue-tinymce","last_synced_at":"2025-04-28T13:30:53.702Z","repository":{"id":32433588,"uuid":"133344137","full_name":"panhezeng/vue-tinymce","owner":"panhezeng","description":"vue-tinymce","archived":false,"fork":false,"pushed_at":"2024-12-10T22:17:37.000Z","size":3610,"stargazers_count":14,"open_issues_count":6,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-23T23:06:52.326Z","etag":null,"topics":["rich-text-editor","tinymce","vue-tinymce","vuejs"],"latest_commit_sha":null,"homepage":"https://github.com/panhezeng/vue-tinymce","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/panhezeng.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-14T10:26:48.000Z","updated_at":"2025-04-09T10:12:55.000Z","dependencies_parsed_at":"2024-04-01T06:30:13.827Z","dependency_job_id":"10d57e06-1cbd-4676-bd40-7f89443025a4","html_url":"https://github.com/panhezeng/vue-tinymce","commit_stats":{"total_commits":120,"total_committers":2,"mean_commits":60.0,"dds":"0.23333333333333328","last_synced_commit":"55d9ffc5d82a7cf92d1c8d06b27c3e5a90674f86"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panhezeng%2Fvue-tinymce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panhezeng%2Fvue-tinymce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panhezeng%2Fvue-tinymce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panhezeng%2Fvue-tinymce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/panhezeng","download_url":"https://codeload.github.com/panhezeng/vue-tinymce/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251319747,"owners_count":21570450,"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":["rich-text-editor","tinymce","vue-tinymce","vuejs"],"created_at":"2024-11-11T14:22:14.772Z","updated_at":"2025-04-28T13:30:52.424Z","avatar_url":"https://github.com/panhezeng.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-tinymce\n\n## 示例\n\n[点击预览](https://panhezeng.github.io/vue-tinymce/)\n\n组件代码目录 packages/component\n示例代码目录 packages/example\n\n## 说明\n```\nprops: {\n    // 父组件通过 v-model 同步富文本编辑器内容\n    modelValue: {\n      type: String,\n      required: true,\n    },\n    // 触发 v-model 同步更新的 tinymce Editor Events，其他 https://www.tiny.cloud/docs/advanced/events/\n    updateEvent: {\n      type: String,\n      default: 'beforeaddundo undo redo keyup focusout',\n    },\n    // tinymce依赖文件的cdn url\n    url: {\n      type: String,\n      default: 'https://unpkg.com/tinymce@%5E6.0.1',\n    },\n    // tinymce 依赖文件的cdn base url\n    baseUrl: {\n      type: String,\n      default: 'https://unpkg.com',\n    },\n    // tinymce的init方法的config参数，本组件有默认设置，比如不要toolbar3，可以使用该组件时写上 :config=\"{toolbar2:''}\"\n    config: {\n      type: Object as PropType\u003cRawEditorOptions\u003e,\n      default() {\n        return {};\n      },\n    },\n  }\n```\n\n**默认 cdn 改为 unpkg 了，jsdelivr 被墙了，注意 unpkg 不支持 combine js**\n**可以把tinymce相关文件都拷贝到本地 public 目录，然后把 url 改为项目 public url**\n本地示例\n```\npublic/static/tinymce\npublic/static/tinymce-external-plugins\npublic/static/tinymce-external-plugins/textindentoutdent\npublic/static/tinymce-external-plugins/textindentoutdent/langs\npublic/static/tinymce-external-plugins/textindentoutdent/plugin.min.js\npublic/static/tinymce-langs\npublic/static/tinymce-langs/zh_CN.js\n\nprops:{\n  url: {\n    type: String,\n    default: '/static/tinymce',\n  },\n}\n\nconst tinymceConfig: RawEditorOptions = {\n    language: 'zh_CN',\n    language_url: '/static/tinymce-langs/zh_CN.js',\n    external_plugins: {\n      textindentoutdentzhcn:\n        '/static/tinymce-external-plugins/textindentoutdent/langs/zh_CN.js',\n      textindentoutdent:\n        '/static/tinymce-external-plugins/textindentoutdent/plugin.min.js',\n    },\n  };  \n```\n\n\n本打算将原项目个人封装的 TinyMCE Vue 组件替换为官方 TinyMCE Vue 组件，尝试后发现官方组件严重依赖 TinyMCE Cloud，否则不好用。\n\n本组件默认配置的 toolbar 属性值，依据微信公众号后台富文本编辑器布局配置。\n\n本组件只是简单封装，没有多余功能，默认语言中文 language: 'zh_CN'。\n\n使用本组件的优势，相对于官方 TinyMCE Vue 组件来说：不用在项目中 import TinyMCE 的模板和插件 js，通过https://cdn.jsdelivr.net/npm/tinymce@~7  https://unpkg.com/tinymce@%5E7.3.0 实现了同步版本资源，默认中文配置，自动销毁等。\n\nsetup 和 init_instance_callback 的区别，虽然两个 API 都能获得 TinyMCE 实例，但前者是实例刚创建时的回调，后者是实例初始化完成时的回调，init_instance_callback 获得的实例才能使用 setContent 等 API。\n\n**现在本组件基于 TinyMCE ~7 版本，TinyMCE 依赖的 js 和 css 也是 ~7 版本，依赖已锁定为 tinymce ~7，不会出现 tinymce 大版本升级造成本组件无法运行的问题。本组件也没有太复杂的东西，放心使用，如果有需求，可以 fork 修改。**\n\n**之前基于 TinyMCE ~4 版本的版本已经不能使用，请先`npm uninstall vue-tinymce tinymce`，重新 `npm install vue-tinymce tinymce`，并且清除浏览器缓存。**\n\n## 用法\n\n### internal vue 方式\n\n`npm i vue tinymce @panhezeng/vue-tinymce -S`\n\n#### 异步\n\n```vue\n\u003cscript\u003e\nimport { defineAsyncComponent } from \"vue\";\nconst VueTinymce = defineAsyncComponent(() =\u003e import(\"@panhezeng/vue-tinymce\"));\n\nexport default {\n  components: { VueTinymce },\n};\n\u003c/script\u003e\n```\n\n#### 同步\n\n```vue\n\u003cscript\u003e\nimport VueTinymce from \"@panhezeng/vue-tinymce\";\nexport default {\n  components: { VueTinymce },\n};\n\u003c/script\u003e\n```\n\n### external vue 方式\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/combine/npm/vue@~3/dist/vue.global.min.js,npm/tinymce@~7/tinymce.min.js,npm/@panhezeng/vue-tinymce@~3/dist/vue-tinymce.umd.js\"\u003e\u003c/script\u003e\n\nexport default { components: { VueTinymce: window.VueTinymce }, };\n```\n\n### 全局安装方式\n\n```js\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport VueTinymce from \"@panhezeng/vue-tinymce\";\nconst app = createApp(App);\napp.use(VueTinymce);\napp.mount(\"#app\");\n```\n\n## IDE\n\n### WebStorm\n\n搜索 ESLint , 勾选 Automatic ESLint 和 Run eslint -- fix on save\n\nLanguages and Frameworks | JavaScript ，选择 Flow\nLanguages and Frameworks | TypeScript ，service 取消勾选\n\nlerna 使用\n\n```\nlerna init\nlerna create packagename\n```\n\nlerna.json\n\n```\n  \"version\": \"independent\",  // 不同模块不同版本\n  \"npmClient\": \"yarn\",  // 指定 npmClent 为 yarn\n```\n\n顶层的 package.json\n\n```\n\"workspaces\":[\n        \"packages/*\"\n        ]\n```\n\n```\nlerna exec --scope packagename\n\nyarn add packageaname -w=packagebname\n\n```\n\n## 发版\n\n`lerna version`\n\n## 环境\n\n[构建加速](https://help.aliyun.com/document_detail/202442.html)\n\n- 重置前端依赖环境，cd 到项目目录，删除前端依赖相关文件\n\n  ```shell\n  rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml\n  ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpanhezeng%2Fvue-tinymce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpanhezeng%2Fvue-tinymce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpanhezeng%2Fvue-tinymce/lists"}