|
|
@@ -77,53 +77,11 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
- const processHtmlString = this.processHtmlString;
|
|
|
- const cList = this.componentList || [];
|
|
|
- cList.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') {
|
|
|
- if (!processHtmlString) return;
|
|
|
- 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 = this.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');
|
|
|
- processHtmlString(pElements, style);
|
|
|
- _c.content = body.innerHTML;
|
|
|
-
|
|
|
- x.content = JSON.stringify(_c);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
return {
|
|
|
background: this.bookBackground.length > 0 ? JSON.parse(this.bookBackground) : {},
|
|
|
groupRowList: this.contentGroupRowList.length > 0 ? JSON.parse(this.contentGroupRowList) : [],
|
|
|
data: this.content.length > 0 ? JSON.parse(this.content) : { row_list: [] },
|
|
|
- cList,
|
|
|
+ cList: this.handleComponentList(),
|
|
|
curSelectId: this.id,
|
|
|
isTrue,
|
|
|
sidebarShow: true,
|
|
|
@@ -150,6 +108,44 @@ export default {
|
|
|
return buildCoursewareStyle(this.background, 'commonPreview');
|
|
|
},
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ componentList: {
|
|
|
+ handler(newVal) {
|
|
|
+ if (newVal && newVal.length > 0) {
|
|
|
+ this.cList = this.handleComponentList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ bookBackground: {
|
|
|
+ handler(newVal) {
|
|
|
+ if (newVal && newVal.length > 0) {
|
|
|
+ this.background = JSON.parse(newVal);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ content: {
|
|
|
+ handler(newVal) {
|
|
|
+ if (newVal && newVal.length > 0) {
|
|
|
+ this.data = JSON.parse(newVal);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ contentGroupRowList: {
|
|
|
+ handler(newVal) {
|
|
|
+ if (newVal && newVal.length > 0) {
|
|
|
+ this.groupRowList = JSON.parse(newVal);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ id: {
|
|
|
+ handler(newVal) {
|
|
|
+ if (newVal && newVal.length > 0) {
|
|
|
+ this.curSelectId = newVal;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
backTop() {
|
|
|
this.$refs.previewMain.scrollTo({
|
|
|
@@ -163,6 +159,51 @@ export default {
|
|
|
return text;
|
|
|
},
|
|
|
|
|
|
+ handleComponentList() {
|
|
|
+ const processHtmlString = this.processHtmlString;
|
|
|
+ const cList = this.componentList || [];
|
|
|
+ cList.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') {
|
|
|
+ if (!processHtmlString) return;
|
|
|
+ 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 = this.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');
|
|
|
+ processHtmlString(pElements, style);
|
|
|
+ _c.content = body.innerHTML;
|
|
|
+
|
|
|
+ x.content = JSON.stringify(_c);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return cList;
|
|
|
+ },
|
|
|
+
|
|
|
processHtmlString(pElements, styleConfig, isClear = false) {
|
|
|
const _pElements = pElements || [];
|
|
|
_pElements.forEach((pElement) => {
|