vue-editify 0.2.3 → 0.2.4
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/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 +14 -14
- package/src/components/checkbox/checkbox.less +13 -13
- package/src/components/colors/colors.less +8 -8
- package/src/components/insertImage/insertImage.less +10 -10
- package/src/components/insertLink/insertLink.less +6 -6
- package/src/components/insertTable/insertTable.less +4 -4
- package/src/components/insertVideo/insertVideo.less +10 -10
- package/src/components/layer/layer.less +5 -5
- package/src/components/menu/menu.less +7 -7
- package/src/components/toolbar/toolbar.less +7 -7
- 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/root.less +79 -0
- package/src/css/var.less +6 -0
- package/src/editify/editify.less +46 -45
- 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 +15 -15
- package/src/plugins/mathformula/insertMathformula/insertMathformula.less +6 -6
- package/vite.config.ts +1 -1
- 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>;
|