aiknowledge-richtext v0.1.1

安装

yarn add aiknowledge-richtext

使用

// main.js 注册 tag 输入事件
import { Boot, tagModule } from 'aiknowledge-richtext';

Boot.registerModule(tagModule);

<template>
	<div>
		<div ref="editorRef"></div>
	</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';

import AiKnowledgeRichtext from '../lib/aiknowledge-richtext.esm';
import 'aiknowledge-richtext/lib/css/aiknowledge-richtext.min.css';

export default defineComponent({
	setup() {
		const tagList = [
			{ tagId: 1, tagName: '1231', latestUseTime: 1 },
			{ tagId: 2, tagName: '11232', latestUseTime: 2 },
			{ tagId: 3, tagName: '1112343', latestUseTime: 3 },
			{ tagId: 4, tagName: '哈哈哈哈4', latestUseTime: 4 },
			{ tagId: 5, tagName: '哈哈哈哈哈5', latestUseTime: 5 },
			{ tagId: 6, tagName: '1236', latestUseTime: 6 },
			{ tagId: 7, tagName: '11237', latestUseTime: 7 },
			{ tagId: 8, tagName: '1112348', latestUseTime: 8 },
			{ tagId: 9, tagName: '哈哈哈哈9', latestUseTime: 9 },
			{ tagId: 0, tagName: '哈哈哈哈哈0', latestUseTime: 0 },
		];

		let richtextInstance;
		const editorRef = ref();
		onMounted(() => {
			richtextInstance = new AiKnowledgeRichtext(editorRef.value, {
				tagList,
				onBlur(text: string) {
					console.log('🚀 ~ file: App.vue ~ line 34 ~ onBlur ~ text', text);
				},
			});
		});

		return {
			editorRef,
		};
	},
});
</script>