vue-editify 0.0.24 → 0.0.25
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 +3 -3
- package/examples/App.vue +90 -90
- package/examples/main.js +4 -4
- package/lib/editify.es.js +30 -30
- package/lib/editify.umd.js +1 -1
- package/lib/style.css +1 -1
- package/package.json +37 -37
- package/src/Editify.vue +2004 -2004
- package/src/components/base/Button.vue +440 -440
- package/src/components/base/Checkbox.vue +196 -196
- package/src/components/base/Icon.vue +31 -31
- package/src/components/base/Layer.vue +712 -712
- package/src/components/base/Tooltip.vue +82 -82
- package/src/components/base/Triangle.vue +159 -159
- package/src/components/bussiness/Colors.vue +138 -138
- package/src/components/bussiness/InsertImage.vue +316 -316
- package/src/components/bussiness/InsertLink.vue +136 -136
- package/src/components/bussiness/InsertTable.vue +157 -157
- package/src/components/bussiness/InsertVideo.vue +316 -316
- package/src/components/bussiness/Menu.vue +1458 -1458
- package/src/components/bussiness/Toolbar.vue +1122 -1122
- package/src/core/index.js +1263 -1263
- package/src/css/base.less +30 -30
- package/src/css/hljs.less +54 -54
- package/src/hljs/index.js +62 -62
- package/src/icon/iconfont.css +211 -211
- package/src/index.js +24 -24
- package/src/locale/en_US.js +84 -84
- package/src/locale/index.js +14 -14
- package/src/locale/zh_CN.js +84 -84
package/README.md
CHANGED
@@ -1,3 +1,3 @@
|
|
1
|
-
#### 基于 Vue3 的 web 富文本编辑器,提供丰富的功能和精美的 UI
|
2
|
-
|
3
|
-
> 具体使用方法请参阅:[editify](https://www.ling0523.cn/editify/)
|
1
|
+
#### 基于 Vue3 的 web 富文本编辑器,提供丰富的功能和精美的 UI
|
2
|
+
|
3
|
+
> 具体使用方法请参阅:[editify](https://www.ling0523.cn/editify/start/)
|
package/examples/App.vue
CHANGED
@@ -1,90 +1,90 @@
|
|
1
|
-
<template>
|
2
|
-
<div style="padding: 100px 50px 50px 50px">
|
3
|
-
<editify v-model="value" placeholder="请输入正文内容..." allow-paste-html border @change="change" :menu="menuConfig" ref="editify"></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><span>这是一个基于 </span><span data-editify-code="true">Vue3 + alex-editor</span><span> 构建的一套</span><span style="font-weight: bold;">精美UI样式</span><span>的</span><span style="font-weight: bold;">开箱即用</span><span>的</span><span style="color: #ec1a0a;">富文本编辑器</span></p>',
|
13
|
-
menuConfig: {
|
14
|
-
sequence: {
|
15
|
-
alert: 100
|
16
|
-
},
|
17
|
-
table: {
|
18
|
-
maxRows: 20,
|
19
|
-
maxColumns: 20
|
20
|
-
},
|
21
|
-
sourceView: {
|
22
|
-
show: true
|
23
|
-
},
|
24
|
-
extends: {
|
25
|
-
alert: {
|
26
|
-
title: '自定义菜单按钮',
|
27
|
-
leftBorder: true,
|
28
|
-
rightBorder: false,
|
29
|
-
disabled: false,
|
30
|
-
active: false,
|
31
|
-
type: 'select',
|
32
|
-
options: [
|
33
|
-
{
|
34
|
-
label: '自定义功能1',
|
35
|
-
value: '1',
|
36
|
-
style: {
|
37
|
-
color: '#f30'
|
38
|
-
}
|
39
|
-
},
|
40
|
-
{
|
41
|
-
label: '自定义功能2',
|
42
|
-
value: '2',
|
43
|
-
style: {
|
44
|
-
fontWeight: 'bold'
|
45
|
-
}
|
46
|
-
},
|
47
|
-
{
|
48
|
-
label: '自定义功能3',
|
49
|
-
value: '3'
|
50
|
-
}
|
51
|
-
],
|
52
|
-
onOperate: function (name, val, instance) {
|
53
|
-
console.log(name, val, instance)
|
54
|
-
},
|
55
|
-
default: () => h('span', {}, '自定义菜单')
|
56
|
-
}
|
57
|
-
}
|
58
|
-
},
|
59
|
-
btn: null
|
60
|
-
}
|
61
|
-
},
|
62
|
-
mounted() {
|
63
|
-
// setTimeout(() => {
|
64
|
-
// this.value = '<p><br></p>'
|
65
|
-
// }, 3000)
|
66
|
-
},
|
67
|
-
methods: {
|
68
|
-
change() {
|
69
|
-
console.log(this.$refs.editify.textValue)
|
70
|
-
},
|
71
|
-
operate(name, val) {
|
72
|
-
console.log('触发operate事件', name, val)
|
73
|
-
}
|
74
|
-
}
|
75
|
-
}
|
76
|
-
</script>
|
77
|
-
<style lang="less">
|
78
|
-
html,
|
79
|
-
body {
|
80
|
-
height: 100%;
|
81
|
-
}
|
82
|
-
body {
|
83
|
-
margin: 0;
|
84
|
-
}
|
85
|
-
|
86
|
-
#app {
|
87
|
-
height: 100%;
|
88
|
-
overflow: auto;
|
89
|
-
}
|
90
|
-
</style>
|
1
|
+
<template>
|
2
|
+
<div style="padding: 100px 50px 50px 50px">
|
3
|
+
<editify v-model="value" placeholder="请输入正文内容..." allow-paste-html border @change="change" :menu="menuConfig" ref="editify"></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><span>这是一个基于 </span><span data-editify-code="true">Vue3 + alex-editor</span><span> 构建的一套</span><span style="font-weight: bold;">精美UI样式</span><span>的</span><span style="font-weight: bold;">开箱即用</span><span>的</span><span style="color: #ec1a0a;">富文本编辑器</span></p>',
|
13
|
+
menuConfig: {
|
14
|
+
sequence: {
|
15
|
+
alert: 100
|
16
|
+
},
|
17
|
+
table: {
|
18
|
+
maxRows: 20,
|
19
|
+
maxColumns: 20
|
20
|
+
},
|
21
|
+
sourceView: {
|
22
|
+
show: true
|
23
|
+
},
|
24
|
+
extends: {
|
25
|
+
alert: {
|
26
|
+
title: '自定义菜单按钮',
|
27
|
+
leftBorder: true,
|
28
|
+
rightBorder: false,
|
29
|
+
disabled: false,
|
30
|
+
active: false,
|
31
|
+
type: 'select',
|
32
|
+
options: [
|
33
|
+
{
|
34
|
+
label: '自定义功能1',
|
35
|
+
value: '1',
|
36
|
+
style: {
|
37
|
+
color: '#f30'
|
38
|
+
}
|
39
|
+
},
|
40
|
+
{
|
41
|
+
label: '自定义功能2',
|
42
|
+
value: '2',
|
43
|
+
style: {
|
44
|
+
fontWeight: 'bold'
|
45
|
+
}
|
46
|
+
},
|
47
|
+
{
|
48
|
+
label: '自定义功能3',
|
49
|
+
value: '3'
|
50
|
+
}
|
51
|
+
],
|
52
|
+
onOperate: function (name, val, instance) {
|
53
|
+
console.log(name, val, instance)
|
54
|
+
},
|
55
|
+
default: () => h('span', {}, '自定义菜单')
|
56
|
+
}
|
57
|
+
}
|
58
|
+
},
|
59
|
+
btn: null
|
60
|
+
}
|
61
|
+
},
|
62
|
+
mounted() {
|
63
|
+
// setTimeout(() => {
|
64
|
+
// this.value = '<p><br></p>'
|
65
|
+
// }, 3000)
|
66
|
+
},
|
67
|
+
methods: {
|
68
|
+
change() {
|
69
|
+
console.log(this.$refs.editify.textValue)
|
70
|
+
},
|
71
|
+
operate(name, val) {
|
72
|
+
console.log('触发operate事件', name, val)
|
73
|
+
}
|
74
|
+
}
|
75
|
+
}
|
76
|
+
</script>
|
77
|
+
<style lang="less">
|
78
|
+
html,
|
79
|
+
body {
|
80
|
+
height: 100%;
|
81
|
+
}
|
82
|
+
body {
|
83
|
+
margin: 0;
|
84
|
+
}
|
85
|
+
|
86
|
+
#app {
|
87
|
+
height: 100%;
|
88
|
+
overflow: auto;
|
89
|
+
}
|
90
|
+
</style>
|
package/examples/main.js
CHANGED
@@ -1,4 +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')
|
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')
|
package/lib/editify.es.js
CHANGED
@@ -16419,7 +16419,7 @@ const getMenuConfig = function(editTrans, editLocale) {
|
|
16419
16419
|
extends: {}
|
16420
16420
|
};
|
16421
16421
|
};
|
16422
|
-
const
|
16422
|
+
const Triangle_vue_vue_type_style_index_0_scoped_c7bb62b7_lang = "";
|
16423
16423
|
const _export_sfc = (sfc, props) => {
|
16424
16424
|
const target = sfc.__vccOpts || sfc;
|
16425
16425
|
for (const [key, val] of props) {
|
@@ -16509,8 +16509,8 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
|
|
16509
16509
|
}, null, 4)
|
16510
16510
|
], 12, _hoisted_1$c);
|
16511
16511
|
}
|
16512
|
-
const Triangle = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__scopeId", "data-v-
|
16513
|
-
const
|
16512
|
+
const Triangle = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__scopeId", "data-v-c7bb62b7"]]);
|
16513
|
+
const Layer_vue_vue_type_style_index_0_scoped_78f5589a_lang = "";
|
16514
16514
|
const _sfc_main$c = {
|
16515
16515
|
name: "Layer",
|
16516
16516
|
emits: ["update:modelValue", "show", "shown", "hidden"],
|
@@ -17139,8 +17139,8 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
|
|
17139
17139
|
_: 3
|
17140
17140
|
}, 8, ["name", "onEnter", "onAfterEnter", "onAfterLeave"]);
|
17141
17141
|
}
|
17142
|
-
const Layer = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c], ["__scopeId", "data-v-
|
17143
|
-
const
|
17142
|
+
const Layer = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c], ["__scopeId", "data-v-78f5589a"]]);
|
17143
|
+
const Tooltip_vue_vue_type_style_index_0_scoped_3b8ba3fe_lang = "";
|
17144
17144
|
const _sfc_main$b = {
|
17145
17145
|
name: "Tooltip",
|
17146
17146
|
props: {
|
@@ -17219,8 +17219,8 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
|
|
17219
17219
|
}, 8, ["modelValue", "node"])
|
17220
17220
|
], 34);
|
17221
17221
|
}
|
17222
|
-
const Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b], ["__scopeId", "data-v-
|
17223
|
-
const
|
17222
|
+
const Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b], ["__scopeId", "data-v-3b8ba3fe"]]);
|
17223
|
+
const Icon_vue_vue_type_style_index_0_scoped_c5a1759c_lang = "";
|
17224
17224
|
const _sfc_main$a = {
|
17225
17225
|
name: "Icon",
|
17226
17226
|
props: {
|
@@ -17236,8 +17236,8 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
|
|
17236
17236
|
class: normalizeClass(["editify-icon", "editify-icon-" + $props.value])
|
17237
17237
|
}, null, 2);
|
17238
17238
|
}
|
17239
|
-
const Icon = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a], ["__scopeId", "data-v-
|
17240
|
-
const
|
17239
|
+
const Icon = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a], ["__scopeId", "data-v-c5a1759c"]]);
|
17240
|
+
const Button_vue_vue_type_style_index_0_scoped_20160dd8_lang = "";
|
17241
17241
|
const _sfc_main$9 = {
|
17242
17242
|
name: "Button",
|
17243
17243
|
emits: ["operate", "layerShow", "layerShown", "layerHidden"],
|
@@ -17601,8 +17601,8 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
|
|
17601
17601
|
], 2)
|
17602
17602
|
]);
|
17603
17603
|
}
|
17604
|
-
const Button = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__scopeId", "data-v-
|
17605
|
-
const
|
17604
|
+
const Button = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__scopeId", "data-v-20160dd8"]]);
|
17605
|
+
const Checkbox_vue_vue_type_style_index_0_scoped_37d04875_lang = "";
|
17606
17606
|
const _sfc_main$8 = {
|
17607
17607
|
name: "Checkbox",
|
17608
17608
|
emits: ["update:modelValue", "change"],
|
@@ -17731,8 +17731,8 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
|
|
17731
17731
|
}, null, 8, _hoisted_3$7)) : createCommentVNode("", true)
|
17732
17732
|
], 2);
|
17733
17733
|
}
|
17734
|
-
const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8], ["__scopeId", "data-v-
|
17735
|
-
const
|
17734
|
+
const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8], ["__scopeId", "data-v-37d04875"]]);
|
17735
|
+
const Colors_vue_vue_type_style_index_0_scoped_efd4da01_lang = "";
|
17736
17736
|
const _sfc_main$7 = {
|
17737
17737
|
name: "Colors",
|
17738
17738
|
emits: ["change"],
|
@@ -17814,8 +17814,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
|
|
17814
17814
|
])
|
17815
17815
|
]);
|
17816
17816
|
}
|
17817
|
-
const Colors = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__scopeId", "data-v-
|
17818
|
-
const
|
17817
|
+
const Colors = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__scopeId", "data-v-efd4da01"]]);
|
17818
|
+
const Toolbar_vue_vue_type_style_index_0_scoped_6a227831_lang = "";
|
17819
17819
|
const _sfc_main$6 = {
|
17820
17820
|
name: "Toolbar",
|
17821
17821
|
emits: ["update:modelValue"],
|
@@ -19286,8 +19286,8 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
|
|
19286
19286
|
_: 1
|
19287
19287
|
}, 8, ["modelValue", "node", "onShow", "useRange"]);
|
19288
19288
|
}
|
19289
|
-
const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-
|
19290
|
-
const
|
19289
|
+
const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-6a227831"]]);
|
19290
|
+
const InsertLink_vue_vue_type_style_index_0_scoped_abb39368_lang = "";
|
19291
19291
|
const _sfc_main$5 = {
|
19292
19292
|
name: "InsertLink",
|
19293
19293
|
emits: ["insert"],
|
@@ -19397,8 +19397,8 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
|
|
19397
19397
|
])
|
19398
19398
|
]);
|
19399
19399
|
}
|
19400
|
-
const InsertLink = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5], ["__scopeId", "data-v-
|
19401
|
-
const
|
19400
|
+
const InsertLink = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5], ["__scopeId", "data-v-abb39368"]]);
|
19401
|
+
const InsertImage_vue_vue_type_style_index_0_scoped_69363d50_lang = "";
|
19402
19402
|
const _sfc_main$4 = {
|
19403
19403
|
name: "InsertImage",
|
19404
19404
|
emits: ["change", "insert"],
|
@@ -19608,8 +19608,8 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
|
|
19608
19608
|
]))
|
19609
19609
|
]);
|
19610
19610
|
}
|
19611
|
-
const InsertImage = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__scopeId", "data-v-
|
19612
|
-
const
|
19611
|
+
const InsertImage = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__scopeId", "data-v-69363d50"]]);
|
19612
|
+
const InsertVideo_vue_vue_type_style_index_0_scoped_249f2a7e_lang = "";
|
19613
19613
|
const _sfc_main$3 = {
|
19614
19614
|
name: "InsertVideo",
|
19615
19615
|
emits: ["change", "insert"],
|
@@ -19819,8 +19819,8 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
|
|
19819
19819
|
]))
|
19820
19820
|
]);
|
19821
19821
|
}
|
19822
|
-
const InsertVideo = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-
|
19823
|
-
const
|
19822
|
+
const InsertVideo = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-249f2a7e"]]);
|
19823
|
+
const InsertTable_vue_vue_type_style_index_0_scoped_1b7b51c8_lang = "";
|
19824
19824
|
const _sfc_main$2 = {
|
19825
19825
|
name: "InsertTable",
|
19826
19826
|
emits: ["insert"],
|
@@ -19903,7 +19903,7 @@ const _sfc_main$2 = {
|
|
19903
19903
|
}
|
19904
19904
|
}
|
19905
19905
|
};
|
19906
|
-
const _withScopeId = (n) => (pushScopeId("data-v-
|
19906
|
+
const _withScopeId = (n) => (pushScopeId("data-v-1b7b51c8"), n = n(), popScopeId(), n);
|
19907
19907
|
const _hoisted_1$2 = { class: "editify-table" };
|
19908
19908
|
const _hoisted_2$1 = ["onMouseenter", "onClick"];
|
19909
19909
|
const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", null, null, -1));
|
@@ -19933,8 +19933,8 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|
19933
19933
|
])
|
19934
19934
|
]);
|
19935
19935
|
}
|
19936
|
-
const InsertTable = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-
|
19937
|
-
const
|
19936
|
+
const InsertTable = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-1b7b51c8"]]);
|
19937
|
+
const Menu_vue_vue_type_style_index_0_scoped_9c105635_lang = "";
|
19938
19938
|
const _sfc_main$1 = {
|
19939
19939
|
name: "Menu",
|
19940
19940
|
props: {
|
@@ -21152,8 +21152,8 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
|
21152
21152
|
}), 256))
|
21153
21153
|
], 14, _hoisted_1$1);
|
21154
21154
|
}
|
21155
|
-
const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-
|
21156
|
-
const
|
21155
|
+
const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-9c105635"]]);
|
21156
|
+
const Editify_vue_vue_type_style_index_0_scoped_c1e25ea0_lang = "";
|
21157
21157
|
const _sfc_main = {
|
21158
21158
|
name: "editify",
|
21159
21159
|
props: { ...editorProps },
|
@@ -22750,7 +22750,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
22750
22750
|
])) : createCommentVNode("", true)
|
22751
22751
|
]);
|
22752
22752
|
}
|
22753
|
-
const Editify = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
22753
|
+
const Editify = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c1e25ea0"]]);
|
22754
22754
|
const iconfont = "";
|
22755
22755
|
const en_US = {
|
22756
22756
|
textWrapUp: "Up feed",
|
@@ -22929,7 +22929,7 @@ const i18n = (locale) => {
|
|
22929
22929
|
return translations[locale][key];
|
22930
22930
|
};
|
22931
22931
|
};
|
22932
|
-
const version = "0.0.
|
22932
|
+
const version = "0.0.25";
|
22933
22933
|
const install = (app, props) => {
|
22934
22934
|
const locale = (props ? props.locale : "zh_CN") || "zh_CN";
|
22935
22935
|
app.provide("$editTrans", i18n(locale));
|