Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 编辑器新增WordToHtml #967

Merged
merged 4 commits into from
Jul 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions conf/lang/en-us.ini
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,7 @@ private_blog_tips = Private blog, please enter password to access
print_text = Enable Printing

[doc]
word_to_html = Word to HTML
modify_doc = Modify Document
comparison = Comparison
save_merge = Save Merge
Expand Down
1 change: 1 addition & 0 deletions conf/lang/zh-cn.ini
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,7 @@ private_blog_tips = 加密文章,请输入密码访问
print_text = 开启打印

[doc]
word_to_html = Word转笔记
modify_doc = 修改文档
comparison = 文档比较
save_merge = 保存合并
Expand Down
2 changes: 1 addition & 1 deletion static/cherry/cherry-markdown.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
26 changes: 26 additions & 0 deletions static/js/cherry_markdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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'],
Expand All @@ -236,6 +261,7 @@ $(function () {
customMenuDName: customMenuD,
customMenuEName: customMenuE,
customMenuFName: customMenuF,
customMenuToolsName: customMenuTools,
},
},
drawioIframeUrl: '/static/cherry/drawio_demo.html',
Expand Down
13 changes: 13 additions & 0 deletions static/js/markdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -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];

Expand Down
100 changes: 100 additions & 0 deletions static/js/word-to-html.js
Original file line number Diff line number Diff line change
@@ -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});
}
}
Loading
Loading