uniapp或vue3项目适用的HTML在线编辑器AsaiEditor.vue

AsaiEditor.vue在线html编辑器

<script setup>
import {
    reactive, computed } from 'vue';

name: 'AsaiEditor';

const props = defineProps({
   
	modelValue: [String, Number],
	edittype: String,
	placeholder: String,
	id: {
    type: String, default: 'edit' },
	readOnly: {
   
		type: Boolean,
		default: false
	}
});

const emits = defineEmits(['update:modelValue']);

const asaiData = reactive({
   
	formats: {
   },
	readOnly: props.readOnly,
	editorHtml: null
});

function textToHtml(value) {
   
	if (asaiData.editorHtml) {
   
		asaiData.editorHtml.setContents({
   
			html: value,
			success(res) {
   }
		});
	}
}
function emitValue(value) {
   
	emits('update:modelValue', value);
}
function onFocus(e) {
   
	console.log(666.10011, e);
	emitValue(e.detail.html);
}
function onInput(e) {
   
	console.log(666.10012, e);
	emitValue(e.detail.html);
}
function onBlur(e) {
   
	console.log(666.10013, e);
	emitValue(e.detail.html);
}
function onReady() {
   
	uni.createSelectorQuery()
		.select('#' + props.id)
		.context(res => {
   
			asaiData.editorHtml = res.context;
			textToHtml(props.modelValue);
		})
		.exec();
}
function readOnlyChange() {
   
	asaiData.readOnly = !asaiData.readOnly;
}
function undo() {
   
	asaiData.editorHtml.undo();
}
function redo() {
   
	asaiData.editorHtml.redo();
}
function format(e) {
   
	console.log(666.20021, e);
	let {
    name, value } = e.target.dataset;
	if (!name) {
   
		return;
	}
	asaiData.editorHtml.format(name, value);
}
function onStatusChange(