富文本根据标题级别显示样式

src/views/book/courseware/preview/components/common/PreviewMixin.js

@@ -19,7 +19,7 @@ const mixin = {
       loader: false,
     };
   },
-  inject: ['getLang', 'getChinese', 'convertText', 'getTitleList'],
+  inject: ['getLang', 'getChinese', 'convertText'],
   props: {
     id: {
       type: String,

src/web_preview/index.vue

@@ -596,7 +596,7 @@ export default {
         ({ courseware_info }) => {
           this.courseware_info = { ...this.courseware_info, ...courseware_info };
           this.getLangList();
-        },
+        }
       );
     },
     /**
@@ -604,47 +604,86 @@ export default {
      * @param {string} id - 课件ID
      */
     getCoursewareComponentContent_View(id) {
-      ContentGetCoursewareContent_View({ id }).then(({ content, component_list, content_group_row_list }) => {
-        if (content) {
-          const _content = JSON.parse(content);
-          this.data = _content;
-          this.background = {
-            background_image_url: _content.background_image_url,
-            background_position: _content.background_position,
-          };
-        } else {
-          this.data = { row_list: [] };
-        }
+      ContentGetCoursewareContent_View({ id }).then(
+        ({ content, component_list, content_group_row_list, title_list }) => {
+          title_list = title_list || [];
+          if (content) {
+            const _content = JSON.parse(content);
+            this.data = _content;
+            this.background = {
+              background_image_url: _content.background_image_url,
+              background_position: _content.background_position,
+            };
+          } else {
+            this.data = { row_list: [] };
+          }
 
-        if (component_list) this.component_list = component_list;
-        this.component_list.forEach((x) => {
-          if (x.component_type === 'audio') {
-            let _c = JSON.parse(x.content);
-            let p = _c.property || {};
-            if (!p.file_name_display_mode) p.file_name_display_mode = 'true';
-            if (p.view_method === 'independent' && !p.style_mode) {
-              p.style_mode = 'middle';
-            }
-            if (!p.style_mode) p.style_mode = 'big';
-            if (p.view_method === 'icon') {
-              p.file_name_display_mode = 'false';
-              p.view_method = 'independent';
-              p.style_mode = 'small';
+          if (component_list) this.component_list = component_list;
+          this.component_list.forEach((x) => {
+            if (x.component_type === 'audio') {
+              let _c = JSON.parse(x.content);
+              let p = _c.property || {};
+              if (!p.file_name_display_mode) p.file_name_display_mode = 'true';
+              if (p.view_method === 'independent' && !p.style_mode) {
+                p.style_mode = 'middle';
+              }
+              if (!p.style_mode) p.style_mode = 'big';
+              if (p.view_method === 'icon') {
+                p.file_name_display_mode = 'false';
+                p.view_method = 'independent';
+                p.style_mode = 'small';
+              }
+
+              x.content = JSON.stringify(_c);
+            } else if (x.component_type === 'richtext') {
+              let _c = JSON.parse(x.content);
+              let p = _c.property || {};
+              let lev = Number(p.title_style_level);
+              if (p.is_title !== 'true' || lev < 1 || !_c.content) return;
+
+              let style = title_list.find((y) => y.level === lev) || {};
+              if (style && style.style) {
+                style = JSON.parse(style.style);
+                let c_text = _c.content;
+
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(c_text, 'text/html');
+                const body = doc.body;
+                const pElements = body.querySelectorAll('p');
+                this.processHtmlString(pElements, style);
+                _c.content = body.innerHTML;
+
+                x.content = JSON.stringify(_c);
+              }
             }
+          });
 
-            x.content = JSON.stringify(_c);
-          }
-        });
+          if (content_group_row_list) this.content_group_row_list = JSON.parse(content_group_row_list) || [];
+        }
+      );
+    },
+    processHtmlString(pElements, styleConfig, isClear) {
+      pElements.forEach((pElement) => {
+        if (isClear) {
+          pElement.removeAttribute('style');
+        } else {
+          const style = pElement.style;
 
-        if (content_group_row_list) this.content_group_row_list = JSON.parse(content_group_row_list) || [];
+          if (styleConfig.font) style.fontFamily = styleConfig.font;
+          if (styleConfig.font_size) style.fontSize = styleConfig.font_size;
+          if (styleConfig.text_color) style.color = styleConfig.text_color;
+
+          style.fontWeight = styleConfig.bold === 'true' ? 'bold' : 'normal';
+          style.fontStyle = styleConfig.italic === 'true' ? 'italic' : 'normal';
+          if (styleConfig.indent || styleConfig.indent == 0) style.marginLeft = styleConfig.indent + 'px';
+        }
       });
     },
-
     getLangList() {
       GetLanguageTypeList({ book_id: this.courseware_info.book_id, is_contain_zh: 'true' }).then(
         ({ language_type_list }) => {
           this.langList = language_type_list;
-        },
+        }
       );
     },
 
@@ -708,7 +747,7 @@ export default {
       this.$refs.courserware.handleResult(
         this.$refs.previewMain.scrollTop,
         this.$refs.previewMain.scrollLeft,
-        this.select_node,
+        this.select_node
       );
     },
 
@@ -1044,7 +1083,7 @@ export default {
           x.coursewareId === note.coursewareId &&
           x.blockId === note.blockId &&
           x.startIndex === note.startIndex &&
-          x.endIndex === note.endIndex,
+          x.endIndex === note.endIndex
       );
       if (old) {
         this.oldRichData = old;
@@ -1138,7 +1177,7 @@ export default {
           x.coursewareId === collect.coursewareId &&
           x.blockId === collect.blockId &&
           x.startIndex === collect.startIndex &&
-          x.endIndex === collect.endIndex,
+          x.endIndex === collect.endIndex
       );
       if (old) {
         this.$message({