vue-editify 0.2.15 → 0.2.17

package/examples/App.vue

@@ -4,8 +4,8 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { h, onMounted, ref, onErrorCaptured, computed, handleError } from 'vue'
-import { AlexElement, MenuConfigType, Editify, ToolbarConfigType, getMatchElementByRange, elementIsMatch, isRangeInQuote } from '../src/index'
+import { h, ref, onErrorCaptured } from 'vue'
+import { Editify } from '../src'
 
 onErrorCaptured(err => {
 	console.log(err)
@@ -13,7 +13,7 @@ onErrorCaptured(err => {
 
 const editifyRef = ref<InstanceType<typeof Editify> | null>(null)
 const dark = ref<boolean>(false)
-const menuConfig = ref<MenuConfigType>({
+const menuConfig = ref({
 	use: true,
 	mode: 'inner',
 	sequence: {
@@ -42,7 +42,7 @@ const menuConfig = ref<MenuConfigType>({
 	},
 	extends: {
 		dark: {
-			title: dark.value ? '浅色模式' : '深色模式',
+			title: '深色模式',
 			leftBorder: true,
 			active: dark.value,
 			default: () => h('span', dark.value ? '深色模式' : '浅色模式'),
@@ -52,41 +52,20 @@ const menuConfig = ref<MenuConfigType>({
 		}
 	}
 })
-const toolbarConfig = ref<ToolbarConfigType>({
+const toolbarConfig = ref({
 	use: true
 })
-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>&lt;!-- HTML --&gt;</span></span><span>
-</span><span class="editify-hljs-tag"><span>&lt;</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>&gt;</span></span><span>
-  </span><span class="editify-hljs-tag"><span>&lt;</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>&gt;</span></span><span class="editify-hljs-tag"><span>&lt;/</span><span class="editify-hljs-name"><span>editify</span></span><span>&gt;</span></span><span>
-</span><span class="editify-hljs-tag"><span>&lt;/</span><span class="editify-hljs-name"><span>div</span></span><span>&gt;</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>&lt;!-- JS --&gt;</span></span><span>
-</span><span class="editify-hljs-tag"><span>&lt;</span><span class="editify-hljs-name"><span>script</span></span><span>&gt;</span></span><span class="language-javascript"><span>
-  </span><span class="editify-hljs-keyword"><span>const</span></span><span> { createApp } = </span><span class="editify-hljs-title class_"><span>Vue</span></span><span>
-  </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 function_"><span>data</span></span><span>(</span><span>){
-        </span><span class="editify-hljs-keyword"><span>return</span></span><span> {
-            </span><span class="editify-hljs-attr"><span>value</span></span><span>:</span><span class="editify-hljs-string"><span>'&lt;p&gt;&lt;br&gt;&lt;/p&gt;'</span></span><span>
+const val = ref<string>(
+	`<div data-editify-info="true" style="background-color: rgba(3, 168, 243, 0.15); color: rgb(3, 168, 243);"><span>调用domRender方法会先对编辑器内的元素进行格式化处理，然后会更新编辑器dom内容，渲染到视图上</span></div><p><br></p><p><br></p><h5><span>如何规范化校验（格式化）？</span></h5><p><br></p><h5><span>null</span></h5><div data-editify-list="ul"><span>stack数组元素只能是block元素，同时block元素只会出现在根部，如果某个元素的子元素是block元素，那么该block元素会被转为inline元素或者inblock元素（对于被转为inblock的block元素，其行为值behavior为"block"）</span></div><div data-editify-list="ul"><span>inblock与其他元素不能同时存在于子元素数组中，如果某个元素的子元素数组中含有inblock元素，那么其他子元素也必然是inblock元素，否则该inblock元素会被转为inline元素</span></div><div data-editify-list="ul"><span>inblock元素的父元素必然是block元素或者inblock元素</span></div><div data-editify-list="ul"><span>换行符清除规则：换行符与其他元素不能同时存在，并且如果某个元素下存在多个换行符则会被清除为一个换行符</span></div><div data-editify-list="ul"><span>兄弟元素合并策略：相邻的两个文本元素的styles和marks相同则会被合并；相邻的两个行内元素的parsedom、styles和marks相同则会被合并（如果两个元素中有元素的locked属性为true则无法进行合并）</span></div><div data-editify-list="ul"><span>父子元素合并策略：父元素的子元素只有一个，并且该子元素是文本元素，父元素是parsedom==AlexElement.TEXT_NODE的行内元素，则子元素会父元素进行合并；父元素的子元素只有一个，inline元素、inblock元素如果与父元素的parsedom一致，marks和styles也一致，那么会与父元素合并（如果两个元素中有元素的locked属性为true则无法进行合并）</span></div><div data-editify-list="ul"><span>多个连续空白文本字符合并策略：文本元素内的空白文本值如果存在多个连续的情况下，会被合并成一个空白文本值</span></div><div data-editify-list="ul"><span>元素进行规范化处理时，会从stack依次进行遍历处理，当遍历子元素时，也是从第一个子元素开始依次遍历</span></div><p><br></p><blockquote><span>以上是编辑器内部的默认规范化处理规则，当然，编辑器对外提供了让我们自定义额外规则的能力，它便是AlexEditor的属性renderRules</span></blockquote><p><br></p><p><br></p><h5><span>使用renderRules自定义额外的规范化校验规则</span></h5><p><br></p><p><span>renderRules是一个数组，数组中可以定义多个函数，每个函数都会在调用formatElementStack方法时进行调用</span></p><pre data-editify-element="42" data-editify-hljs="javascript"><span class="editify-hljs-comment">//例如将&lt;b&gt;标签转为&lt;span&gt;标签</span><span>
+</span><span class="editify-hljs-keyword">const</span><span> parseCode = </span><span class="editify-hljs-keyword">function</span><span>(</span><span class="editify-hljs-params">element</span><span>){
+    </span><span class="editify-hljs-keyword">if</span><span> (element.</span><span class="editify-hljs-property">parsedom</span><span> == </span><span class="editify-hljs-string">'b'</span><span>) {
+        element.</span><span class="editify-hljs-property">parsedom</span><span> = </span><span class="editify-hljs-string">'span'</span><span>
+        element.</span><span class="editify-hljs-property">styles</span><span> = {
+             </span><span class="editify-hljs-string">'font-weight'</span><span>:</span><span class="editify-hljs-string">'bold'</span><span>
         }
-    }
-  })
-  </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>
-  app.</span><span class="editify-hljs-title function_"><span>use</span></span><span>(editify)
-  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></span><span class="editify-hljs-tag"><span>&lt;/</span><span class="editify-hljs-name"><span>script</span></span><span>&gt;</span></span></pre><p><br></p><p><br></p><h5><span>在&nbsp;Vue3&nbsp;的工程化项目中使用</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>
-</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>
-</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>
-</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>
-</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>
-</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>)
-app.</span><span class="editify-hljs-title function_"><span>use</span></span><span>(editify)
-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>&lt;</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>&gt;</span></span><span class="editify-hljs-tag"><span>&lt;/</span><span class="editify-hljs-name"><span>editify</span></span><span>&gt;</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>
-</span><span class="editify-hljs-keyword"><span>export</span></span><span> </span><span class="editify-hljs-keyword"><span>default</span></span><span> {
-    </span><span class="editify-hljs-attr"><span>component</span></span><span>:{
-        </span><span class="editify-hljs-attr"><span>editify</span></span><span>: </span><span class="editify-hljs-title class_"><span>Editify</span></span><span>
-    }
-}</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>
-</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>
-</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>
-</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>`)
+    }
+}</span></pre>`
+)
 </script>
 <style lang="less">
 html,

package/lib/editify/editify.vue.d.ts

@@ -489,7 +489,6 @@ declare const _default: import('vue').DefineComponent<{
         insertText: (data: string) => void;
         insertParagraph: () => void;
         insertElement: (ele: AlexElement, cover?: boolean | undefined) => void;
-        formatElementStack: () => void;
         domRender: (unPushHistory?: boolean | undefined) => void;
         rangeRender: () => Promise<void>;
         parseHtml: (html: string) => AlexElement[];