vue3使用summernote

一、安装

npm install summernote-vue jquery summernote bootstrap @popperjs/core

二、summernoteEditor.vue

<template><div ref="editorRef"></div>
</template><script setup>
import {ref, onMounted, onBeforeUnmount, watch} from 'vue';
import $ from 'jquery';  // 直接导入 jQuery 并设置全局变量
window.$ = window.jQuery = $;// 使用 ES6 导入替代 require
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import 'summernote/dist/summernote.min.css';
import 'summernote/dist/summernote.min.js';
import 'summernote/dist/lang/summernote-zh-CN.js';const props = defineProps({modelValue: {type: String,default: ''}
});const emit = defineEmits(['update:modelValue', 'init', 'change']);
const editorRef = ref(null);
let summernoteInstance = null;
const { proxy } = getCurrentInstance();
onMounted(() => {// 合并默认配置和用户配置const mergedOptions = {lang: 'zh-CN',height: 800,fontNames: [//字体类型配置'宋体', '微软雅黑', '楷体', '黑体', '隶书', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New','Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande','Tahoma', 'Times New Roman', 'Verdana'],fontNamesIgnoreCheck: [//字体类型配置'宋体', '微软雅黑', '楷体', '黑体', '隶书', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New','Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande','Tahoma', 'Times New Roman', 'Verdana'],fontSize: ['8', '9', '10', '11', '12', '14', '16', '18', '24', '36', '48', '60', '72', '90'],toolbar: [// 字体样式['style', ['bold', 'italic', 'underline', 'clear']],// 字体类型['font', ['fontname']],// 字体大小['fontsize', ['fontsize']],// 字体颜色['color', ['color']],// 列表['para', ['ul', 'ol', 'paragraph']],// 表格['table', ['table']],// 插入['insert', ['link', 'picture', 'video']],// 视图['view', ['fullscreen', 'codeview', 'help']]],callbacks: {onChange: (contents) => {emit('update:modelValue', contents);emit('change', contents);},onImageUpload: (files) => {uploadImage(files[0]);}},placeholder: '请输入内容...'};// 初始化编辑器summernoteInstance = $(editorRef.value).summernote(mergedOptions);// 设置初始内容if (props.modelValue) {summernoteInstance.summernote('code', props.modelValue);}emit('init', summernoteInstance);
});// 监听外部内容变化并更新编辑器
watch(() => props.modelValue, (newValue) => {if (summernoteInstance && newValue !== summernoteInstance.summernote('code')) {summernoteInstance.summernote('code', newValue);}
});// 组件销毁前清理资源
onBeforeUnmount(() => {if (summernoteInstance) {summernoteInstance.summernote('destroy');summernoteInstance = null;}
});// 图片上传函数
const uploadImage = (file) => {proxy.$modal.loading("正在上传文件，请稍候...");const formData = new FormData();formData.append('file', file);// 调用后端API上传图片fetch(import.meta.env.VITE_APP_BASE_API + "/common/upload", {method: 'POST',body: formData}).then(response => response.json()).then(data => {if (data.url) {// 将图片插入编辑器const imgHtml = `<img src="${data.url}" alt="上传图片">`;console.log(imgHtml)console.log(summernoteInstance)summernoteInstance.summernote('code', summernoteInstance.summernote("code") + imgHtml);proxy.$modal.closeLoading();} else {alert('图片上传失败');}}).catch(error => {console.error('上传错误:', error);alert('网络错误，上传失败');});
};
</script>

三、使用

<SummernoteEditor :modelValue="form.content"/>import SummernoteEditor from '@/components/summernoteEditor.vue';