feat: 编辑器新增WordToHtml (#967)

* feat: word转笔记(富文本html)
* fix: 本地化文件更新

static/cherry/cherry-markdown.css

@@ -2670,7 +2670,7 @@ div[data-type=codeBlock] .token.inserted {
 
 .cherry-dropdown {
   position: absolute;
-  width: 130px;
+  width: 140px;
   min-height: 40px;
   background: #fff;
   box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);

static/js/cherry_markdown.js

@@ -131,6 +131,30 @@ $(function () {
         onClick: showHistory,
     });
 
+    let customMenuTools =  Cherry.createMenuHook('工具',  {
+        iconName: '',
+        subMenuConfig: [
+            {
+                iconName: 'word',
+                name: 'Word转笔记',
+                onclick: ()=>{
+                    let converter = new WordToHtmlConverter();
+                    converter.handleFileSelect(function (response) {
+                        if (response.messages.length) {
+                            let messages = response.messages.map((item)=>{
+                                return item.message + "<br/>";
+                            }).join('\n');
+                            layer.msg(messages);
+                        }
+                        converter.replaceHtmlBase64(response.value).then((html)=>{
+                            window.editor.insertValue(html);
+                        });
+                    })
+                }
+            },
+        ]
+    });
+
 
     var basicConfig = {
         id: 'manualEditorContainer',
@@ -226,6 +250,7 @@ $(function () {
                 'switchModel',
                 'export',
                 'customMenuFName',
+                'customMenuToolsName'
             ],
             bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', 'ruby', '|', 'size', 'color'], // array or false
             sidebar: ['mobilePreview', 'copy', 'codeTheme', 'theme'],
@@ -236,6 +261,7 @@ $(function () {
                 customMenuDName: customMenuD,
                 customMenuEName: customMenuE,
                 customMenuFName: customMenuF,
+                customMenuToolsName: customMenuTools,
             },
         },
         drawioIframeUrl: '/static/cherry/drawio_demo.html',

static/js/markdown.js

@@ -436,6 +436,19 @@ $(function () {
 
             drawio.processMarkers(selStartLine, selEndLine)
             drawio.show()
+        } else if (name === 'wordToContent') {
+            let converter = new WordToHtmlConverter();
+            converter.handleFileSelect(function (response) {
+                if (response.messages.length) {
+                    let messages = response.messages.map((item)=>{
+                        return item.message + "<br/>";
+                    }).join('\n');
+                    layer.msg(messages);
+                }
+                converter.replaceHtmlBase64(response.value).then((html)=>{
+                    insertAndClearToMarkdown(html);
+                });
+            })
         } else {
             var action = window.editor.toolbarHandlers[name];
 

static/js/word-to-html.js

@@ -0,0 +1,100 @@
+
+class WordToHtmlConverter {
+
+    handleFileSelect(callback, accept = '.doc,.docx') {
+        let input = document.createElement('input');
+        input.type = 'file';
+        input.accept = accept;
+        input.onchange = (e)=>{
+            let file = e.target.files[0];
+            if (!file) {
+                return;
+            }
+            let reader = new FileReader();
+            reader.onload = (e)=>{
+                let arrayBuffer = e.target.result;
+                this.convertToHtml(arrayBuffer, (html)=>{
+                    callback(html);
+                });
+            };
+            reader.readAsArrayBuffer(file);
+        };
+        input.click();
+    }
+
+
+
+    convertToHtml(arrayBuffer, callback) {
+        try {
+            mammoth.convertToHtml({arrayBuffer: arrayBuffer}).then(callback, function(error) {
+                layer.msg('Error: ' + error);
+                return
+            });
+        } catch (error) {
+            layer.msg('Error: ' + error);
+            return
+        }
+    }
+
+    replaceHtmlBase64(html) {
+        let regex = /<img\s+src="data:image\/[^;]*;base64,([^"]*)"/g;
+        let matches = [];
+        let match;
+
+        while ((match = regex.exec(html)) !== null) {
+            matches.push(match[1]);
+        }
+
+        if (matches.length === 0) {
+            return new Promise((resolve, reject) => {
+                resolve(html);
+            });
+        }
+
+        // 将base64转为blob
+        let promises = matches.map((base64)=>{
+            return new Promise((resolve, reject)=>{
+                let blob = this.base64ToBlob(base64);
+                let reader = new FileReader();
+                reader.onload = (e)=>{
+                    resolve({base64, blob, url: e.target.result});
+                };
+                reader.readAsDataURL(blob);
+            });
+        });
+
+        return Promise.all(promises).then((results)=>{
+            let htmlCopy = html;
+            return Promise.all(results.map((result) => {
+                return this.uploadFile(result.blob).then((data) => {
+                    htmlCopy = htmlCopy.replace(`data:image/png;base64,${result.base64}`, data.url);
+                });
+            })).then(() => {
+                return htmlCopy;
+            });
+        });
+    }
+
+    uploadFile(blob) {
+        let file = new File([blob], 'image.jpg', { type: 'image/jpeg' });
+        let formData = new FormData();
+        formData.append('editormd-file-file', file);
+        return fetch(window.fileUploadURL, {
+            method: 'POST',
+            body: formData
+        })
+            .then(response => response.json())
+            .then(data => {return data})
+            .catch(error => {return error});
+    }
+
+
+    base64ToBlob(base64, type) {
+        let binary = atob(base64);
+        let array = [];
+        for (let i = 0; i < binary.length; i++) {
+            array.push(binary.charCodeAt(i));
+        }
+        return new Blob([new Uint8Array(array)], {type: type});
+    }
+}