├── .github
    └── workflows
    │   ├── build.yml
    │   └── npm-publish.yml
├── .gitignore
├── .npmignore
├── .release-it.js
├── .vscode
    └── settings.json
├── DEV.md
├── README-en.md
├── README.md
├── babel.config.json
├── build
    ├── config
    │   ├── common.js
    │   ├── dev.js
    │   └── prd.js
    └── create-rollup-config.js
├── example
    ├── App.vue
    ├── index.html
    ├── index.ts
    └── pages
    │   ├── Basic.vue
    │   ├── Simple.vue
    │   └── VModelHTML.vue
├── package.json
├── rollup.config.js
├── rollup.example.config.js
├── shims-vue.d.ts
├── src
    ├── components
    │   ├── Editor.vue
    │   └── Toolbar.vue
    └── index.ts
├── tsconfig.json
└── yarn.lock


/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: build project
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - 'main'
 7 |       - 'master'
 8 |       - 'dev'
 9 |       - 'feature-*'
10 |       - 'fix-*'
11 |       - 'hotfix-*'
12 |       - 'refactor-*'
13 | 
14 | jobs:
15 |   build:
16 |     runs-on: ubuntu-latest
17 |     steps:
18 |       - uses: actions/checkout@v2
19 |       - uses: actions/setup-node@v1
20 |         with:
21 |           node-version: 14
22 |           registry-url: https://registry.npmjs.org/
23 |       - run: yarn
24 |       - run: yarn --version
25 |       - run: node --version
26 |       # - run: yarn test
27 |       - run: yarn build
28 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | name: publish npm Package
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - 'v*.*.*'
 7 | 
 8 | jobs:
 9 |   publish-npm:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - uses: actions/checkout@v2
13 |       - uses: actions/setup-node@v1
14 |         with:
15 |           node-version: 12
16 |           registry-url: https://registry.npmjs.org/
17 |       - run: yarn
18 |       # - run: yarn test
19 |       - run: yarn build
20 |       - run: npm publish --access=public
21 |         env:
22 |           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | node_modules/
3 | dist-example/
4 | stats.html


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .github/
 2 | .vscode
 3 | build/
 4 | doc/
 5 | docs/
 6 | example/
 7 | __tests__/
 8 | .release-it.js
 9 | index.html
10 | tsconfig.json
11 | src/


--------------------------------------------------------------------------------
/.release-it.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   git: {
 3 |     tagName: 'v${version}',
 4 |     commitMessage: 'release: v${version}',
 5 |     requireCleanWorkingDir: false,
 6 |     requireBranch: 'main',
 7 |   },
 8 |   hooks: {
 9 |     'before:init': ['git pull origin main'],
10 |   },
11 |   npm: {
12 |     publish: false,
13 |   },
14 |   prompt: {
15 |     ghRelease: false,
16 |     glRelease: false,
17 |     publish: false,
18 |   },
19 | };
20 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "cSpell.words": [
3 |         "rollup",
4 |         "wangeditor",
5 |         "wangfupeng"
6 |     ]
7 | }


--------------------------------------------------------------------------------
/DEV.md:
--------------------------------------------------------------------------------
 1 | # 开发文档
 2 | 
 3 | ## 目录结构
 4 | 
 5 | ```bash
 6 | ├── __test__ # 测试文件
 7 | ├── build # 构建工具配置文件
 8 | ├── example # dev环境下的example
 9 | ├── rollup.config.js # rollup打包主入口文件
10 | ├── rollup.example.config.js # example运行配置文件
11 | └── src
12 |     ├── components
13 |     │ ├── Editor.vue
14 |     │ └── Toolbar.vue
15 |     ├── utils
16 |     └── index.ts
17 | ```
18 | 
19 | ## dev 本地开发
20 | 
21 | `yarn dev` 启动本地服务，使用 src/App.vue 文件
22 | 
23 | `yarn test` 单元测试，使用 test 目录
24 | 
25 | ## build 构建
26 | 
27 | `yarn build` 构建代码，使用 src 目录。
28 | 
29 | ## release 发布
30 | 
31 | `yarn release` 可触发 github actions 并发布 npm
32 | 


--------------------------------------------------------------------------------
/README-en.md:
--------------------------------------------------------------------------------
 1 | # wangEditor for Vue
 2 | 
 3 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/main/LICENSE) [![npm](https://img.shields.io/npm/v/@wangeditor/editor-for-vue.svg)](https://www.npmjs.com/package/@wangeditor/editor-for-vue/v/next) [![build status](https://github.com/wangeditor-team/wangEditor-for-vue/actions/workflows/npm-publish.yml/badge.svg?branch=main)](https://github.com/wangeditor-team/wangEditor-for-vue/actions)
 4 | 
 5 | [中文文档](./README.md)
 6 | 
 7 | ## Introduction
 8 | 
 9 | An out-of-the-box [Vue2 component](https://www.wangeditor.com/v5/for-frame.html#vue2)
10 | based on the [wangEditor 5](https://www.wangeditor.com/v5/for-frame.html#vue2)
11 | 
12 | ## Installation
13 | 
14 | ```shell
15 | yarn add @wangeditor/editor
16 | yarn add @wangeditor/editor-for-vue
17 | ```
18 | 
19 | ## Usage
20 | 
21 | [Usage doc](https://www.wangeditor.com/en/v5/for-frame.html#vue2)
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # wangEditor for Vue
 2 | 
 3 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/main/LICENSE) [![npm](https://img.shields.io/npm/v/@wangeditor/editor-for-vue.svg)](https://www.npmjs.com/package/@wangeditor/editor-for-vue/v/next) [![build status](https://github.com/wangeditor-team/wangEditor-for-vue/actions/workflows/npm-publish.yml/badge.svg?branch=main)](https://github.com/wangeditor-team/wangEditor-for-vue/actions)
 4 | 
 5 | [English documentation](./README-en.md)
 6 | 
 7 | ## 介绍
 8 | 
 9 | 基于 [wangEditor](https://www.wangeditor.com/) 封装的开箱即用的 [Vue2 组件](https://www.wangeditor.com/v5/for-frame.html#vue2)
10 | 
11 | ## 安装
12 | 
13 | ```shell
14 | yarn add @wangeditor/editor
15 | yarn add @wangeditor/editor-for-vue
16 | ```
17 | 
18 | ## 使用
19 | 
20 | 参考[文档](https://www.wangeditor.com/v5/for-frame.html#vue2)
21 | 


--------------------------------------------------------------------------------
/babel.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "@babel/preset-env",
 5 |       {
 6 |         "modules": false,
 7 |         "useBuiltIns": "usage",
 8 |         "corejs": 3,
 9 |         "targets": "ie 11"
10 |       }
11 |     ]
12 |   ],
13 |   "plugins": [
14 |     [
15 |       "@babel/plugin-transform-runtime",
16 |       {
17 |         "absoluteRuntime": false,
18 |         "corejs": 3,
19 |         "helpers": true,
20 |         "regenerator": true,
21 |         "useESModules": false
22 |       }
23 |     ]
24 |   ]
25 | }


--------------------------------------------------------------------------------
/build/config/common.js:
--------------------------------------------------------------------------------
 1 | import path from 'path';
 2 | import commonjs from '@rollup/plugin-commonjs';
 3 | import json from '@rollup/plugin-json';
 4 | import nodeResolve from '@rollup/plugin-node-resolve';
 5 | import typescript from 'rollup-plugin-typescript2';
 6 | import replace from '@rollup/plugin-replace';
 7 | import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 8 | import vuePlugin from 'rollup-plugin-vue';
 9 | 
10 | export const extensions = ['.js', '.jsx', '.ts', '.tsx', '.vue'];
11 | 
12 | export default {
13 |   input: path.resolve(__dirname, './src/index.ts'),
14 |   output: {
15 |     globals: {
16 |       vue: 'Vue',
17 |     },
18 |   },
19 |   plugins: [
20 |     peerDepsExternal(), // 打包结果不包含 package.json 的 peerDependencies
21 |     json({
22 |       compact: true,
23 |       indent: '  ',
24 |       preferConst: true,
25 |     }),
26 |     typescript({
27 |       clean: true,
28 |       tsconfig: path.resolve(__dirname, './tsconfig.json'),
29 |     }),
30 |     nodeResolve({
31 |       browser: true, // 重要
32 |       extensions,
33 |     }),
34 |     vuePlugin({
35 |       target: 'browser',
36 |     }),
37 |     commonjs(),
38 |     replace({
39 |       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
40 |       preventAssignment: true,
41 |     }),
42 |     // del({ targets: 'dist/*' }),
43 |   ],
44 | };
45 | 


--------------------------------------------------------------------------------
/build/config/dev.js:
--------------------------------------------------------------------------------
 1 | import postcss from 'rollup-plugin-postcss'
 2 | import autoprefixer from 'autoprefixer'
 3 | import commonConfig from './common'
 4 | 
 5 | const { output, input, plugins = [], external } = commonConfig
 6 | 
 7 | export default {
 8 |   input,
 9 |   output,
10 |   external,
11 |   plugins: [
12 |     ...plugins,
13 |     postcss({
14 |       plugins: [autoprefixer()],
15 |       extract: 'css/style.css',
16 |     }),
17 |   ],
18 | }
19 | 


--------------------------------------------------------------------------------
/build/config/prd.js:
--------------------------------------------------------------------------------
 1 | import babel from '@rollup/plugin-babel';
 2 | import postcss from 'rollup-plugin-postcss';
 3 | import autoprefixer from 'autoprefixer';
 4 | import cssnano from 'cssnano';
 5 | import { terser } from 'rollup-plugin-terser';
 6 | import cleanup from 'rollup-plugin-cleanup';
 7 | import commonConfig from './common';
 8 | import { extensions } from './common';
 9 | 
10 | const { input, output = {}, plugins = [] } = commonConfig;
11 | 
12 | const finalPlugins = [
13 |   ...plugins,
14 |   // babel({
15 |   //   babelHelpers: 'runtime',
16 |   //   exclude: 'node_modules/**',
17 |   //   include: 'src/**',
18 |   //   extensions,
19 |   // }),
20 |   postcss({
21 |     plugins: [
22 |       autoprefixer(),
23 |       cssnano(), // 压缩 css
24 |     ],
25 |     extract: 'css/style.css',
26 |   }),
27 |   cleanup({
28 |     comments: 'none',
29 |     extensions: ['.ts', '.tsx'],
30 |   }),
31 |   terser(), // 压缩 js
32 | ];
33 | 
34 | export default {
35 |   input,
36 |   output: {
37 |     sourcemap: true,
38 | 
39 |     ...output,
40 |   },
41 |   external: ['vue', '@wangeditor/editor'],
42 |   plugins: finalPlugins,
43 | };
44 | 


--------------------------------------------------------------------------------
/build/create-rollup-config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @description 创建 rollup 配置
 3 |  * @author wangfupeng
 4 |  */
 5 | 
 6 | import { merge } from 'lodash'
 7 | import { visualizer } from 'rollup-plugin-visualizer'
 8 | import devConf from './config/dev'
 9 | import prdConf from './config/prd'
10 | 
11 | // 环境变量
12 | const ENV = process.env.NODE_ENV || 'production'
13 | const IS_SIZE_STATS = ENV.indexOf('size_stats') >= 0 // 分析包体积
14 | export const IS_DEV = ENV.indexOf('development') >= 0
15 | export const IS_PRD = ENV.indexOf('production') >= 0
16 | 
17 | /**
18 |  * 生成单个 rollup 配置
19 |  * @param {object} customConfig { input, output, plugins ... }
20 |  */
21 | export function createRollupConfig(customConfig = {}) {
22 |   const { input, output = {}, plugins = [] } = customConfig
23 | 
24 |   let baseConfig
25 |   if (IS_PRD) {
26 |     baseConfig = prdConf
27 |   } else {
28 |     baseConfig = devConf
29 |   }
30 | 
31 |   if (IS_SIZE_STATS) {
32 |     // 分析包体积。运行之后可查看 package 下的 `stats.html`
33 |     plugins.push(visualizer())
34 |   }
35 | 
36 |   const config = {
37 |     input: input ? input : baseConfig.input,
38 |     output,
39 |     plugins,
40 |   }
41 | 
42 |   const res = merge({}, baseConfig, config)
43 |   return res
44 | }
45 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import Vue from 'vue'
 3 | import Basic from './pages/Basic.vue'
 4 | import Simple from './pages/Simple.vue'
 5 | import VModelHTML from './pages/VModelHTML.vue'
 6 | 
 7 | export default Vue.extend({
 8 |   //【注意】单独写 <template>...</template> 时，rollup 打包完浏览器运行时报错，所以先在这里写 template
 9 |   template: `
10 |     <div style="margin: 20px;">
11 |       <div>
12 |         <button @click="pageName = '' ">clear</button>
13 |         <button @click="pageName = 'simple' ">simple page</button>
14 |         <button @click="pageName = 'basic' ">basic page</button>
15 |         <button @click="pageName = 'VModelHTML' ">v-model HTML</button>
16 |       </div>
17 |       <hr/>
18 | 
19 |       <Basic v-if="pageName === 'basic' "/>
20 |       <Simple v-if="pageName === 'simple' "/>
21 |       <VModelHTML v-if="pageName === 'VModelHTML'"/>
22 |     </div>
23 |   `,
24 | 
25 |   components: { Basic, Simple, VModelHTML },
26 |   data() {
27 |     return {
28 |       pageName: ''
29 |     }
30 |   },
31 | })
32 | </script>


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>wangEditor vue demo</title>
 8 |     <link
 9 |       href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css"
10 |       rel="stylesheet"
11 |     />
12 | 
13 |     <!-- 引入 Vue2.x -->
14 |     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
15 | 
16 |     <!-- 引用 editor js 和 css -->
17 |     <link
18 |       href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css"
19 |       rel="stylesheet"
20 |     />
21 |     <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.js"></script>
22 |     <script>
23 |       window.editor = window.wangEditor;
24 |       console.log(window, window.editor);
25 |     </script>
26 |   </head>
27 |   <body>
28 |     <div id="App"></div>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/example/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @description editor-for-vue example entry
 3 |  * @author wangfupeng
 4 |  */
 5 | 
 6 | import Vue from 'vue'
 7 | import App from './App.vue'
 8 | 
 9 | new Vue({
10 |   render: h => h(App),
11 | }).$mount('#App')
12 | 


--------------------------------------------------------------------------------
/example/pages/Basic.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | import { IDomEditor } from '@wangeditor/editor';
  3 | import Vue from 'vue';
  4 | import { Editor, Toolbar } from '../../src/index';
  5 | 
  6 | export default Vue.extend({
  7 |   template: `
  8 |   <div>
  9 |     <div>
 10 |       <button @click="onToggleReadOnly">toggle readOnly</button>
 11 |       <button @click="onGetHtml">get html</button>
 12 |     </div>
 13 | 
 14 |     <div style="border: 1px solid #ccc; margin-top: 10px">
 15 |       <Toolbar
 16 |         style="border-bottom: 1px solid #ccc"
 17 |         :editor="editor"
 18 |         :defaultConfig="toolbarConfig"
 19 |         :mode="mode"
 20 |       />
 21 | 
 22 |       <Editor
 23 |         style="height: 500px"
 24 |         :defaultConfig="editorConfig"
 25 |         :defaultContent="defaultContent"
 26 |         :defaultHtml="defaultHtml"
 27 |         :mode="mode"
 28 |         @onCreated="onCreated"
 29 |         @onChange="onChange"
 30 |         @onDestroyed="onDestroyed"
 31 |         @onMaxLength="onMaxLength"
 32 |         @onFocus="onFocus"
 33 |         @onBlur="onBlur"
 34 |         @customAlert="customAlert"
 35 |         @customPaste="customPaste"
 36 |       />
 37 |     </div>
 38 | 
 39 |     <div style="border: 1px solid #ccc; margin-top: 10px">
 40 |       <pre v-html="curContentStr"></pre>
 41 |     </div>
 42 |   </div>
 43 | `,
 44 |   components: { Editor, Toolbar },
 45 |   data() {
 46 |     return {
 47 |       editor: null,
 48 |       toolbarConfig: {},
 49 |       //编辑器默认内容 - JSON格式 { type: 'paragraph', children: [{ text: 'basic demo' }] }
 50 |       defaultContent: [],
 51 |       // 编辑器默认内容 - HTML 格式
 52 |       defaultHtml: '<p>hello&nbsp;<strong>world</strong></p>\n<p><br></p>',
 53 |       editorConfig: {
 54 |         placeholder: '请输入内容123...',
 55 |         // 菜单配置
 56 |         MENU_CONF: {
 57 |           uploadImage: {
 58 |             server: 'http://106.12.198.214:3000/api/upload-img', // 上传图片地址
 59 |             fieldName: 'vue-demo-fileName',
 60 |           },
 61 |           insertImage: {
 62 |             checkImage(src: string, alt: string, href: string) {
 63 |               if (src.indexOf('http') !== 0) {
 64 |                 return '图片网址必须以 http/https 开头';
 65 |               }
 66 |               return true;
 67 |             },
 68 |           },
 69 |         },
 70 |       },
 71 |       curContent: [],
 72 |       mode: 'default',
 73 |     };
 74 |   },
 75 |   computed: {
 76 |     curContentStr() {
 77 |       // @ts-ignore
 78 |       return JSON.stringify(this.curContent, null, 2);
 79 |     },
 80 |   },
 81 |   mounted() {},
 82 |   methods: {
 83 |     //【注意】vue 和 React 不一样，无法在 props 传递事件，所以 callbacks 只能单独定义，通过事件传递
 84 |     onCreated(editor: IDomEditor) {
 85 |       // console.log('onCreated', editor)
 86 |       this.editor = Object.seal(editor) as any // 注意，一定要用 Object.seal() 否则会报错
 87 |     },
 88 |     onChange(editor: IDomEditor) {
 89 |       console.log('onChange', editor.children);
 90 |       this.curContent = editor.children as any;
 91 |     },
 92 |     onDestroyed(editor: IDomEditor) {
 93 |       console.log('onDestroyed', editor);
 94 |     },
 95 |     onMaxLength(editor: IDomEditor) {
 96 |       console.log('onMaxLength', editor);
 97 |     },
 98 |     onFocus(editor: IDomEditor) {
 99 |       console.log('onFocus', editor);
100 |     },
101 |     onBlur(editor: IDomEditor) {
102 |       console.log('onBlur', editor);
103 |     },
104 |     customAlert(info: string, type: string) {
105 |       window.alert(`customAlert in Vue demo\n${type}:\n${info}`);
106 |     },
107 |     customPaste(editor: IDomEditor, event: any, callback: any) {
108 |       // console.log('paste event', event)
109 |       // editor.insertText('xxx')
110 |       // // 返回值（注意，vue 事件的返回值，不能用 return）
111 |       // callback(false)
112 |       // // callback(true)
113 |     },
114 | 
115 |     onToggleReadOnly() {
116 |       const editor = this.editor as any;
117 |       if (editor == null) return;
118 | 
119 |       if (editor.getConfig().readOnly) {
120 |         editor.enable();
121 |       } else {
122 |         editor.disable();
123 |       }
124 |     },
125 |     onGetHtml() {
126 |       const editor = this.editor as any;
127 |       if (editor == null) return;
128 | 
129 |       // 使用 editor API
130 |       console.log(editor.getHtml());
131 |     },
132 |   },
133 | 
134 |   // 及时销毁 editor
135 |   beforeDestroy() {
136 |     const editor = this.editor as any;
137 |     if (editor == null) return;
138 |     editor.destroy();
139 |   },
140 | });
141 | </script>
142 | 


--------------------------------------------------------------------------------
/example/pages/Simple.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Vue from 'vue';
 3 | import { Editor, Toolbar } from '../../src/index';
 4 | 
 5 | export default Vue.extend({
 6 |   //【注意】单独写 <template>...</template> 时，rollup 打包完浏览器运行时报错，所以先在这里写 template
 7 |   template: `
 8 |   <div>
 9 |     <div style="border: 1px solid #ccc; margin-top: 10px">
10 |       <Toolbar
11 |         style="border-bottom: 1px solid #ccc"
12 |         :editor="editor"
13 |         :defaultConfig="toolbarConfig"
14 |         :mode="mode"
15 |       />
16 | 
17 |       <Editor
18 |         style="height: 500px"
19 |         :defaultHtml="defaultHtml"
20 |         :defaultConfig="editorConfig"
21 |         :defaultContent="defaultContent"
22 |         :mode="mode"
23 |         @onCreated="onCreated"
24 |         @onChange="onChange"
25 |       />
26 |     </div>
27 |   </div>
28 |   `,
29 |   components: { Editor, Toolbar },
30 |   data() {
31 |     return {
32 |       editor: null,
33 |       // 编辑器默认内容 - HTML 格式 <p>hello&nbsp;<strong>world</strong></p>\n<p><br></p>
34 |       defaultHtml: '',
35 |       defaultContent: [
36 |         { type: 'paragraph', children: [{ text: 'simple mode' }] },
37 |         { type: 'paragraph', children: [{ text: '简化 toolbar 和 hoverbar' }] },
38 |       ],
39 |       curContent: [],
40 | 
41 |       toolbarConfig: {
42 |         // 工具栏配置
43 |       },
44 |       editorConfig: {
45 |         placeholder: '请输入内容123...',
46 |       },
47 |       mode: 'simple',
48 |     };
49 |   },
50 |   mounted() {},
51 |   methods: {
52 |     onCreated(editor) {
53 |       // console.log('onCreated', editor)
54 |       this.editor = Object.seal(editor) // 注意，一定要用 Object.seal() 否则会报错
55 |     },
56 |     onChange(editor) {
57 |       console.log('onChange', editor.getHtml());
58 |       this.curContent = editor.children;
59 |     },
60 |   },
61 | 
62 |   // 及时销毁 editor
63 |   beforeDestroy() {
64 |     const editor = this.editor;
65 |     if (editor == null) return;
66 | 
67 |     // 销毁，并移除 editor
68 |     editor.destroy();
69 |   },
70 | });
71 | </script>
72 | 


--------------------------------------------------------------------------------
/example/pages/VModelHTML.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Vue from 'vue';
 3 | import { Editor, Toolbar } from '../../src/index';
 4 | 
 5 | export default Vue.extend({
 6 |   //【注意】单独写 <template>...</template> 时，rollup 打包完浏览器运行时报错，所以先在这里写 template
 7 |   template: `
 8 |     <div>
 9 |       <textarea v-model="valueHtml" style="width: 100%; height: 100px;"></textarea>
10 |       <div style="border: 1px solid #ccc; margin-top: 10px">
11 |         <Toolbar
12 |           style="border-bottom: 1px solid #ccc"
13 |           :editor="editor"
14 |           :defaultConfig="toolbarConfig"
15 |         />
16 | 
17 |         <Editor
18 |           style="height: 500px"
19 |           :defaultConfig="editorConfig"
20 |           v-model="valueHtml"
21 |           @onCreated="onCreated"
22 |           @onChange="onChange"
23 |         />
24 |       </div>
25 |     </div>
26 |   `,
27 |   components: { Editor, Toolbar },
28 |   data() {
29 |     return {
30 |       editor: null,
31 |       toolbarConfig: {
32 |         // 工具栏配置
33 |       },
34 |       editorConfig: {
35 |         placeholder: '请输入内容...',
36 |         // autoFocus: false,
37 |         // readOnly: true,
38 |       },
39 |       valueHtml: '<p>hello</p>'
40 |     };
41 |   },
42 |   mounted() {
43 |     setTimeout(() => {
44 |       this.valueHtml = '<p>hello world</p>'
45 |     }, 1500);
46 |   },
47 |   methods: {
48 |     onCreated(editor) {
49 |       // console.log('onCreated', editor)
50 |       this.editor = Object.seal(editor) // 注意，一定要用 Object.seal() 否则会报错
51 |     },
52 |     onChange(editor) {
53 |       console.log('onChange', editor.getHtml());
54 |       this.curContent = editor.children;
55 |     },
56 |   },
57 | 
58 |   // 及时销毁 editor
59 |   beforeDestroy() {
60 |     const editor = this.editor;
61 |     if (editor == null) return;
62 | 
63 |     // 销毁，并移除 editor
64 |     editor.destroy();
65 |   },
66 | });
67 | </script>
68 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@wangeditor/editor-for-vue",
 3 |   "version": "1.0.2",
 4 |   "description": "wangEditor component for vue2.x",
 5 |   "author": "wangfupeng1988 <wangfupeng1988@163.com>",
 6 |   "contributors": [],
 7 |   "homepage": "https://github.com/wangeditor-team/we-2021#readme",
 8 |   "license": "MIT",
 9 |   "types": "dist/index.d.ts",
10 |   "main": "dist/index.js",
11 |   "module": "dist/index.esm.js",
12 |   "browser": {
13 |     "./dist/index.js": "./dist/index.js",
14 |     "./dist/index.esm.js": "./dist/index.esm.js"
15 |   },
16 |   "directories": {
17 |     "lib": "dist",
18 |     "test": "__tests__"
19 |   },
20 |   "files": [
21 |     "dist"
22 |   ],
23 |   "keywords": [
24 |     "wangEditor",
25 |     "富文本编辑器",
26 |     "富文本",
27 |     "vue2"
28 |   ],
29 |   "repository": {
30 |     "type": "git",
31 |     "url": "git+https://github.com/wangeditor-team/we-2021.git"
32 |   },
33 |   "scripts": {
34 |     "test": "jest",
35 |     "test-c": "jest --coverage",
36 |     "release": "release-it",
37 |     "example": "cross-env NODE_ENV=development:example rollup -c rollup.example.config.js -w",
38 |     "dev": "cross-env NODE_ENV=development rollup -c rollup.config.js",
39 |     "dev-watch": "cross-env NODE_ENV=development rollup -c rollup.config.js -w",
40 |     "build": "cross-env NODE_ENV=production rollup -c rollup.config.js",
41 |     "dev-size-stats": "cross-env NODE_ENV=development:size_stats rollup -c rollup.config.js",
42 |     "size-stats": "cross-env NODE_ENV=production:size_stats rollup -c rollup.config.js"
43 |   },
44 |   "bugs": {
45 |     "url": "https://github.com/wangeditor-team/we-2021/issues"
46 |   },
47 |   "peerDependencies": {
48 |     "@wangeditor/editor": ">=5.1.0",
49 |     "vue": "^2.6.14"
50 |   },
51 |   "devDependencies": {
52 |     "@babel/core": "^7.16.0",
53 |     "@babel/plugin-transform-runtime": "^7.16.0",
54 |     "@babel/preset-env": "^7.16.0",
55 |     "@rollup/plugin-babel": "^5.3.0",
56 |     "@rollup/plugin-commonjs": "^21.0.1",
57 |     "@rollup/plugin-json": "^4.1.0",
58 |     "@rollup/plugin-node-resolve": "^13.0.6",
59 |     "@rollup/plugin-replace": "^3.0.0",
60 |     "@types/vue": "^2.0.0",
61 |     "@vue/compiler-sfc": "^3.2.21",
62 |     "@wangeditor/editor": "^5.1.1",
63 |     "autoprefixer": "^10.4.0",
64 |     "cross-env": "^7.0.3",
65 |     "cssnano": "^5.0.10",
66 |     "jest": "^27.3.1",
67 |     "lodash": "^4.17.21",
68 |     "postcss": "^8.3.11",
69 |     "release-it": "^14.11.6",
70 |     "rollup": "^2.59.0",
71 |     "rollup-plugin-cleanup": "^3.2.1",
72 |     "rollup-plugin-copy": "^3.4.0",
73 |     "rollup-plugin-delete": "^2.0.0",
74 |     "rollup-plugin-generate-html-template": "^1.7.0",
75 |     "rollup-plugin-peer-deps-external": "^2.2.4",
76 |     "rollup-plugin-postcss": "^4.0.1",
77 |     "rollup-plugin-serve": "^1.1.0",
78 |     "rollup-plugin-terser": "^7.0.2",
79 |     "rollup-plugin-typescript2": "^0.30.0",
80 |     "rollup-plugin-visualizer": "^5.5.0",
81 |     "rollup-plugin-vue": "^6.0.0",
82 |     "ts-jest": "^27.0.4",
83 |     "tslib": "^2.3.0",
84 |     "typescript": "^4.4.4",
85 |     "vue-template-compiler": "^2.6.14"
86 |   },
87 |   "dependencies": {}
88 | }
89 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | import { createRollupConfig, IS_PRD } from './build/create-rollup-config'
 3 | import pkg from './package.json'
 4 | 
 5 | const name = 'WangEditorForVue'
 6 | const input = path.resolve(__dirname, './src', 'index.ts')
 7 | 
 8 | const configList = []
 9 | 
10 | // umd - 开发环境需要 CDN 引入方式来测试，所以优先输出 umd
11 | const umdConf = createRollupConfig({
12 |   input,
13 |   output: {
14 |     file: pkg.main,
15 |     format: 'umd',
16 |     name,
17 |   },
18 | })
19 | configList.push(umdConf)
20 | 
21 | if (IS_PRD) {
22 |   // esm
23 |   const esmConf = createRollupConfig({
24 |     input,
25 |     output: {
26 |       file: pkg.module,
27 |       format: 'esm',
28 |       name,
29 |     },
30 |   })
31 |   configList.push(esmConf)
32 | }
33 | 
34 | export default configList
35 | 


--------------------------------------------------------------------------------
/rollup.example.config.js:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | import htmlTemplate from 'rollup-plugin-generate-html-template'
 3 | import serve from 'rollup-plugin-serve'
 4 | import copy from 'rollup-plugin-copy'
 5 | import del from 'rollup-plugin-delete'
 6 | import devConfig from './build/config/dev'
 7 | import { merge } from 'lodash'
 8 | 
 9 | // 继续生成 rollup config
10 | const name = 'WangEditorForVue'
11 | const input = path.resolve(__dirname, './example', 'index.ts')
12 | const file = 'dist-example/index.js'
13 | const port = 8883
14 | 
15 | const config = {
16 |   input,
17 |   output: {
18 |     file,
19 |     format: 'umd',
20 |     name,
21 |   },
22 |   plugins: [
23 |     serve({
24 |       // open: true,
25 |       contentBase: ['dist-example'],
26 |       port,
27 |       onListening: function () {
28 |         console.log(`\nExample is running on http://localhost:${port}/\n`)
29 |       },
30 |     }),
31 |     htmlTemplate({
32 |       template: 'example/index.html',
33 |       target: 'dist-example/index.html',
34 |     }),
35 |     del({ targets: 'dist-example/*' }),
36 |   ],
37 | }
38 | 
39 | export default merge(devConfig, config)
40 | 


--------------------------------------------------------------------------------
/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import Vue from 'vue'
3 |   export default Vue
4 | }
5 | 


--------------------------------------------------------------------------------
/src/components/Editor.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | import Vue from 'vue';
  3 | import { createEditor } from '@wangeditor/editor';
  4 | 
  5 | function genErrorInfo(fnName: string) {
  6 |   let info = `请使用 '@${fnName}' 事件，不要放在 props 中`;
  7 |   info += `\nPlease use '@${fnName}' event instead of props`;
  8 |   return info;
  9 | }
 10 | 
 11 | export default Vue.extend({
 12 |   //【注意】单独写 <template>...</template> 时，rollup 打包完浏览器运行时报错，所以先在这里写 template
 13 |   render(h) {
 14 |     return h('div', { ref: 'box' });
 15 |   },
 16 |   name: 'Editor',
 17 |   data() {
 18 |     return {
 19 |       curValue: '',
 20 |       editor: null,
 21 |     };
 22 |   },
 23 |   props: ['defaultContent', 'defaultConfig', 'mode', 'defaultHtml', 'value'], // value 用于自定义 v-model
 24 |   mounted() {
 25 |     this.create();
 26 |   },
 27 |   watch: {
 28 |     // 监听 'value' 属性变化 - value 用于自定义 v-model
 29 |     value(newVal) {
 30 |       const isEqual = newVal === this.curValue;
 31 |       if (isEqual) return; // 和当前内容一样，则忽略
 32 | 
 33 |       // 重置 HTML
 34 |       this.setHtml(newVal);
 35 |     },
 36 |   },
 37 |   methods: {
 38 |     // 重置 HTML
 39 |     setHtml(newHtml: string) {
 40 |       const editor = this.editor as any;
 41 |       if (editor == null) return;
 42 |       editor.setHtml(newHtml);
 43 |     },
 44 | 
 45 |     // 创建 editor
 46 |     create() {
 47 |       if (this.$refs.box == null) return;
 48 | 
 49 |       const defaultConfig = this.defaultConfig || {};
 50 | 
 51 |       const defaultContent = JSON.stringify(
 52 |         Array.isArray(this.defaultContent) ? this.defaultContent : []
 53 |       );
 54 | 
 55 |       createEditor({
 56 |         selector: this.$refs.box as Element,
 57 |         html: this.defaultHtml || this.value || '',
 58 |         config: {
 59 |           ...defaultConfig,
 60 |           onCreated: (editor) => {
 61 |             this.editor = Object.seal(editor) as any; // 注意，一定要用 Object.seal() 否则会报错
 62 | 
 63 |             this.$emit('onCreated', editor);
 64 |             if (defaultConfig.onCreated) {
 65 |               const info = genErrorInfo('onCreated');
 66 |               throw new Error(info);
 67 |             }
 68 |           },
 69 |           onChange: (editor) => {
 70 |             const editorHtml = editor.getHtml();
 71 |             this.curValue = editorHtml; // 记录当前 html 内容
 72 |             this.$emit('input', editorHtml); // 用于自定义 v-model
 73 | 
 74 |             this.$emit('onChange', editor);
 75 |             if (defaultConfig.onChange) {
 76 |               const info = genErrorInfo('onChange');
 77 |               throw new Error(info);
 78 |             }
 79 |           },
 80 |           onDestroyed: (editor) => {
 81 |             this.$emit('onDestroyed', editor);
 82 |             if (defaultConfig.onDestroyed) {
 83 |               const info = genErrorInfo('onDestroyed');
 84 |               throw new Error(info);
 85 |             }
 86 |           },
 87 |           onMaxLength: (editor) => {
 88 |             this.$emit('onMaxLength', editor);
 89 |             if (defaultConfig.onMaxLength) {
 90 |               const info = genErrorInfo('onMaxLength');
 91 |               throw new Error(info);
 92 |             }
 93 |           },
 94 |           onFocus: (editor) => {
 95 |             this.$emit('onFocus', editor);
 96 |             if (defaultConfig.onFocus) {
 97 |               const info = genErrorInfo('onFocus');
 98 |               throw new Error(info);
 99 |             }
100 |           },
101 |           onBlur: (editor) => {
102 |             this.$emit('onBlur', editor);
103 |             if (defaultConfig.onBlur) {
104 |               const info = genErrorInfo('onBlur');
105 |               throw new Error(info);
106 |             }
107 |           },
108 |           customAlert: (info, type) => {
109 |             this.$emit('customAlert', info, type);
110 |             if (defaultConfig.customAlert) {
111 |               const info = genErrorInfo('customAlert');
112 |               throw new Error(info);
113 |             }
114 |           },
115 |           customPaste: (editor, event) => {
116 |             if (defaultConfig.customPaste) {
117 |               const info = genErrorInfo('customPaste');
118 |               throw new Error(info);
119 |             }
120 |             let res;
121 |             this.$emit('customPaste', editor, event, (val: any) => {
122 |               res = val;
123 |             });
124 |             return res;
125 |           },
126 |         },
127 |         content: JSON.parse(defaultContent),
128 |         mode: this.mode || 'default',
129 |       });
130 |     },
131 |   },
132 | });
133 | </script>
134 | 


--------------------------------------------------------------------------------
/src/components/Toolbar.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import Vue from 'vue';
 3 | import { createToolbar, DomEditor } from '@wangeditor/editor';
 4 | 
 5 | export default Vue.extend({
 6 |   name: 'Toolbar',
 7 |   render(h) {
 8 |     return h('div', { ref: 'box' });
 9 |   },
10 |   props: ['editor', 'defaultConfig', 'mode'],
11 |   methods: {
12 |     // 创建 toolbar
13 |     create(editor: any) {
14 |       if (this.$refs.box == null) return;
15 |       if (editor == null) return;
16 |       if (DomEditor.getToolbar(editor)) return // 不重复创建
17 | 
18 |       createToolbar({
19 |         editor,
20 |         selector: this.$refs.box as Element,
21 |         config: this.defaultConfig || {},
22 |         mode: this.mode || 'default',
23 |       });
24 |     },
25 |   },
26 |   watch: {
27 |     editor: {
28 |       handler(e) {
29 |         if (e == null) return;
30 |         this.create(e);
31 |       },
32 |       immediate: true,
33 |     }
34 |   }
35 | });
36 | </script>
37 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @description editor-for-vue entry
 3 |  * @author wangfupeng
 4 |  */
 5 | 
 6 | import Editor from './components/Editor.vue'
 7 | import Toolbar from './components/Toolbar.vue'
 8 | 
 9 | export { Editor, Toolbar }
10 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES5",
 4 |     "module": "esnext",
 5 |     "moduleResolution": "node",
 6 |     "declaration": true,
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "esModuleInterop": true,
12 |     "lib": ["esnext", "dom"]
13 |   },
14 |   "exclude": ["node_modules", "build", "__tests__", "dist", "dist-example", "example", "rollup.*"]
15 | }
16 | 


--------------------------------------------------------------------------------