Browse Source

chore: remove packages/editor-for-vue

fix-react18
王福朋 4 years ago
parent
commit
cf03f08eed
  1. 3
      .gitignore
  2. 13
      build/build-all.sh
  3. 8
      build/config/common.js
  4. 1
      docs/dev.md
  5. 8
      package.json
  6. 2
      packages/core/src/config/interface.ts
  7. 22
      packages/editor-for-vue/README.md
  8. 15
      packages/editor-for-vue/__tests__/basic.test.ts.bak
  9. 29
      packages/editor-for-vue/example/App.vue
  10. 20
      packages/editor-for-vue/example/index.html
  11. 11
      packages/editor-for-vue/example/index.ts
  12. 145
      packages/editor-for-vue/example/pages/Basic.vue
  13. 64
      packages/editor-for-vue/example/pages/Simple.vue
  14. 56
      packages/editor-for-vue/package.json
  15. 34
      packages/editor-for-vue/rollup.config.js
  16. 42
      packages/editor-for-vue/rollup.example.config.js
  17. 4
      packages/editor-for-vue/shims-vue.d.ts
  18. 112
      packages/editor-for-vue/src/components/Editor.vue
  19. 43
      packages/editor-for-vue/src/components/Toolbar.vue
  20. 10
      packages/editor-for-vue/src/index.ts
  21. 20
      packages/editor-for-vue/src/utils/editor-map.ts
  22. 10
      packages/editor-for-vue/src/utils/emitter.ts
  23. 9
      packages/editor-for-vue/tsconfig.json
  24. 4
      shims-vue.d.ts
  25. 2
      tsconfig.json
  26. 10263
      yarn.lock

3
.gitignore

@ -88,9 +88,6 @@ dist
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/

13
build/build-all.sh

@ -12,36 +12,41 @@ cd ./packages
# core 要第一个打包
cd ./core
rm -rf dist # 清空 dist 目录
yarn "$buildType"
cd ../basic-modules
rm -rf dist # 清空 dist 目录
yarn "$buildType"
# code-highlight 依赖于 basic-modules 中的 code-block
cd ../code-highlight
rm -rf dist # 清空 dist 目录
yarn "$buildType"
cd ../list-module
rm -rf dist # 清空 dist 目录
yarn "$buildType"
cd ../table-module
rm -rf dist # 清空 dist 目录
yarn "$buildType"
# upload-image 依赖于 basic-modules 中的 image
cd ../upload-image-module
rm -rf dist # 清空 dist 目录
yarn "$buildType"
cd ../video-module
rm -rf dist # 清空 dist 目录
yarn "$buildType"
# editor 依赖于上述的 core + modules
cd ../editor
rm -rf dist # 清空 dist 目录
yarn "$buildType"
# react 组件依赖于 editor
cd ../editor-for-react
yarn "$buildType"
# vue 组件依赖于 editor
cd ../editor-for-vue
rm -rf dist # 清空 dist 目录
yarn "$buildType"

8
build/config/common.js

@ -11,9 +11,8 @@ import typescript from 'rollup-plugin-typescript2'
import replace from '@rollup/plugin-replace'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
// import del from 'rollup-plugin-delete'
import vuePlugin from 'rollup-plugin-vue'
export const extensions = ['.js', '.jsx', '.ts', '.tsx', '.vue']
export const extensions = ['.js', '.jsx', '.ts', '.tsx']
export default {
input: path.resolve(__dirname, './src/index.ts'),
@ -36,9 +35,6 @@ export default {
browser: true, // 重要
extensions,
}),
vuePlugin({
target: 'browser',
}),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
@ -46,5 +42,5 @@ export default {
}),
// del({ targets: 'dist/*' }),
],
external: ['react', 'react-dom', 'vue'],
external: ['react', 'react-dom'],
}

1
docs/dev.md

@ -18,7 +18,6 @@
### 运行 demo
- 进入 `packages/editor` 目录,运行 `yarn example`
- 进入 `packages/editor-for-vue` 目录,运行 `yarn example`
- 进入 `packages/editor-for-react` 目录,运行 `yarn example`
## 注意事项

8
package.json

@ -62,9 +62,6 @@
"@types/jest": "^25.2.1",
"@typescript-eslint/eslint-plugin": "^2.31.0",
"@typescript-eslint/parser": "^4.4.1",
"@vue/cli-plugin-babel": "^4.5.13",
"@vue/compiler-sfc": "^3.1.4",
"@vue/test-utils": "^1.2.2",
"autoprefixer": "^10.2.5",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.0.6",
@ -105,12 +102,9 @@
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.30.0",
"rollup-plugin-visualizer": "^5.5.0",
"rollup-plugin-vue": "^6.0.0",
"ts-jest": "^27.0.4",
"tslib": "^2.3.0",
"typescript": "4.3.2",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.6.14"
"typescript": "4.3.2"
},
"dependencies": {
"@babel/runtime": "^7.14.6"

2
packages/core/src/config/interface.ts

@ -27,7 +27,7 @@ export interface IMenuConfig {
* editor config
*/
export interface IEditorConfig {
//【注意】如增加 onXxx 回调函数时,要同步到 editor-for-vue2/vue3
//【注意】如增加 onXxx 回调函数时,要同步到 vue2/vue3 组件
customAlert: (info: string, type: AlertType) => void
onCreated?: (editor: IDomEditor) => void

22
packages/editor-for-vue/README.md

@ -1,22 +0,0 @@
# wangEditor for Vue
[wangEditor](https://www.wangeditor.com/v5/) Vue 组件。
## 使用
- Vue 2.x [文档](https://www.wangeditor.com/v5/guide/for-frame.html#vue2)
- Vue 3.x [文档](https://www.wangeditor.com/v5/guide/for-frame.html#vue3)
## 开发
先打包 packages/editor
- `cd ../editor`
- `yarn dev``yarn build`
再操作当前包
- 打包 `yarn dev``yarn build`
- 或运行 example `yarn example`
---
PS:Vue3 组件源码在[这里](https://github.com/wangeditor-team/wangEditor-for-vue3)

15
packages/editor-for-vue/__tests__/basic.test.ts.bak

@ -1,15 +0,0 @@
import { mount } from '@vue/test-utils'
import BasicEditor from '../example/pages/Basic.vue'
import SimpleEditor from '../example/pages/Simple.vue'
describe('Vue editor component', () => {
it('basic editor is a Vue instance', () => {
const editor = mount(BasicEditor)
expect(editor.vm).toBeTruthy()
})
it('simple editor is a Vue instance', () => {
const editor = mount(SimpleEditor)
expect(editor.vm).toBeTruthy()
})
})

29
packages/editor-for-vue/example/App.vue

@ -1,29 +0,0 @@
<script lang="ts">
import Vue from 'vue'
import Basic from './pages/Basic.vue'
import Simple from './pages/Simple.vue'
export default Vue.extend({
// <template>...</template> rollup template
template: `
<div style="margin: 20px;">
<div>
<button @click="pageName = '' ">clear</button>
<button @click="pageName = 'simple' ">simple page</button>
<button @click="pageName = 'basic' ">basic page</button>
</div>
<hr/>
<Basic v-if="pageName === 'basic' "/>
<Simple v-if="pageName === 'simple' "/>
</div>
`,
components: { Basic, Simple },
data() {
return {
pageName: ''
}
},
})
</script>

20
packages/editor-for-vue/example/index.html

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wangEditor vue demo</title>
<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
<!-- 引入 Vue2.x -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引用 editor js 和 css -->
<link href="./editor-dist/css/style.css" rel="stylesheet">
<script src="./editor-dist/index.js"></script>
</head>
<body>
<div id="App"></div>
</body>
</html>

11
packages/editor-for-vue/example/index.ts

@ -1,11 +0,0 @@
/**
* @description editor-for-vue example entry
* @author wangfupeng
*/
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#App')

145
packages/editor-for-vue/example/pages/Basic.vue

@ -1,145 +0,0 @@
<script lang="ts">
import Vue from 'vue'
import { getEditor, removeEditor, Editor, Toolbar } from '../../src/index'
export default Vue.extend({
// <template>...</template> rollup template
template: `
<div>
<div>
<button @click="onToggleReadOnly">toggle readOnly</button>
<button @click="onGetHtml">get html</button>
</div>
<div style="border: 1px solid #ccc; margin-top: 10px;">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editorId="editorId"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px"
:editorId="editorId"
:defaultConfig="editorConfig"
:defaultContent="defaultContent"
:mode="mode"
@onCreated="onCreated"
@onChange="onChange"
@onDestroyed="onDestroyed"
@onMaxLength="onMaxLength"
@onFocus="onFocus"
@onBlur="onBlur"
@customAlert="customAlert"
@customPaste="customPaste"
/>
</div>
<div style="border: 1px solid #ccc; margin-top: 10px;">
<pre v-html="curContentStr"></pre>
</div>
</div>
`,
components: { Editor, Toolbar },
data() {
return {
//1. editorId Toolbar Editor 2. editorId
editorId: 'w-e-1001',
toolbarConfig: {},
defaultContent: [{ type: 'paragraph', children: [{ text: 'basic demo' }] }],
editorConfig: {
placeholder: '请输入内容123...',
//
MENU_CONF: {
uploadImage: {
server: 'http://106.12.198.214:3000/api/upload-img', //
fieldName: 'vue-demo-fileName',
},
insertImage: {
checkImage(src: string, alt: string, href: string): boolean | string | undefined {
if (src.indexOf('http') !== 0) {
return '图片网址必须以 http/https 开头'
}
return true
}
}
}
},
curContent: [],
mode: 'default',
}
},
computed: {
curContentStr() {
// @ts-ignore
return JSON.stringify(this.curContent, null, 2)
},
},
mounted() {
},
methods: {
//vue React props callbacks
onCreated(editor) {
// console.log('onCreated', editor)
},
onChange(editor) {
console.log('onChange', editor.children)
this.curContent = editor.children
},
onDestroyed(editor) {
console.log('onDestroyed', editor)
},
onMaxLength(editor) {
console.log('onMaxLength', editor)
},
onFocus(editor) {
console.log('onFocus', editor)
},
onBlur(editor) {
console.log('onBlur', editor)
},
customAlert(info: string, type: string) {
window.alert(`customAlert in Vue demo\n${type}:\n${info}`)
},
customPaste(editor, event, callback) {
// console.log('paste event', event)
// editor.insertText('xxx')
// // vue return
// callback(false)
// // callback(true)
},
onToggleReadOnly() {
const editor = getEditor(this.editorId)
if (editor == null) return
if (editor.getConfig().readOnly) {
editor.enable()
} else {
editor.disable()
}
},
onGetHtml() {
const editor = getEditor(this.editorId)
if (editor == null) return
// 使 editor API
console.log(editor.getHtml())
},
},
// editor
beforeDestroy() {
const editor = getEditor(this.editorId)
if (editor == null) return
// editor
editor.destroy()
removeEditor(this.editorId)
}
})
</script>

64
packages/editor-for-vue/example/pages/Simple.vue

@ -1,64 +0,0 @@
<script lang="ts">
import Vue from 'vue'
import { getEditor, removeEditor, Editor, Toolbar } from '../../src/index'
export default Vue.extend({
// <template>...</template> rollup template
template: `
<div>
<div style="border: 1px solid #ccc; margin-top: 10px;">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editorId="editorId"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px"
:editorId="editorId"
:defaultConfig="editorConfig"
:defaultContent="defaultContent"
:mode="mode"
/>
</div>
</div>
`,
components: { Editor, Toolbar },
data() {
return {
//1. editorId Toolbar Editor 2. editorId
editorId: 'w-e-1002',
defaultContent: [
{ type: 'paragraph', children: [{ text: 'simple mode' }] },
{ type: 'paragraph', children: [{ text: '简化 toolbar 和 hoverbar' }] }
],
curContent: [],
toolbarConfig: {
//
},
editorConfig: {
placeholder: '请输入内容123...',
},
mode: 'simple',
}
},
mounted() {
},
methods: {
},
// editor
beforeDestroy() {
const editor = getEditor(this.editorId)
if (editor == null) return
// editor
editor.destroy()
removeEditor(this.editorId)
}
})
</script>

56
packages/editor-for-vue/package.json

@ -1,56 +0,0 @@
{
"name": "@wangeditor/editor-for-vue",
"version": "0.6.11",
"description": "wangEditor component for vue2.x",
"author": "wangfupeng1988 <wangfupeng1988@163.com>",
"contributors": [],
"homepage": "https://github.com/wangeditor-team/wangEditor-v5#readme",
"license": "MIT",
"types": "dist/editor-for-vue/src/index.d.ts",
"main": "dist/index.js",
"module": "dist/index.mjs",
"browser": {
"./dist/index.js": "./dist/index.js",
"./dist/index.mjs": "./dist/index.mjs"
},
"directories": {
"lib": "dist",
"test": "__tests__"
},
"files": [
"dist"
],
"publishConfig": {
"access": "public",
"registry": "https://registry.npmjs.com/"
},
"repository": {
"type": "git",
"url": "git+https://github.com/wangeditor-team/wangEditor-v5.git"
},
"scripts": {
"test": "jest",
"test-c": "jest --coverage",
"example": "cross-env NODE_ENV=development:example rollup -c rollup.example.config.js -w",
"dev": "cross-env NODE_ENV=development rollup -c rollup.config.js",
"dev-watch": "cross-env NODE_ENV=development rollup -c rollup.config.js -w",
"build": "cross-env NODE_ENV=production rollup -c rollup.config.js",
"dev-size-stats": "cross-env NODE_ENV=development:size_stats rollup -c rollup.config.js",
"size-stats": "cross-env NODE_ENV=production:size_stats rollup -c rollup.config.js"
},
"bugs": {
"url": "https://github.com/wangeditor-team/wangEditor-v5/issues"
},
"peerDependencies": {
"@wangeditor/core": "^0.7.1",
"@wangeditor/editor": "^0.9.0",
"vue": "^2.6.14"
},
"devDependencies": {
"@types/event-emitter": "^0.3.3",
"@types/vue": "^2.0.0"
},
"dependencies": {
"event-emitter": "^0.3.5"
}
}

34
packages/editor-for-vue/rollup.config.js

@ -1,34 +0,0 @@
import path from 'path'
import { createRollupConfig, IS_PRD } from '../../build/create-rollup-config'
import pkg from './package.json'
const name = 'WangEditorForVue'
const input = path.resolve(__dirname, './src', 'index.ts')
const configList = []
// umd - 开发环境需要 CDN 引入方式来测试,所以优先输出 umd
const umdConf = createRollupConfig({
input,
output: {
file: pkg.main,
format: 'umd',
name,
},
})
configList.push(umdConf)
if (IS_PRD) {
// esm
const esmConf = createRollupConfig({
input,
output: {
file: pkg.module,
format: 'esm',
name,
},
})
configList.push(esmConf)
}
export default configList

42
packages/editor-for-vue/rollup.example.config.js

@ -1,42 +0,0 @@
import path from 'path'
import htmlTemplate from 'rollup-plugin-generate-html-template'
import serve from 'rollup-plugin-serve'
import copy from 'rollup-plugin-copy'
import del from 'rollup-plugin-delete'
import { createRollupConfig } from '../../build/create-rollup-config'
// 继续生成 rollup config
const name = 'WangEditorForVue'
const input = path.resolve(__dirname, './example', 'index.ts')
const file = 'dist-example/index.js'
const port = 8883
const config = createRollupConfig({
input,
output: {
file,
format: 'umd',
name,
},
plugins: [
serve({
// open: true,
contentBase: ['dist-example'],
port,
onListening: function () {
console.log(`Example is running on http://localhost:${port}/`)
},
}),
htmlTemplate({
template: 'example/index.html',
target: 'dist-example/index.html',
}),
del({ targets: 'dist-example/*' }),
copy({
// 将 packages/editor/dist 拷贝到 dist-example
targets: [{ src: '../editor/dist/*', dest: 'dist-example/editor-dist' }],
}),
],
})
export default config

4
packages/editor-for-vue/shims-vue.d.ts

@ -1,4 +0,0 @@
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}

112
packages/editor-for-vue/src/components/Editor.vue

@ -1,112 +0,0 @@
<script lang="ts">
import Vue from 'vue'
import * as wangEditor from '@wangeditor/editor'
import emitter from '../utils/emitter'
import { recordEditor } from '../utils/editor-map'
function genErrorInfo(fnName: string): string {
let info = `请使用 '@${fnName}' 事件,不要放在 props 中`
info += `\nPlease use '@${fnName}' event instead of props`
return info
}
export default Vue.extend({
// <template>...</template> rollup render
render: function (h) {
return h('div', { ref: 'box' })
},
name: 'Editor',
props: ['editorId', 'defaultContent', 'defaultConfig', 'mode'],
created() {
if (this.editorId == null) {
throw new Error('Need `editorId` props when create <Editor/> component')
}
},
mounted() {
this.create()
},
methods: {
create() {
if (this.$refs.box == null) return
const defaultConfig = this.defaultConfig || {}
wangEditor.createEditor({
selector: this.$refs.box as Element,
config: {
...defaultConfig,
onCreated: (editor) => {
// editor
recordEditor(this.editorId, editor)
// toolbar
emitter.emit(`w-e-created-${this.editorId}`)
this.$emit('onCreated', editor)
if (defaultConfig.onCreated) {
const info = genErrorInfo('onCreated')
throw new Error(info)
}
},
onChange: (editor) => {
this.$emit('onChange', editor)
if (defaultConfig.onChange) {
const info = genErrorInfo('onChange')
throw new Error(info)
}
},
onDestroyed: (editor) => {
this.$emit('onDestroyed', editor)
if (defaultConfig.onDestroyed) {
const info = genErrorInfo('onDestroyed')
throw new Error(info)
}
},
onMaxLength: (editor) => {
this.$emit('onMaxLength', editor)
if (defaultConfig.onMaxLength) {
const info = genErrorInfo('onMaxLength')
throw new Error(info)
}
},
onFocus: (editor) => {
this.$emit('onFocus', editor)
if (defaultConfig.onFocus) {
const info = genErrorInfo('onFocus')
throw new Error(info)
}
},
onBlur: (editor) => {
this.$emit('onBlur', editor)
if (defaultConfig.onBlur) {
const info = genErrorInfo('onBlur')
throw new Error(info)
}
},
customAlert: (info, type) => {
this.$emit('customAlert', info, type)
if (defaultConfig.customAlert) {
const info = genErrorInfo('customAlert')
throw new Error(info)
}
},
customPaste: (editor, event) => {
if (defaultConfig.customPaste) {
const info = genErrorInfo('customPaste')
throw new Error(info)
}
let res
this.$emit('customPaste', editor, event, val => {
res = val
})
return res
},
},
content: this.defaultContent || [],
mode: this.mode || 'default',
})
}
}
})
</script>

43
packages/editor-for-vue/src/components/Toolbar.vue

@ -1,43 +0,0 @@
<script lang="ts">
import Vue from 'vue'
import * as wangEditor from '@wangeditor/editor'
import emitter from '../utils/emitter'
import { getEditor } from '../utils/editor-map'
export default Vue.extend({
// <template>...</template> rollup render
render: function (h) {
return h('div', { ref: 'box' })
},
name: 'Toolbar',
props: ['editorId', 'defaultConfig', 'mode'],
created() {
if (this.editorId == null) {
throw new Error('Need `editorId` props when create <Editor/> component')
}
// editor toolbar
emitter.on(`w-e-created-${this.editorId}`, this.create)
},
methods: {
// toolbar
create() {
if (this.$refs.box == null) return
const editor = getEditor(this.editorId)
if (editor == null) return
wangEditor.createToolbar({
editor,
selector: this.$refs.box as Element,
config: this.defaultConfig || {},
mode: this.mode || 'default',
})
}
},
beforeDestroy() {
// off
emitter.off(`w-e-created-${this.editorId}`, this.create)
},
})
</script>

10
packages/editor-for-vue/src/index.ts

@ -1,10 +0,0 @@
/**
* @description editor-for-vue entry
* @author wangfupeng
*/
import Editor from './components/Editor.vue'
import Toolbar from './components/Toolbar.vue'
import { getEditor, removeEditor } from './utils/editor-map'
export { Editor, Toolbar, getEditor, removeEditor }

20
packages/editor-for-vue/src/utils/editor-map.ts

@ -1,20 +0,0 @@
/**
* @description editorId editor
* @author wangfupeng
*/
import { IDomEditor } from '@wangeditor/editor'
const EDITOR_MAP: { [key: string]: IDomEditor } = {}
export function recordEditor(editorId: string, editor: IDomEditor) {
EDITOR_MAP[editorId] = editor
}
export function getEditor(editorId: string): IDomEditor | null {
return EDITOR_MAP[editorId] || null
}
export function removeEditor(editorId: string) {
delete EDITOR_MAP[editorId]
}

10
packages/editor-for-vue/src/utils/emitter.ts

@ -1,10 +0,0 @@
/**
* @description event emitter
* @author wangfupeng
*/
import ee from 'event-emitter'
const emitter = ee()
export default emitter

9
packages/editor-for-vue/tsconfig.json

@ -1,9 +0,0 @@
{
"extends": "../../tsconfig.json",
"include": [
"./src/**/*",
"./examples/**/*",
"./shims-vue.d.ts",
"../custom-types.d.ts"
]
}

4
shims-vue.d.ts

@ -1,4 +0,0 @@
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}

2
tsconfig.json

@ -26,5 +26,5 @@
"build",
"__tests__"
],
"include": ["./tests/setup/index.ts", "./shims-vue.d.ts"]
"include": ["./tests/setup/index.ts"]
}

10263
yarn.lock
File diff suppressed because it is too large
View File

Loading…
Cancel
Save