修改富文本

src/views/manager/index.vue

@@ -46,14 +46,20 @@ const editorOption= {
   modules:{
     toolbar: {
       container: [
-        ['bold', 'italic', 'underline', 'strike'],
+        ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
-        [{ header: 1 }, { header: 2 }],
+        ['blockquote', 'code-block'], //引用，代码块
-        [{ list: 'ordered' }, { list: 'bullet' }],
+        [{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
-        [{ indent: '-1' }, { indent: '+1' }],
+        [{'list': 'ordered'}, {'list': 'bullet'}], //列表
-        [{ color: [] }, { background: [] }],
+        [{'script': 'sub'}, {'script': 'super'}], // 上下标
-        [{ align: [] }],
+        [{'indent': '-1'}, {'indent': '+1'}], // 缩进
-        ['link', 'image'],
+        [{'direction': 'rtl'}], // 文本方向
-        ['clean'],
+        [{'size': ['small', false, 'large', 'huge']}], // 字体大小
+        [{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
+        [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
+        [{'font': []}], //字体
+        [{'align': []}], //对齐方式
+        ['clean'], //清除字体样式
+        ['image', 'video'] //上传图片、上传视频
       ],
       handlers: {
         image: imageHandler,
@@ -146,6 +152,7 @@ const fetchNews = async () => {
 // ----------------- 添加/编辑 -----------------
 const saveNews = async () => {
   try {
+    editingNews.content = quillInstance.value.root.innerHTML
     if (isEditing.value) {
       await updateNews(editingNews);
     } else {
@@ -169,6 +176,7 @@ const editNews = async (news) => {
       Object.assign(editingNews, data);
       isEditing.value = true;
       showForm.value = true;
+      quillInstance.value.clipboard.dangerouslyPasteHTML(editingNews.content)
     }
   } finally {
     loading.value = false;
@@ -242,6 +250,7 @@ function uploadImage(file) {
 
 onMounted(() => {
   fetchNews();
+  addNews();
 });
 </script>
 
@@ -302,7 +311,7 @@ onMounted(() => {
       </div>
       <label>内容简介: <textarea class="snapshot" v-model="editingNews.snapshot"></textarea></label><br />
       <label>内容:</label>
-      <quill-editor v-model:content="editingNews.content" content-type="delta" 
+      <quill-editor content-type="html" 
         theme="snow" style="height: 300px" :options="editorOption" @ready="onEditorReady"/>
       <label>状态:
         <select v-model="editingNews.status">