vue-editify 0.2.3 → 0.2.5
Sign up to get free protection for your applications and to get access to all the features.
- package/examples/App.vue +35 -10
- package/lib/editify/editify.vue.d.ts +9 -0
- package/lib/editify/props.d.ts +4 -0
- package/lib/editify.es.js +29 -8
- package/lib/editify.umd.js +2 -2
- package/lib/index.d.ts +10 -1
- package/package.json +1 -1
- package/src/components/button/button.less +16 -16
- package/src/components/checkbox/checkbox.less +14 -14
- package/src/components/colors/colors.less +9 -9
- package/src/components/insertImage/insertImage.less +13 -13
- package/src/components/insertLink/insertLink.less +9 -9
- package/src/components/insertTable/insertTable.less +4 -4
- package/src/components/insertVideo/insertVideo.less +13 -13
- package/src/components/layer/layer.less +6 -6
- package/src/components/menu/menu.less +7 -7
- package/src/components/toolbar/toolbar.less +10 -10
- package/src/components/tooltip/tooltip.less +1 -1
- package/src/components/tooltip/tooltip.vue +4 -2
- package/src/components/triangle/triangle.less +11 -8
- package/src/css/hljs.less +8 -8
- package/src/css/var.less +81 -0
- package/src/editify/editify.less +56 -55
- package/src/editify/editify.vue +17 -0
- package/src/editify/props.ts +5 -0
- package/src/index.ts +3 -1
- package/src/plugins/attachment/insertAttachment/insertAttachment.less +19 -19
- package/src/plugins/mathformula/insertMathformula/insertMathformula.less +9 -9
- package/vite.config.ts +1 -2
- package/src/css/base.less +0 -32
package/examples/App.vue
CHANGED
@@ -1,13 +1,44 @@
|
|
1
1
|
<template>
|
2
2
|
<div style="padding: 10px; height: 100%; box-sizing: border-box">
|
3
|
-
<button @click="
|
4
|
-
<Editify color="#1098f3" ref="editify" border v-model="val" :menu="menuConfig" style="height: 100%" placeholder="Please Enter Text..." :toolbar="toolbarConfig" locale="zh_CN" allow-paste-html :plugins="plugins" @rangeupdate="rangeUpdate"></Editify>
|
3
|
+
<button @click="dark = !dark">{{ dark ? '浅色模式' : '深色模式' }}</button>
|
4
|
+
<Editify :dark="dark" color="#1098f3" ref="editify" border v-model="val" :menu="menuConfig" style="height: 100%" placeholder="Please Enter Text..." :toolbar="toolbarConfig" locale="zh_CN" allow-paste-html :plugins="plugins" @rangeupdate="rangeUpdate"></Editify>
|
5
5
|
</div>
|
6
6
|
</template>
|
7
7
|
<script setup lang="ts">
|
8
8
|
import { h, onMounted, ref } from 'vue'
|
9
9
|
import { AlexElement, MenuConfigType, Editify, attachment, PluginType, mathformula, ToolbarConfigType, getMatchElementByRange, panel, elementIsMatch, infoBlock } from '../src/index'
|
10
|
-
const val = ref<string>(
|
10
|
+
const val = ref<string>(`<h5><span>在传统HTML+JS+CSS项目中使用</span></h5><p><br></p><pre mvi-editor-element-key="8" mvi-hljs-language="" data-editify-element="10"><span class="editify-hljs-comment"><span><!-- HTML --></span></span><span>
|
11
|
+
</span><span class="editify-hljs-tag"><span><</span><span class="editify-hljs-name"><span>div</span></span><span> </span><span class="editify-hljs-attr"><span>id</span></span><span>=</span><span class="editify-hljs-string"><span>"app"</span></span><span>></span></span><span>
|
12
|
+
</span><span class="editify-hljs-tag"><span><</span><span class="editify-hljs-name"><span>editify</span></span><span> </span><span class="editify-hljs-attr"><span>v-model</span></span><span>=</span><span class="editify-hljs-string"><span>"value"</span></span><span> </span><span class="editify-hljs-attr"><span>placeholder</span></span><span>=</span><span class="editify-hljs-string"><span>"请输入"</span></span><span>></span></span><span class="editify-hljs-tag"><span></</span><span class="editify-hljs-name"><span>editify</span></span><span>></span></span><span>
|
13
|
+
</span><span class="editify-hljs-tag"><span></</span><span class="editify-hljs-name"><span>div</span></span><span>></span></span></pre><pre mvi-editor-element-key="71" mvi-hljs-language="" data-editify-element="82" data-editify-hljs="html"><span class="editify-hljs-comment"><span><!-- JS --></span></span><span>
|
14
|
+
</span><span class="editify-hljs-tag"><span><</span><span class="editify-hljs-name"><span>script</span></span><span>></span></span><span class="language-javascript"><span>
|
15
|
+
</span><span class="editify-hljs-keyword"><span>const</span></span><span> { createApp } = </span><span class="editify-hljs-title class_"><span>Vue</span></span><span>
|
16
|
+
</span><span class="editify-hljs-keyword"><span>const</span></span><span> app = </span><span class="editify-hljs-title function_"><span>createApp</span></span><span>({
|
17
|
+
</span><span class="editify-hljs-title function_"><span>data</span></span><span>(</span><span>){
|
18
|
+
</span><span class="editify-hljs-keyword"><span>return</span></span><span> {
|
19
|
+
</span><span class="editify-hljs-attr"><span>value</span></span><span>:</span><span class="editify-hljs-string"><span>'<p><br></p>'</span></span><span>
|
20
|
+
}
|
21
|
+
}
|
22
|
+
})
|
23
|
+
</span><span class="editify-hljs-variable language_"><span>console</span></span><span>.</span><span class="editify-hljs-title function_"><span>log</span></span><span>(editify.</span><span class="editify-hljs-property"><span>version</span></span><span>) </span><span class="editify-hljs-comment"><span>//查看版本号</span></span><span>
|
24
|
+
app.</span><span class="editify-hljs-title function_"><span>use</span></span><span>(editify)
|
25
|
+
app.</span><span class="editify-hljs-title function_"><span>mount</span></span><span>(</span><span class="editify-hljs-string"><span>'#app'</span></span><span>)
|
26
|
+
</span></span><span class="editify-hljs-tag"><span></</span><span class="editify-hljs-name"><span>script</span></span><span>></span></span></pre><p><br></p><p><br></p><h5><span>在 Vue3 的工程化项目中使用</span></h5><p><br></p><pre mvi-editor-element-key="153" data-editify-element="193" data-editify-hljs="javascript"><span class="editify-hljs-comment"><span>//vue-cli或者vite的main.js中</span></span><span>
|
27
|
+
</span><span class="editify-hljs-keyword"><span>import</span></span><span> { createApp } </span><span class="editify-hljs-keyword"><span>from</span></span><span> </span><span class="editify-hljs-string"><span>"vue"</span></span><span>
|
28
|
+
</span><span class="editify-hljs-keyword"><span>import</span></span><span> </span><span class="editify-hljs-title class_"><span>App</span></span><span> </span><span class="editify-hljs-keyword"><span>from</span></span><span> </span><span class="editify-hljs-string"><span>'./App.vue'</span></span><span>
|
29
|
+
</span><span class="editify-hljs-keyword"><span>import</span></span><span> editify,{ version } </span><span class="editify-hljs-keyword"><span>from</span></span><span> </span><span class="editify-hljs-string"><span>"vue-editify"</span></span><span>
|
30
|
+
</span><span class="editify-hljs-variable language_"><span>console</span></span><span>.</span><span class="editify-hljs-title function_"><span>log</span></span><span>(version) </span><span class="editify-hljs-comment"><span>//查看版本号"</span></span><span>
|
31
|
+
</span><span class="editify-hljs-keyword"><span>const</span></span><span> app = </span><span class="editify-hljs-title function_"><span>createApp</span></span><span>(</span><span class="editify-hljs-title class_"><span>App</span></span><span>)
|
32
|
+
app.</span><span class="editify-hljs-title function_"><span>use</span></span><span>(editify)
|
33
|
+
app.</span><span class="editify-hljs-title function_"><span>mount</span></span><span>(</span><span class="editify-hljs-string"><span>"#app"</span></span><span>)</span></pre><pre data-editify-element="294"><span class="editify-hljs-tag"><span><</span><span class="editify-hljs-name"><span>editify</span></span><span> </span><span class="editify-hljs-attr"><span>v-model</span></span><span>=</span><span class="editify-hljs-string"><span>"value"</span></span><span> </span><span class="editify-hljs-attr"><span>placeholder</span></span><span>=</span><span class="editify-hljs-string"><span>"请输入"</span></span><span>></span></span><span class="editify-hljs-tag"><span></</span><span class="editify-hljs-name"><span>editify</span></span><span>></span></span></pre><p><br></p><p><br></p><h5><span>局部注册</span></h5><p><br></p><p><span>vue-editify支持局部注册组件,你可以按照如下方式引入Editify组件再进行注册</span></p><pre data-editify-element="343"><span class="editify-hljs-keyword"><span>import</span></span><span> { </span><span class="editify-hljs-title class_"><span>Editify</span></span><span> } </span><span class="editify-hljs-keyword"><span>from</span></span><span> </span><span class="editify-hljs-string"><span>"vue-editify"</span></span><span>
|
34
|
+
</span><span class="editify-hljs-keyword"><span>export</span></span><span> </span><span class="editify-hljs-keyword"><span>default</span></span><span> {
|
35
|
+
</span><span class="editify-hljs-attr"><span>component</span></span><span>:{
|
36
|
+
</span><span class="editify-hljs-attr"><span>editify</span></span><span>: </span><span class="editify-hljs-title class_"><span>Editify</span></span><span>
|
37
|
+
}
|
38
|
+
}</span></pre><p><br></p><p><br></p><h5><span>读取版本号</span></h5><p><br></p><pre data-editify-element="398" data-editify-hljs="javascript"><span class="editify-hljs-keyword"><span>import</span></span><span> { version } </span><span class="editify-hljs-keyword"><span>from</span></span><span> </span><span class="editify-hljs-string"><span>"vue-editify"</span></span></pre><p><span>如果是浏览器直接引入js和css使用vue-editify的,则按照如下方法获取版本号</span></p><pre data-editify-element="415" data-editify-hljs="javascript"><span class="editify-hljs-keyword"><span>const</span></span><span> version = editify.</span><span class="editify-hljs-property"><span>version</span></span></pre><p><br></p><p><br></p><h5><span>获取AlexElement对象</span></h5><p><br></p><p><span>当你需要进行复杂的操作时,可能需要自行创建元素,则可以引入该对象</span></p><pre data-editify-element="436"><span class="editify-hljs-keyword"><span>import</span></span><span> { </span><span class="editify-hljs-title class_"><span>AlexElement</span></span><span> } </span><span class="editify-hljs-keyword"><span>from</span></span><span> </span><span class="editify-hljs-string"><span>"vue-editify"</span></span></pre><p><span>如果是浏览器直接引入js和css使用vue-editify的,则按照如下方法获取AlexElement对象</span></p><pre data-editify-element="458"><span class="editify-hljs-keyword"><span>const</span></span><span> </span><span class="editify-hljs-title class_"><span>AlexElement</span></span><span> = editify.</span><span class="editify-hljs-property"><span>AlexElement</span></span></pre><p><span>关于AlexElement对象的使用请参考:</span><a href="https://www.ling0523.cn/alex-editor/document/6" data-editify-element="475"><span>《AlexElement元素》</span></a></p><p><br></p><p><br></p><h5><span>进阶使用</span></h5><p><br></p><p><span>如果你想进行更多复杂的操作,vue-editify可能无法满足,但是你可以通过操作alex-editor的相关对象来达到目的</span></p><pre data-editify-element="490"><span class="editify-hljs-comment"><span>//获取AlexElement对象,这样可以构建元素实例</span></span><span>
|
39
|
+
</span><span class="editify-hljs-keyword"><span>import</span></span><span> { </span><span class="editify-hljs-title class_"><span>AlexElement</span></span><span> } </span><span class="editify-hljs-keyword"><span>from</span></span><span> </span><span class="editify-hljs-string"><span>"vue-editify"</span></span></pre><pre data-editify-element="514"><span class="editify-hljs-comment"><span>//获取AlexEditor实例,调用底层方法</span></span><span>
|
40
|
+
</span><span class="editify-hljs-keyword"><span>const</span></span><span> editor = </span><span class="editify-hljs-keyword"><span>this</span></span><span>.$refs.editify.editor</span></pre><pre data-editify-element="530" data-editify-hljs="javascript"><span class="editify-hljs-comment"><span>//通过AlexEditor实例来获取AlexRange实例</span></span><span>
|
41
|
+
</span><span class="editify-hljs-keyword"><span>const</span></span><span> range = </span><span class="editify-hljs-variable language_"><span>this</span></span><span>.</span><span class="editify-hljs-property"><span>$refs</span></span><span>.</span><span class="editify-hljs-property"><span>editify</span></span><span>.</span><span class="editify-hljs-property"><span>editor</span></span><span>?.</span><span class="editify-hljs-property"><span>range</span></span></pre><p><br></p><p><span>通过操作这些底层的对象,你可以实现一些比较自由的操作,但是你可能需要先去了解alex-editor:</span><a href="https://www.ling0523.cn/alex-editor/" data-editify-element="569"><span>alex-editor开发文档</span></a></p>`)
|
11
42
|
|
12
43
|
const editify = ref<InstanceType<typeof Editify> | null>(null)
|
13
44
|
const menuConfig = ref<MenuConfigType>({
|
@@ -26,7 +57,6 @@ const menuConfig = ref<MenuConfigType>({
|
|
26
57
|
const toolbarConfig = ref<ToolbarConfigType>({
|
27
58
|
use: true
|
28
59
|
})
|
29
|
-
|
30
60
|
const plugins = ref<PluginType[]>([
|
31
61
|
panel(),
|
32
62
|
mathformula(),
|
@@ -35,12 +65,7 @@ const plugins = ref<PluginType[]>([
|
|
35
65
|
leftBorder: true
|
36
66
|
})
|
37
67
|
])
|
38
|
-
|
39
|
-
const setStart = () => {
|
40
|
-
editify.value!.editor!.range!.anchor.moveToStart(editify.value!.editor!.stack[0])
|
41
|
-
editify.value!.editor!.range!.focus.moveToStart(editify.value!.editor!.stack[0])
|
42
|
-
editify.value!.editor!.rangeRender()
|
43
|
-
}
|
68
|
+
const dark = ref<boolean>(true)
|
44
69
|
|
45
70
|
const rangeUpdate = () => {
|
46
71
|
const element = getMatchElementByRange(editify.value!.editor!, editify.value!.dataRangeCaches, {
|
@@ -115,6 +115,10 @@ declare const _default: import('vue').DefineComponent<{
|
|
115
115
|
type: import('vue').PropType<import('../core/tool').PluginType[]>;
|
116
116
|
default: () => never[];
|
117
117
|
};
|
118
|
+
dark: {
|
119
|
+
type: BooleanConstructor;
|
120
|
+
default: boolean;
|
121
|
+
};
|
118
122
|
}, {
|
119
123
|
editor: import('vue').Ref<{
|
120
124
|
$el: HTMLElement;
|
@@ -688,6 +692,10 @@ declare const _default: import('vue').DefineComponent<{
|
|
688
692
|
type: import('vue').PropType<import('../core/tool').PluginType[]>;
|
689
693
|
default: () => never[];
|
690
694
|
};
|
695
|
+
dark: {
|
696
|
+
type: BooleanConstructor;
|
697
|
+
default: boolean;
|
698
|
+
};
|
691
699
|
}>> & {
|
692
700
|
onFocus?: ((...args: any[]) => any) | undefined;
|
693
701
|
onBlur?: ((...args: any[]) => any) | undefined;
|
@@ -727,5 +735,6 @@ declare const _default: import('vue').DefineComponent<{
|
|
727
735
|
renderRules: ((el: AlexElement) => void)[];
|
728
736
|
tab: boolean;
|
729
737
|
plugins: import('../core/tool').PluginType[];
|
738
|
+
dark: boolean;
|
730
739
|
}, {}>;
|
731
740
|
export default _default;
|
package/lib/editify/props.d.ts
CHANGED
@@ -126,5 +126,9 @@ export declare const EditifyProps: {
|
|
126
126
|
type: PropType<PluginType[]>;
|
127
127
|
default: () => never[];
|
128
128
|
};
|
129
|
+
dark: {
|
130
|
+
type: BooleanConstructor;
|
131
|
+
default: boolean;
|
132
|
+
};
|
129
133
|
};
|
130
134
|
export type EditifyPropsType = ExtractPublicPropTypes<typeof EditifyProps>;
|