Open Teolone88 opened 3 years ago
Hi! I'm not positive I understand your question, so if what I say below doesn't address it, please let me know!
If you're just trying to access the raw HTML so you can download it, the documentation here covers that. I might suggest writeLines()
to save it as a file. That said, there is a bug when bolding and italicizing for the WYSIWYG editor (see #2). I'm working on a solution for that now, so if that's what the problem is, I (unfortunately) can't help yet.
Hi,
I am currently adopting a dirty replace with CSS to overcome the parsing, replacing "
" with ". Would be nice to have pre-defined styling for the table, quote and checkbox as otherwise would translate in respectively table without borders, indented sentence with no formatting and bullet point instead of checkboxes.Furthermore, the checkboxes when checked are not updated in input$mytext_markdown.
However, the "writeLines" can be a good suggestion instead of the "cat" function. I am still playing around and I will keep you posted in regards to some breakthroughs.
Best, https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo
Il giorno mer 10 mar 2021 alle ore 20:58 Jonathan D. Trattner < notifications@github.com> ha scritto:
Hi! I'm not positive I understand your question, so if what I say below doesn't address it, please let me know!
If you're just trying to access the raw HTML so you can download it, the documentation here https://github.com/jdtrat/shinymarkdown#accessing-the-editors-contents covers that. I might suggest writeLines() to save it as a file. That said, there is a bug when bolding and italicizing for the WYSIWYG editor (see #2 https://github.com/jdtrat/shinymarkdown/issues/2). I'm working on a solution for that now, so if that's what the problem is, I (unfortunately) can't help yet.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdtrat/shinymarkdown/issues/4#issuecomment-796000598, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIZV5F3FPIPXZBLR4HE2OD3TC66MNANCNFSM4Y56P5IA .
I'm not exactly sure what you mean. Do you want to take the HTML output from the editor and -- with the CSS styling already defined -- use it somewhere else?
For the checkboxes, they are updating on my end. Could you provide a reprex?
I also fixed #2, so if you are using the WYSIWYG editor, it should work better now.
Hi Jonathan,
I have fixed with later CSS as per your suggestion. However, the last thing that would enhance the package, would be picture resizing. Is there a place where I can read to fix this?
Best, https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo
Il giorno sab 13 mar 2021 alle ore 01:46 Jonathan D. Trattner < @.***> ha scritto:
I'm not exactly sure what you mean. Do you want to take the HTML output from the editor and -- with the CSS styling already defined -- use it somewhere else?
For the checkboxes, they are updating on my end. Could you provide a reprex?
I also fixed #2 https://github.com/jdtrat/shinymarkdown/issues/2, so if you are using the WYSIWYG editor, it should work better now.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdtrat/shinymarkdown/issues/4#issuecomment-797834235, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIZV5F2UY4XAFR66QGAYIH3TDKRWJANCNFSM4Y56P5IA .
Hi Teo!
I just looked into image resizing briefly and will see about implementing that feature. It's an open issue with the underlying JS library {shinymarkdown} packages, so I'm not sure whether or not we'd be able to implement that seamlessly. As discussed there, if you're using the markdown editor, you can always use HTML:
<img src="..." style="width:50%; height:50%; float:right;" />
Regarding your CSS fix, would you mind sharing an example of what you mean/what you did?
Thanks!
Hi Jonathan,
Within the DownloadHandler I am forcing some gsub with the followings:
output$print <- downloadHandler(
supply input$Export1 as an argument to customize the filename
filename = function(){ str <- "my_report.html" return(str) }, content = function(con){ tmp_html <- gsub("\"", "\'", paste0('<html>', '<head><style>blockquote {margin: 14px 0;border-left:
4px solid #e5e5e5;padding: 0 16px;color: #999;} ul li {cursor: pointer;position: relative;padding: 12px;list-style-type: none;transition: 0.2s;} .tui-editor-contents code {color: #c1798b;background-color:
f9f2f4;padding: 2px 3px;letter-spacing: -.3px;border-radius: 2px;} code
{padding: 2px 4px;font-size: 90%;color: #c7254e;background-color:
f9f2f4;border-radius: 4px;}',
'pre {display: block;padding: 9.5px;margin: 0 0
10px;font-size: 13px;line-height: 1.42857143;color: #333;word-break: break-all;word-wrap: break-word;background-color: #f5f5f5;border: 1px solid
ccc;border-radius: 4px;}',
'.tui-editor-contents table th {background-color:
555;font-weight: 300;color: #fff;padding-top: 6px;}',
'.tui-editor-contents table td, .tui-editor-contents
table th {border: 1px solid rgba(0,0,0,.1);padding: 5px 14px 5px 12px;height: 32px;}', '.tui-editor-contents :not(table) {line-height: 160%;box-sizing: content-box;} .tui-editor-contents .task-list-item:before {background-repeat: no-repeat;background-size: 18px 18px;background-position: 50%;content: "";margin-left: 0;margin-top: 0;border-radius: 0;height: 18px;width: 18px;position: absolute;left: 0;top: 1px;cursor: pointer;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR…xA0jxqEFJg4GCOhhGOgEESHg0jpMDAwRx8YQQuj0DlCaUAAEdBCPJ7TaEPAAAAAElFTkSuQmCC);}', '.tui-editor-contents ol>li:before, .tui-editor-contents ul>li:before {display: inline-block;position: absolute;}', '.tui-editor-contents .task-list-item {border: 0;list-style: none;padding-left: 24px;margin-left: -24px;}', 'table {display: table;border-collapse: separate;border-spacing: 2px;border-color: grey;}', '<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css/
', '', '
','Report',' ', '', '', input$report_html, '', '')) txt <- gsub("task=''>","task=''>", tmp_html) txt <- gsub(">", ">\n", HTML(txt))cat(txt, "text", file=con) }
)
However, in regards to the resizing I have found this option but I am not able to continue due to my lack of js /jquery knowledge.
If you can wrap the img in a div with the following class ".resize-drag" you can use the following js script to manipulate the image.
tags$script(type="text/javascript", src = "
js <- "interact('.resize-drag')
.resizable({ // resize from all edges and corners edges: { left: true, right: true, bottom: true, top: true },
listeners: { move (event) { var target = event.target var x = (parseFloat(target.getAttribute('data-x')) || 0) var y = (parseFloat(target.getAttribute('data-y')) || 0)
// update the element's style target.style.width = event.rect.width + 'px' target.style.height = event.rect.height + 'px' // translate when resizing from top or left edges x += event.deltaRect.left y += event.deltaRect.top target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px,' + y + 'px)' target.setAttribute('data-x', x) target.setAttribute('data-y', y) target.textContent = Math.round(event.rect.width) + '\u00D7' +
Math.round(event.rect.height) } }, modifiers: [ // keep the edges inside the parent interact.modifiers.restrictEdges({ outer: 'parent' }), // minimum size interact.modifiers.restrictSize({ min: { width: 100, height: 50 } }) ], inertia: true }) .draggable({ listeners: { move: window.dragMoveListener }, inertia: true, modifiers: [ interact.modifiers.restrictRect({ restriction: 'parent', endOnly: true }) ] })"
The problem is that
1) I am not able to automatically populate the div wrapper with that class name 2) Once the div is resized, the disappears and you need to reattach or re-upload it.
[image: image.png]
I have tried the followings but I am not able to make it work:
js2 <- "$(document).ready(function () {
$('.post img').wrap('
'); });"
js3 <- "var images = document.getElementsByTagName('img');
var mainpictureframe = document.getElementsByClass('.te-editor')[0]; var len = images.length; while (len--) { var wrapper = document.createElement('div'); var image = mainpictureframe.removeChild(images[0]); wrapper.appendChild(image); mainpictureframe.appendChild('<' + wrapper + ' class='resize-drag'>'); }"
I hope the above could be a start, but as I said before, I am a total n00b with js.
Your support would mean a lot to me.
Best, https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo
Il giorno sab 13 mar 2021 alle ore 18:35 Jonathan D. Trattner < @.***> ha scritto:
Hi Teo!
I just looked into image resizing briefly and will see about implementing that feature. It's an open issue https://github.com/nhn/tui.editor/issues/861 with the underlying JS library {shinymarkdown} packages, so I'm not sure whether or not we'd be able to implement that seamlessly. As discussed there, if you're using the markdown editor, you can always use HTML:
Regarding your CSS fix, would you mind sharing an example of what you mean/what you did?
Thanks!
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdtrat/shinymarkdown/issues/4#issuecomment-798675766, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIZV5F5CMZHMZ5DIDWGVJITTDOH4RANCNFSM4Y56P5IA .
Hi Jonathan,
I have managed to stick the pic in the resizable div but I still need to auto populate or rename the wrapping div with class="resize-drag" within the "#te-editor" container
[image: image.png]
I think this is an easy task for you. Could you facilitate my learning on this issue?
I will send you the reprex once fixed, so you can update your library.
Best, https://about.me/teolopiparo?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Teo Lo Piparo
Il giorno lun 15 mar 2021 alle ore 12:07 teo lo piparo < @.***> ha scritto:
Hi Jonathan,
Within the DownloadHandler I am forcing some gsub with the followings:
Here's the new code to help users download data
output$print <- downloadHandler(
supply input$Export1 as an argument to customize the filename
filename = function(){ str <- "my_report.html" return(str) }, content = function(con){ tmp_html <- gsub("\"", "\'", paste0('<html>', '<head><style>blockquote {margin: 14px
0;border-left: 4px solid #e5e5e5;padding: 0 16px;color: #999;} ul li {cursor: pointer;position: relative;padding: 12px;list-style-type: none;transition: 0.2s;} .tui-editor-contents code {color:
c1798b;background-color: #f9f2f4;padding: 2px 3px;letter-spacing:
-.3px;border-radius: 2px;} code {padding: 2px 4px;font-size: 90%;color:
c7254e;background-color: #f9f2f4;border-radius: 4px;}',
'pre {display: block;padding: 9.5px;margin: 0 0
10px;font-size: 13px;line-height: 1.42857143;color: #333;word-break: break-all;word-wrap: break-word;background-color: #f5f5f5;border: 1px solid
ccc;border-radius: 4px;}',
'.tui-editor-contents table th {background-color:
555;font-weight: 300;color: #fff;padding-top: 6px;}',
'.tui-editor-contents table td, .tui-editor-contents
table th {border: 1px solid rgba(0,0,0,.1);padding: 5px 14px 5px 12px;height: 32px;}', '.tui-editor-contents :not(table) {line-height: 160%;box-sizing: content-box;} .tui-editor-contents .task-list-item:before {background-repeat: no-repeat;background-size: 18px 18px;background-position: 50%;content: "";margin-left: 0;margin-top: 0;border-radius: 0;height: 18px;width: 18px;position: absolute;left: 0;top: 1px;cursor: pointer;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR…xA0jxqEFJg4GCOhhGOgEESHg0jpMDAwRx8YQQuj0DlCaUAAEdBCPJ7TaEPAAAAAElFTkSuQmCC);}', '.tui-editor-contents ol>li:before, .tui-editor-contents ul>li:before {display: inline-block;position: absolute;}', '.tui-editor-contents .task-list-item {border: 0;list-style: none;padding-left: 24px;margin-left: -24px;}', 'table {display: table;border-collapse: separate;border-spacing: 2px;border-color: grey;}', '<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css/
', '', '
','Report',' ', '', '', input$report_html, '', '
Hi,
I am quite struggling in finding a way to download the wyswug editor as the character string is hard to parse. Would you have any idea on how to download the content of the editor in a form of html or pdf file?
P.s. I have tried to pull the div but it comes out a .png that is hardly readable.
Thank you in advance.