vue-editify 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,3 @@
1
+ #### 基于 Vue3 的 web 富文本编辑器,提供丰富的功能和精美的 UI
2
+
3
+ > 具体使用方法请参阅:[editify](https://www.ling0523.cn/editify/)
@@ -0,0 +1,80 @@
1
+ <template>
2
+ <div style="padding: 100px 50px 50px 50px">
3
+ <editify ref="editify" border height="600px" v-model="value" placeholder="Please Enter Text..." allow-paste-html show-word-length :menu="menuConfig" @menu-operate="operate"> </editify>
4
+ </div>
5
+ </template>
6
+ <script>
7
+ import { h } from 'vue'
8
+ export default {
9
+ name: 'App',
10
+ data() {
11
+ return {
12
+ value: '<p>333</p><div data-editify-task>这是一个任务列表</div><blockquote>这是一个引用块</blockquote><h1>这是一个一级标题</h1><h2>这是一个二级标题</h2><h3><span contenteditable="false" style="background:#f30;">这是一个</span><span contenteditable="false" style="background:#f30;">三级标题</span></h3><h4>这是一个四级标题</h4><h5>这是一个五级标题</h5><h6 contenteditable="false" style="background:#f30;">这是一个六级标题</h6><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧222<font face="黑体-简">兮西易</font>水寒</p><p><video src="https://video.699pic.com/videos/84/16/65/a_Jf3yXN9UR8A616988416654452_10s.mp4"></video><a href="https://www.mvi-web.cn">跳转到mvi-web-plus官网</a><img src="https://www.mvi-web.cn/resources/images/mvi_image_3_1652322363025.jpeg" />333</p><pre data-editify-hljs="javascript">const a = new Worker()</pre><p><br></p><table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>祖籍</th></tr></thead><tbody><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr><tr><td>凌凯</td><td>28</td><td>男</td><td>安徽</td></tr></tbody></table><p><br></p><p><br></p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p><p>风萧萧兮西易水寒</p>',
13
+ menuConfig: {
14
+ mode: 'fixed',
15
+ sequence: {
16
+ alert: 100
17
+ },
18
+ extends: {
19
+ alert: {
20
+ title: '自定义菜单按钮',
21
+ leftBorder: true,
22
+ rightBorder: false,
23
+ disabled: false,
24
+ active: false,
25
+ type: 'select',
26
+ options: [
27
+ {
28
+ label: '自定义功能1',
29
+ value: '1',
30
+ style: {
31
+ color: '#f30'
32
+ }
33
+ },
34
+ {
35
+ label: '自定义功能2',
36
+ value: '2',
37
+ style: {
38
+ fontWeight: 'bold'
39
+ }
40
+ },
41
+ {
42
+ label: '自定义功能3',
43
+ value: '3'
44
+ }
45
+ ],
46
+ onOperate: function (name, val, instance) {
47
+ console.log(name, val, instance)
48
+ },
49
+ default: () => h('span', {}, '自定义菜单')
50
+ }
51
+ }
52
+ },
53
+ btn: null
54
+ }
55
+ },
56
+ mounted() {},
57
+ methods: {
58
+ change() {
59
+ this.$refs.editify.isSourceView = !this.$refs.editify.isSourceView
60
+ },
61
+ operate(name, val) {
62
+ console.log('触发operate事件', name, val)
63
+ }
64
+ }
65
+ }
66
+ </script>
67
+ <style lang="less">
68
+ html,
69
+ body {
70
+ height: 100%;
71
+ }
72
+ body {
73
+ margin: 0;
74
+ }
75
+
76
+ #app {
77
+ height: 100%;
78
+ overflow: auto;
79
+ }
80
+ </style>
@@ -0,0 +1,4 @@
1
+ import { createApp } from 'vue'
2
+ import App from './App.vue'
3
+ import Editify from '../src'
4
+ createApp(App).use(Editify, { locale: 'zh_CN' }).mount('#app')