├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── README.md
├── babel.config.js
├── examples
    ├── App.vue
    └── main.js
├── package-lock.json
├── package.json
├── packages
    ├── index.js
    └── textarea
    │   ├── index.js
    │   └── main.vue
├── postcss.config.js
├── public
    └── index.html
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [*.{js,jsx,ts,tsx,vue}]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | trim_trailing_whitespace = true
8 | insert_final_newline = true
9 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13 |     "space-before-function-paren": [0, "always"],
14 |     "semi": [0, "always"]
15 |   },
16 |   parserOptions: {
17 |     parser: 'babel-eslint'
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | lib/
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | examples/
 4 | packages/
 5 | public/
 6 | vue.config.js
 7 | babel.config.js
 8 | *.map
 9 | *.html
10 | 
11 | # local env files
12 | .env.local
13 | .env.*.local
14 | 
15 | # Log files
16 | npm-debug.log*
17 | yarn-debug.log*
18 | yarn-error.log*
19 | 
20 | # Editor directories and files
21 | .idea
22 | .vscode
23 | *.suo
24 | *.ntvs*
25 | *.njsproj
26 | *.sln
27 | *.sw*
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # VueTagTextarea
 2 | 
 3 | > 可插入自定义标签的 textarea
 4 | 
 5 | ## 安装
 6 | 
 7 | ``` bash
 8 | $ npm install vue-tag-textarea -S
 9 | ```
10 | ## 使用
11 | 
12 | 在 `main.js` 文件中引入插件并注册
13 | 
14 | ``` bash
15 | # main.js
16 | import VueTagTextarea from 'vue-tag-textarea'
17 | import 'vue-tag-textarea/lib/vue-tag-textarea.css'
18 | Vue.use(VueTagTextarea)
19 | ```
20 | 
21 | 在项目中用使用 VueTagTextarea
22 | 
23 | 
24 | ```js
25 | <template>
26 |   <w-textarea v-model="text" />
27 | </template>
28 | <script>
29 |   export default {
30 |     data () {
31 |       return {
32 |         text: 'demo'
33 |       }
34 |     }
35 |   }
36 | </script>
37 | ```
38 | 
39 | 注意：标签为 `<w-textarea>`
40 | 
41 | ## 特点
42 | 1. 可以插入自定义的标签，默认为 `<wise>`
43 | 2. 基于自定义标签，可以满足模版文案的需求
44 | 
45 | ## 参数
46 | 
47 | | 参数 | 说明 | 类型 | 默认值 |
48 | | ------ | ------ | ------ | ------ |
49 | | tag | 自定义标签名 | String | wise |
50 | | tools | 配置工具栏 | Array | [{ type: 'link', text: '添加超链接' }, { type: 'tag', text: '添加模版标签' }] |
51 | | maxlength | 最大字符长度 | String, Number | - |
52 | 
53 | > 自定义 tag 的时候，需要添加该标签的样式
54 | 
55 | 
56 | ## 事件
57 | 
58 | | 事件名称 | 说明 | 回调参数 |
59 | | ------ | ------ | ------ |
60 | | add | 点击工具栏上的“添加xx”按钮时触发 | type |
61 | 
62 | ## Add 事件详解
63 | 工具栏可以通过 tools 参数进行配置，tools 的元素是一个包含 type 和 text 的对象，其中 text 为工具栏按钮的文字。  
64 | 当点击工具栏按钮的时候，触发 add 事件，接收一个 type 参数，该参数为 tools 中定义的 type 属性值。  
65 | 具体的交互逻辑需要自行开发，最后需要通过 $refs 调用 VueTagTextarea 内部的 addLink() 或者 addTag() 方法，完成添加标签。  
66 | 当调用 addTag() 的时候，需要传入一个 text 参数，值为标签的文本内容。  
67 | 当调用 addLink() 的时候，需要传入 url 和 text，其中 url 为超链接地址，text 为超链接文本。  
68 | VueTagTextarea 最终返回的值是一个 innerHTML。  
69 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div>
 4 |     <h1>测试 textarea 组件</h1>
 5 |     <div class="container" ref="wise">
 6 |       <button @click="add">add</button>
 7 |       <div v-for="(item, index) in listData" :key="index">
 8 |         <button @click="handleDelete(index)">delete</button>
 9 |         <w-textarea v-model="item.text" :tools="[]"></w-textarea>
10 |       </div>
11 |       <w-textarea v-model="testData"
12 |         tag="wise" ref="testText"
13 |         maxlength="100"
14 |         @add="handleAdd">
15 |         <div v-if="show">
16 |           <div>
17 |             <label>模版内容</label>
18 |             <input type="text" v-model="form.text">
19 |           </div>
20 |           <div>
21 |             <button @click="addTag(form.text)">save</button>
22 |           </div>
23 |         </div>
24 |       </w-textarea>
25 |       <div v-html="testData"></div>
26 |     </div>
27 |   </div>
28 |   </div>
29 | </template>
30 | 
31 | <script>
32 | export default {
33 |   name: 'app',
34 |   components: {},
35 |   data () {
36 |     return {
37 |       testData: '',
38 |       listData: [],
39 |       show: false,
40 |       form: {
41 |         text: ''
42 |       }
43 |     }
44 |   },
45 |   methods: {
46 |     add () {
47 |       this.listData.push({ text: '' })
48 |     },
49 |     handleDelete (index) {
50 |       this.listData.splice(index, 1)
51 |       console.log('list', this.listData)
52 |     },
53 |     handleAdd (type) {
54 |       if (type === 'tag') {
55 |         this.show = true
56 |       } else {
57 |         console.log(type)
58 |       }
59 |     },
60 |     addTag (text) {
61 |       this.$refs.testText.addTag(text)
62 |       console.log('testdata', this.testData)
63 |       this.show = false
64 |     }
65 |   }
66 | }
67 | </script>
68 | 
69 | <style lang="scss"></style>
70 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import TagTextarea from '../packages/index'
 4 | 
 5 | Vue.use(TagTextarea)
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | new Vue({
10 |   render: h => h(App)
11 | }).$mount('#app')
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-tag-textarea",
 3 |   "version": "0.1.0",
 4 |   "main": "lib/vue-tag-textarea.umd.min.js",
 5 |   "private": false,
 6 |   "license": "MIT",
 7 |   "author": "wisewrong <1005915808@qq.com>",
 8 |   "scripts": {
 9 |     "serve": "vue-cli-service serve",
10 |     "build": "vue-cli-service build",
11 |     "lint": "vue-cli-service lint",
12 |     "lib": "vue-cli-service build --target lib --name vue-tag-textarea --dest lib packages/index.js"
13 |   },
14 |   "dependencies": {
15 |     "vue": "^2.5.17"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "^3.0.4",
19 |     "@vue/cli-plugin-eslint": "^3.0.4",
20 |     "@vue/cli-service": "^3.0.4",
21 |     "@vue/eslint-config-standard": "^4.0.0",
22 |     "babel-eslint": "^10.0.1",
23 |     "eslint": "^5.8.0",
24 |     "eslint-plugin-vue": "^5.0.0-0",
25 |     "node-sass": "^4.9.0",
26 |     "sass-loader": "^7.0.1",
27 |     "vue-template-compiler": "^2.5.17"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/packages/index.js:
--------------------------------------------------------------------------------
 1 | import Textarea from './textarea/index'
 2 | 
 3 | const components = [
 4 |   Textarea
 5 | ]
 6 | 
 7 | const install = function (Vue) {
 8 |   if (install.installed) return
 9 |   install.installed = true
10 |   components.map(component => {
11 |     Vue.component(component.name, component)
12 |   })
13 | }
14 | 
15 | if (typeof window !== 'undefined' && window.Vue) {
16 |   // window.Vue.use(install)
17 |   install(window.Vue)
18 | }
19 | 
20 | export default {
21 |   install,
22 |   Textarea
23 | }
24 | 


--------------------------------------------------------------------------------
/packages/textarea/index.js:
--------------------------------------------------------------------------------
1 | import Textarea from './main.vue'
2 | 
3 | Textarea.install = function (Vue) {
4 |   Vue.component(Textarea.name, Textarea)
5 | }
6 | 
7 | export default Textarea
8 | 


--------------------------------------------------------------------------------
/packages/textarea/main.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="w-textarea" ref="wTextarea">
  3 |     <div
  4 |       class="w-textarea_input"
  5 |       ref="wTextareaContent"
  6 |       :id="contentId"
  7 |       @click="inputClick($event)"
  8 |       @focus="isLocked = true"
  9 |       @blur="isLocked = false"
 10 |       @keydown.delete="handleDelete($event)"
 11 |       @input="handleInput($event.target)"
 12 |     ></div>
 13 |     <div class="w-textarea_tools" v-if="tools.length > 0 || maxlength">
 14 |       <button class="w-textarea_tools__item"
 15 |         v-for="item in tools"
 16 |         :key="item.type"
 17 |         @click="openTagDialog(item.type)">{{item.text}}</button>
 18 |       <span :class="['w-textarea_tools__text',
 19 |         count.num < 0 ? '__danger' : '']"
 20 |         v-if="maxlength">{{count.text}}</span>
 21 |     </div>
 22 |     <div class="w-textarea_dialog">
 23 |       <slot></slot>
 24 |     </div>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | export default {
 30 |   name: 'wTextarea',
 31 |   data() {
 32 |     return {
 33 |       // 记录currentText以计算长度
 34 |       currentText: this.value,
 35 |       // 为input区域生成随机id，当在页面上有多个组件时，用于监听光标的变化
 36 |       contentId: `content${this.getGuid()}`,
 37 |       // 输入的时候锁定，禁止更新innerHTML
 38 |       isLocked: false,
 39 |       // 记录当前选中tag的ID
 40 |       currentTagId: null,
 41 |       // 当前光标位置
 42 |       savedRange: {}
 43 |     };
 44 |   },
 45 |   props: {
 46 |     value: {
 47 |       type: String,
 48 |       default: ''
 49 |     },
 50 |     tag: { // 自定义模版标签的标签名
 51 |       type: String,
 52 |       // 默认使用wise作为标签名，并添加了默认样式
 53 |       // 当使用其他标签名的时候，需要另写标签样式
 54 |       default: 'wise'
 55 |     },
 56 |     tools: { // 自定义扩展功能：超链接'link'，模版标签'tag'
 57 |       type: Array,
 58 |       default () {
 59 |         return [
 60 |           { type: 'link', text: '添加超链接' },
 61 |           { type: 'tag', text: '添加模版标签' }
 62 |         ]
 63 |       }
 64 |     },
 65 |     maxlength: { // 最大输入长度
 66 |       type: [String, Number],
 67 |       default: ''
 68 |     }
 69 |   },
 70 |   computed: {
 71 |     count () { // 字符长度记数
 72 |       let num = this.maxlength - this.currentText.length
 73 |       let text = num < 0 ? `已超出${Math.abs(num)}个字符` : `还可以输入${num}个字符`
 74 |       return { num, text }
 75 |     }
 76 |   },
 77 |   mounted() {
 78 |     // 初始化数据
 79 |     this.currentText && (this.$refs.wTextareaContent.innerHTML = this.currentText);
 80 |     // 创建模版标签的style
 81 |     this.createStyle();
 82 |     // 每次光标变化的时候，保存 range
 83 |     document.addEventListener('selectionchange', this.selectHandler);
 84 |   },
 85 |   beforeDestroy() {
 86 |     // 卸载事件
 87 |     document.removeEventListener('selectionchange', this.selectHandler);
 88 |   },
 89 |   methods: {
 90 |     updateData(text) {
 91 |       this.$emit('input', text);
 92 |     },
 93 |     createStyle() {
 94 |       // 为自定义的模版标签添加样式，使之不可编辑
 95 |       let style = document.createElement('style');
 96 |       style.innerHTML = `.w-textarea ${this.tag} {
 97 |         cursor: default;
 98 |         -webkit-user-modify: read-only !important;
 99 |       }`;
100 |       this.$refs.wTextarea.appendChild(style);
101 |     },
102 |     closeModal() {
103 |       this.form.text = '';
104 |       this.showModal = false;
105 |     },
106 |     openTagDialog(type) {
107 |       // 将事件抛给父组件处理
108 |       // 处理后需要调用 addTag() 或者 addLink() 将内容传回来
109 |       this.$emit('add', type)
110 |     },
111 |     addTag(text) {
112 |       // 创建模版标签
113 |       let node = document.createElement(this.tag);
114 |       node.innerText = text;
115 |       // 添加id便于删除
116 |       node.id = this.getGuid();
117 |       this.insertNode(node);
118 |     },
119 |     addLink(text, url) {
120 |       // 创建a标签
121 |       let node = document.createElement('a');
122 |       node.innerText = text;
123 |       node.href = url;
124 |       node.target = 'blank';
125 |       this.insertNode(node)
126 |     },
127 |     insertNode (node) { // 在内容中插入标签
128 |       // 删掉选中的内容（如有）
129 |       this.savedRange.deleteContents()
130 |       // 插入链接
131 |       this.savedRange.insertNode(node)
132 | 
133 |       // 更新双向绑定数据
134 |       let target = this.$refs.wTextareaContent
135 |       this.updateData(target.innerHTML);
136 |       this.currentText = target.innerText;
137 |     },
138 |     handleInput(target) {
139 |       // 即时更新数据
140 |       this.updateData(target.innerHTML);
141 |       this.currentText = target.innerText;
142 |     },
143 |     handleDelete(e) {
144 |       // 监听“删除”事件
145 |       if (this.currentTagId) {
146 |         // 若已选中模版标签，直接删除dom节点
147 |         let t = document.getElementById(this.currentTagId);
148 |         this.$refs.wTextareaContent.removeChild(t);
149 |         this.currentTagId = null;
150 |         // 阻止浏览器默认的删除事件，并手动更新数据
151 |         e.preventDefault();
152 |         this.handleInput(e.target);
153 |       }
154 |     },
155 |     inputClick(e) {
156 |       // 监听点击事件
157 |       this.isLocked = true;
158 |       const TAG_NAME = e.target.nodeName;
159 |       if (TAG_NAME === this.tag.toUpperCase()) {
160 |         // 点击模版标签时，记录id
161 |         this.currentTagId = e.target.id;
162 |         e.target.className = 'active';
163 |       } else if (this.currentTagId) {
164 |         // 清空active样式
165 |         let target = document.getElementById(this.currentTagId);
166 |         target.className = '';
167 |         this.currentTagId = null;
168 |       } else {
169 |         this.currentTagId = null;
170 |       }
171 |     },
172 |     getGuid() {
173 |       // 生成随机ID
174 |       return `r${new Date().getTime()}d${Math.ceil(Math.random() * 1000)}`;
175 |     },
176 |     selectHandler() {
177 |       // 监听选定文本的变动
178 |       let sel = window.getSelection();
179 |       let range = sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
180 | 
181 |       if (
182 |         range &&
183 |         range.commonAncestorContainer.ownerDocument.activeElement.id ===
184 |         this.contentId
185 |       ) {
186 |         this.savedRange = range;
187 |       }
188 |     }
189 |   },
190 |   watch: {
191 |     value(val) {
192 |       // 非锁定状态下，实时更新innerHTML
193 |       if (!this.isLocked) {
194 |         this.$refs.wTextareaContent.innerHTML = val;
195 |       }
196 |     }
197 |   }
198 | };
199 | </script>
200 | 
201 | <style lang="scss">
202 | // 给标签默认样式，不可scoped
203 | .w-textarea {
204 |   wise {
205 |     color: #26a2ff;
206 |     padding: 0 1px;
207 |     white-space: nowrap;
208 |     cursor: default;
209 |     -webkit-user-modify: read-only !important;
210 |   }
211 | 
212 |   .active {
213 |     background: #dcdfe6;
214 |   }
215 | }
216 | </style>
217 | 
218 | <style lang="scss" scoped>
219 | $borderColor: #dcdfe6;
220 | $bgColor: #f5f7fa;
221 | $textColor: #666;
222 | 
223 | .w-textarea {
224 |   width: 100%;
225 |   box-sizing: border-box;
226 |   border-radius: 4px;
227 |   border: 1px solid $borderColor;
228 |   margin-bottom: 15px;
229 |   overflow: hidden;
230 |   position: relative;
231 | 
232 |   &_input {
233 |     width: 100%;
234 |     min-height: 100px;
235 |     box-sizing: border-box;
236 |     padding: 10px;
237 |     line-height: 1.5;
238 |     word-break: break-word;
239 |     // 允许编辑，禁止富文本
240 |     -webkit-user-modify: read-write-plaintext-only !important;
241 | 
242 |     &:focus {
243 |       outline: none;
244 |     }
245 |   }
246 | 
247 |   &_tools {
248 |     padding: 0 10px;
249 |     height: 40px;
250 |     line-height: 40px;
251 |     border-top: 1px solid $borderColor;
252 |     background-color: $bgColor;
253 |     color: $textColor;
254 |     font-size: 12px;
255 | 
256 |     &__item {
257 |       display: inline-block;
258 |       line-height: 1;
259 |       padding: 5px 8px;
260 |       margin-right: 8px;
261 |       color: $textColor;
262 |       cursor: pointer;
263 |       border: 1px solid $borderColor;
264 |       border-radius: 4px;
265 |       background: #fff;
266 |       transition: all 0.3s;
267 | 
268 |       &:hover {
269 |         background: $bgColor;
270 |         opacity: .7;
271 |       }
272 | 
273 |       &:focus {
274 |         outline: none;
275 |       }
276 |     }
277 | 
278 |     &__text {
279 |       display: inline-block;
280 |       line-height: 40px;
281 |       padding: 0 8px;
282 |       float: right;
283 |       color: $textColor;
284 |       cursor: default;
285 |       transition: all 0.3s;
286 | 
287 |       &:hover {
288 |         opacity: 1;
289 |       }
290 | 
291 |       &.__danger {
292 |         color: red;
293 |       }
294 |     }
295 |   }
296 | }
297 | </style>
298 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/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 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-tag-textarea</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-tag-textarea doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   // 修改 src 为 examples
 3 |   pages: {
 4 |     index: {
 5 |       entry: 'examples/main.js',
 6 |       template: 'public/index.html',
 7 |       filename: 'index.html'
 8 |     }
 9 |   },
10 |   productionSourceMap: false
11 | }
12 | 


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