更新

@@ -7,12 +7,12 @@ module.exports = {
      * @param {*} prefix
      */
     processStyle($, prefix) {
-        let css = [];
+        let css = ['/* inlineStyle start */'];
 
         $('*').each(function(index) {
             let $this = $(this);
             let localStyle = $this.attr('style');
-            let className = `data-yoho-style-${prefix}-${index}`;
+            let className = `yoho-inline-style-${prefix}-${index}`;
 
             if (localStyle) {
                 css.push(`.${className}{${localStyle}}`);
@@ -28,19 +28,68 @@ module.exports = {
      * @param {*} $
      */
     processTag($) {
+        let css = ['/* styleTag start */'];
+
+        // mip-anim
+        $('img[src*=".gif"]').each(function() {
+            let $this = $(this);
+            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
+
+            $this.replaceWith(mipAnim);
+        });
+
+        // mip-img
         $('img').each(function() {
             let $this = $(this);
-            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
+            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
 
             $this.replaceWith(mipImg);
         });
+
+        // mip-video
+        $('video').each(function() {
+            let $this = $(this);
+            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
+
+            $this.replaceWith(mipVideo);
+        });
+
+        // mip-audio
+        $('audio').each(function() {
+            let $this = $(this);
+            let mipAudio = `<mip-audio src="${$this.attr('src')}"></mip-audio>`; // eslint-disable-line
+
+            $this.replaceWith(mipAudio);
+        });
+
+        // mip-iframe
+        $('iframe').each(function() {
+            let $this = $(this);
+            let mipIframe = `<mip-iframe layout="responsive" width="350" height="263" src="${$this.attr('src')}"></mip-iframe>`; // eslint-disable-line
+
+            $this.replaceWith(mipIframe);
+        });
+
+        // mip-link
         $('a').each(function() {
             let $this = $(this);
-            let mipLink = `<mip-link layout="responsive">${$this.html()}</mip-link>`; // eslint-disable-line
+            let mipLink = `<mip-link href="${$this.attr('href')}" title="${$this.attr('title') || ''}">${$this.html()}</mip-link>`; // eslint-disable-line
 
             $this.replaceWith(mipLink);
         });
-        return $.html();
+
+        // style
+        $('style').each(function() {
+            let $this = $(this);
+
+            css.push($this.html());
+            $this.remove();
+        });
+
+        return {
+            mipHtml: $.html(),
+            css: css.join('')
+        };
     },
 
     /**
@@ -48,20 +97,18 @@ module.exports = {
      * @param {*} html HTML
      * @param {*} prefix  CSS 前缀
      */
-    process(html, prefix) {
-        html = html || '';
-        prefix = prefix || 0;
-
-        let mipData = {};
 
+    process(html = '', prefix = 0) {
         let $ = cheerio.load(html, {
             decodeEntities: false
         });
+        let inlineStyle = this.processStyle($, prefix); // 必须先处理内联样式
+        let tagHtml = this.processTag($);
 
-        mipData.css = this.processStyle($, prefix);
-        mipData.mipHtml = this.processTag($);
-
-        return mipData;
+        return {
+            mipHtml: tagHtml.mipHtml,
+            css: tagHtml.css + inlineStyle
+        };
     }
 };