|
@@ -7,12 +7,12 @@ module.exports = { |
|
@@ -7,12 +7,12 @@ module.exports = { |
|
7
|
* @param {*} prefix
|
7
|
* @param {*} prefix
|
|
8
|
*/
|
8
|
*/
|
|
9
|
processStyle($, prefix) {
|
9
|
processStyle($, prefix) {
|
|
10
|
- let css = [];
|
10
|
+ let css = ['/* inlineStyle start */'];
|
|
11
|
|
11
|
|
|
12
|
$('*').each(function(index) {
|
12
|
$('*').each(function(index) {
|
|
13
|
let $this = $(this);
|
13
|
let $this = $(this);
|
|
14
|
let localStyle = $this.attr('style');
|
14
|
let localStyle = $this.attr('style');
|
|
15
|
- let className = `data-yoho-style-${prefix}-${index}`;
|
15
|
+ let className = `yoho-inline-style-${prefix}-${index}`;
|
|
16
|
|
16
|
|
|
17
|
if (localStyle) {
|
17
|
if (localStyle) {
|
|
18
|
css.push(`.${className}{${localStyle}}`);
|
18
|
css.push(`.${className}{${localStyle}}`);
|
|
@@ -28,19 +28,68 @@ module.exports = { |
|
@@ -28,19 +28,68 @@ module.exports = { |
|
28
|
* @param {*} $
|
28
|
* @param {*} $
|
|
29
|
*/
|
29
|
*/
|
|
30
|
processTag($) {
|
30
|
processTag($) {
|
|
|
|
31
|
+ let css = ['/* styleTag start */'];
|
|
|
|
32
|
+
|
|
|
|
33
|
+ // mip-anim
|
|
|
|
34
|
+ $('img[src*=".gif"]').each(function() {
|
|
|
|
35
|
+ let $this = $(this);
|
|
|
|
36
|
+ let mipAnim = `<mip-anim layout="responsive" width="350" height="263" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-anim>`; // eslint-disable-line
|
|
|
|
37
|
+
|
|
|
|
38
|
+ $this.replaceWith(mipAnim);
|
|
|
|
39
|
+ });
|
|
|
|
40
|
+
|
|
|
|
41
|
+ // mip-img
|
|
31
|
$('img').each(function() {
|
42
|
$('img').each(function() {
|
|
32
|
let $this = $(this);
|
43
|
let $this = $(this);
|
|
33
|
- let mipImg = `<mip-img layout="responsive" popup width="350" height="263" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-img>`; // eslint-disable-line
|
44
|
+ let mipImg = `<mip-img layout="responsive" width="350" height="263" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-img>`; // eslint-disable-line
|
|
34
|
|
45
|
|
|
35
|
$this.replaceWith(mipImg);
|
46
|
$this.replaceWith(mipImg);
|
|
36
|
});
|
47
|
});
|
|
|
|
48
|
+
|
|
|
|
49
|
+ // mip-video
|
|
|
|
50
|
+ $('video').each(function() {
|
|
|
|
51
|
+ let $this = $(this);
|
|
|
|
52
|
+ let mipVideo = `<mip-video layout="responsive" width="350" height="263" poster="${$this.attr('poster') || ''}" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-video>`; // eslint-disable-line
|
|
|
|
53
|
+
|
|
|
|
54
|
+ $this.replaceWith(mipVideo);
|
|
|
|
55
|
+ });
|
|
|
|
56
|
+
|
|
|
|
57
|
+ // mip-audio
|
|
|
|
58
|
+ $('audio').each(function() {
|
|
|
|
59
|
+ let $this = $(this);
|
|
|
|
60
|
+ let mipAudio = `<mip-audio src="${$this.attr('src')}"></mip-audio>`; // eslint-disable-line
|
|
|
|
61
|
+
|
|
|
|
62
|
+ $this.replaceWith(mipAudio);
|
|
|
|
63
|
+ });
|
|
|
|
64
|
+
|
|
|
|
65
|
+ // mip-iframe
|
|
|
|
66
|
+ $('iframe').each(function() {
|
|
|
|
67
|
+ let $this = $(this);
|
|
|
|
68
|
+ let mipIframe = `<mip-iframe layout="responsive" width="350" height="263" src="${$this.attr('src')}"></mip-iframe>`; // eslint-disable-line
|
|
|
|
69
|
+
|
|
|
|
70
|
+ $this.replaceWith(mipIframe);
|
|
|
|
71
|
+ });
|
|
|
|
72
|
+
|
|
|
|
73
|
+ // mip-link
|
|
37
|
$('a').each(function() {
|
74
|
$('a').each(function() {
|
|
38
|
let $this = $(this);
|
75
|
let $this = $(this);
|
|
39
|
- let mipLink = `<mip-link layout="responsive">${$this.html()}</mip-link>`; // eslint-disable-line
|
76
|
+ let mipLink = `<mip-link href="${$this.attr('href')}" title="${$this.attr('title') || ''}">${$this.html()}</mip-link>`; // eslint-disable-line
|
|
40
|
|
77
|
|
|
41
|
$this.replaceWith(mipLink);
|
78
|
$this.replaceWith(mipLink);
|
|
42
|
});
|
79
|
});
|
|
43
|
- return $.html();
|
80
|
+
|
|
|
|
81
|
+ // style
|
|
|
|
82
|
+ $('style').each(function() {
|
|
|
|
83
|
+ let $this = $(this);
|
|
|
|
84
|
+
|
|
|
|
85
|
+ css.push($this.html());
|
|
|
|
86
|
+ $this.remove();
|
|
|
|
87
|
+ });
|
|
|
|
88
|
+
|
|
|
|
89
|
+ return {
|
|
|
|
90
|
+ mipHtml: $.html(),
|
|
|
|
91
|
+ css: css.join('')
|
|
|
|
92
|
+ };
|
|
44
|
},
|
93
|
},
|
|
45
|
|
94
|
|
|
46
|
/**
|
95
|
/**
|
|
@@ -48,20 +97,18 @@ module.exports = { |
|
@@ -48,20 +97,18 @@ module.exports = { |
|
48
|
* @param {*} html HTML
|
97
|
* @param {*} html HTML
|
|
49
|
* @param {*} prefix CSS 前缀
|
98
|
* @param {*} prefix CSS 前缀
|
|
50
|
*/
|
99
|
*/
|
|
51
|
- process(html, prefix) {
|
|
|
|
52
|
- html = html || '';
|
|
|
|
53
|
- prefix = prefix || 0;
|
|
|
|
54
|
-
|
|
|
|
55
|
- let mipData = {};
|
|
|
|
56
|
-
|
100
|
+ process(html = '', prefix = 0) {
|
|
57
|
let $ = cheerio.load(html, {
|
101
|
let $ = cheerio.load(html, {
|
|
58
|
decodeEntities: false
|
102
|
decodeEntities: false
|
|
59
|
});
|
103
|
});
|
|
60
|
|
104
|
|
|
61
|
- mipData.css = this.processStyle($, prefix);
|
|
|
|
62
|
- mipData.mipHtml = this.processTag($);
|
105
|
+ let inlineStyle = this.processStyle($, prefix); // 必须先处理内联样式
|
|
|
|
106
|
+ let tagHtml = this.processTag($);
|
|
63
|
|
107
|
|
|
64
|
- return mipData;
|
108
|
+ return {
|
|
|
|
109
|
+ mipHtml: tagHtml.mipHtml,
|
|
|
|
110
|
+ css: tagHtml.css + inlineStyle
|
|
|
|
111
|
+ };
|
|
65
|
}
|
112
|
}
|
|
66
|
};
|
113
|
};
|
|
67
|
|
114
|
|
