I will try to display the Email content using React. Sometime, I found that there is not closing HTML available.
Currently:
I am setting the HTML content using dangerouslySetInnerHTML() method
<div
dangerouslySetInnerHTML={{
__html: this.state.single_mail_data.message
}}
/>
I also find react-render-html package from the Internet. But, Somehow, I have no permission to install any package.
Can anybody help me to display that broken HTML in react?
Thanks
I found a workaround, it's not perfect but at least it wont raise errors, you can put the broken html into an iframe srcDoc:
<iframe title="test" srcDoc="<html><body>Hello, <b><a href='#'>world</b>" />
Since it's not fully supported on all browser make sure to add html5 srcdoc-polyfill.
Seeing to that would be the CLOSING tag of you string isn't a solution such as checking for the pressence of the desired string justified?
if(!this.state.single_mail_data.message.includes("</html>")){
this.setState(
{
single_mail_data : {
...this.state.single_mail_data,
message : message += "</html>"
}
}
});
}
Related
I am currently setting up a storybook project. One aspect of it, is showing the various icons we have as a part of the style guide. I am using svg-sprite to create a JSON file of all the svg's we have (along with the svg symbols sprite) so that I can show all the svg's.
For the life of me, I can't figure out why I can't render the svg's without a terrible hack.
This is the code:
<div class="c-styleguide-icons o-grid-template o-grid-template--small-cells o-grid-gap">
${ Object.entries(IconSvgs.allSvgs).map(([key, value]) => value.id === "empty" ? html``: html `
<div class="c-card-icon" title="${value.id}">
<div class="o-ratio">
<div class="o-ratio__content c-card-icon__wrapper">
<!-- ${value.id} -->
<svg class="c-card-icon__svg svg-${value.id}-dims">
<use xlink:href="svg/svg-symbols.svg#${value.id}"></use>
</svg>
</div>
</div>
<div class="c-card-icon__body">${value.id}</div>
</div>
`)}
</div>
The problem lies in my tag within my svg. When I set the id using my JSON file, it doesn't work. When I set it hardcoded, it does. It isn't a faulty naming issue either.
The bizarre thing is, I have tried a lot of things, and I saw that simply repasting the HTML back into my browser, got it to work. Thats why I have this very ugly piece of hacky code within the template now:
<script>
const main = document.querySelector("main");
const innerHtml = main.innerHTML;
main.innerHTML = "";
main.innerHTML = innerHtml;
</script>
And this solves the issue... but I'd rather not have this in there. It just seems that during initial rendering, my svg-symbols file is not being downloaded. I don't see it appearing in the networks tab. When repasting the HTML, only then do I see it appear. Whats causing this, anyone an idea? A timing issue or something? But I can't understand why... is the ${value.id} being inserted at a later time than the actual html? I would imagine its being constructed at the same time?
Any tips are welcome.
I am kind of a starter in html, css and javascript and I am trying to remove a plain script in html with no source file via a WebExtension, probably with javascript but I can't find the solution to my problem.I have looked everywhere in Stack Exchange and other simmilar blogs and forums but nothing worked
HTML Code:
<script>
const SUPPORT_BASE = "https://support.aternos.org/hc/";
const SUPPORT_ARTICLES = {"countdown":360026950972,"uploadworld":360027235751,"connect":360026805072,"size":360035144691,"adb lock":360034748092,"email":360039498492,"pending":360041686352,"domains":360044623491,"deprecated":360033339752,"backups":360044837012};
</script>
I'm lost.Please help me.And the total HTML element is:
<header class="header" style="">
<script>
const SUPPORT_BASE = "https://support.aternos.org/hc/";
const SUPPORT_ARTICLES = {"countdown":360026950972,"uploadworld":360027235751,"connect":360026805072,"size":360035144691,"adblock":360034748092,"email":360039498492,"pending":360041686352,"domains":360044623491,"deprecated":360033339752,"backups":360044837012};
</script>
</header>
Please help me.
The website is https://aternos.org/server/
Please define what you mean with "remove". If you just want to remove the script from the html file just remove the script text?
If you are trying to write code that will remove it when the code is running please provide the js aswell. Wont be hard with some DOM manipulation.
I am using Javascript to input an embed tag to my HTML to display a pdf. The object takes up space but doesn't display anything and is essentially invisible. I tried putting it inside an object tag as well but it doesn't work.
// Invisible
var pdfObj = document.createElement("embed");
pdfObj.setAttribute("src", "./test.pdf");
content?.appendChild(pdfObj);
The pdf file does exist and when I simply put this code in the HTML it displays fine but doesn't when I use javascript.
// works fine
<div class="content" id="main_div">
<embed src="../test.pdf" width="500" height="375" />
</div>
Here is how it shows on the HTML when I use Javascript:
Embed Screenshot
Thanks!
Firstly, welcome to Stackoverflow. You need to make clear pathway in javascript.
`pdfObj.setAttribute("src", "./test.pdf");` this is your code.
`pdfObj.setAttribute("src", "../test.pdf");` this is what it needs to be.
and
try firstly create the element. You just gave a name to document.createElement("embed"). So firstly create it then setAttribute. After that it will work
If this won't work let me hear. I will help as possible as i can
I have a pretty good understanding of HTML & CSS, but I am having trouble with the Tag Page feature of tumblr. On my blog for every tagpage, I have a heading being grabbed from the name of the tag. I do not want to change the URL. I want to change the heading on the page, but that heading is being grabbed from the {tag}. The tag is vld. Instead of the page saying vld, I want it to say "All Designs". Pretty much overriding the {tag} for just the /tagged/vld tagpage. The TagPage code is:
{block:TagPage}
<div class="tagtitle">{tag}s</div>
{/block:TagPage}
For /tagged/vld, I want the heading on the page to be "All Designs" instead of "vld". how can I make this change for this specific tagpage?
I have tried
{block:TagPage}
<div class="tag" id="{Tag}">All Designs</div>
{/block:TagPage}
My code being:
{block:TagPage}
<div class="tagtitle" id="vld">All Designs</h2>
{/block:TagPage}
I have also tried
<script>
switch(window.location.pathname) {
case "/tagged/vld":
$('.tagtitle').text('All Designs');
break;
}
});
</script>
But neither of the methods have worked - everything is still showing the tag as the heading. You can see my blog at vintagelovedesigns.tumblr.com
OK, I have a test version working here using one of your themes:
https://madox-test.tumblr.com/tagged/vld
Your switch statement should be throwing an error as you have an additional closing bracket.
The script should look like this:
<script type="text/javascript">
$(document).ready(function(){ // if you are using jquery it is a good idea
// to wrap code in a document ready function
switch(window.location.pathname) {
case "/tagged/vld":
$('.tagtitle').text('All Designs');
break;
};
});
</script>
Hope this helps.
Describing a scenario:
I am going through the code mentioned below.B asically I am trying to figure out how to program so that
when a user clicks on "Use Template" button , it gets inserted into an editor.
Page 1:
There are lot of templates present
When a user clicks on the "Use Template" button on , it gets inserted into an editor that is present in
the next page (Page 2).
Please find the code snippet below for the first two templates I am going through:
<div id="templatesWrap">
<div class="template" data-templatelocation="templateone" data-templatename="Template ONE" data-templateid="" >
<div class="templateContainer">
<span>
<a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templateone&sHubId=&goalComplete=200" title="Use Template">
<img class="thumbnail" src="templatefiles/thumbnail_010.jpg" alt="templateone">
</a>
</span>
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
</div>
</div>
<div class="template" data-templatelocation="templatetwo" data-templatename="Template TWO" data-templateid="" >
<div class="templateContainer">
<span>
<a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templatetwo&sHubId=&goalComplete=200" title="Use Template">
<img class="thumbnail" src="templatefiles/thumbnail_011.jpg" alt="templatetwo">
</a>
</span>
<div class="templateName">Template TWO</div>
<p>
Use Template
</p>
</div>
</div>
And so on ....
How does the link "https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templatetwo&sHubId=&goalComplete=200" is inserting the template into the editor which is located on the next page? I haven't understood the token part and lot's of ID's present in the link
which I think are thereason behind inserting the template.
Has anyone come across such link before? Please advise.
Thanks
MORE CLARIFICATIONS:
Thanks for your answer.It did help me somewhat. I have few more questions:
Basically, I am using TinyMCE 4.0.8 version as my editor. The templates, I am using are from here:
https://github.com/mailchimp/email-blueprints/blob/master/templates/2col-1-2-leftsidebar.html
Some questions based on "Tivie" answer.
1) As you can see in the code for "2col-1-2-leftsidebar.html " it's not defined inside <div> tags unlike you defined it in <div> tags. Do you think that I can still
use it using "2col-1-2-leftsidebar.html " name?
2)I believe,for explanation purpose, you have included
`"<div contenteditable="true" id="myEditor">replaced stuff</div>`
and
<button id="btn">Load TPL</button>
<script>
$("#btn").click(function() {
$("#myEditor").load("template.html");
});
</script>
in the same page. Am I right? ( I understand you were trying to make an educated guess here, hence
just asking :) )
In my case, I have a separate page, where I have written code for buttons just like you wrote in editor.html like the following:
<button id="btn">Load TPL</button>. My button is defined inside <div class="templateContainer">.
Also, my templates are defined in a separate folder. So, I will have to grab the content(HTML Template), from
that folder and then insert into TinyMCE 4.08 editor. (Looks like two step process). Could you elaborate
on how should I proceed here?
More Question As of Dec 27
I have modifier my code for the template as follows:
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
Please note, I have added an additional id attribute for the following purpose.
If I go by the answer mentioned in the Tivia's post, is the following correct?
<script>
$("#temp1").click(function() {
$("#sTextBody").load("FolderURL/template.html");
});
</script>
My editor is defined like the following on Page 2 (Editor Page).
<div class="field">
<textarea id="sTextBody" name="sTextBody" style="width:948px; max-width:948px; height: 70%"></textarea>
</div>
I am confused, like, the script tag I have defined is in Page 1 where I have defined all the template related code
and the Page 2(Editor) page is a different page. It's simply taking me to Editor page (Page 2) and hence not working.
Please advise where I am wrong.
Thanks
MORE QUESTIONS AS of Jan 2
The problem Iam facing is as follows. Basically, for first template , I have the following code.
Code Snippet #1 where "Use "Template" button is present:
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
And the function suggested in the answer is as follows:
Code Snippet #2 where Editor is present:
<script>
$("#temp1").click(function() {
$("#sTextBody").load("FolderURL/template.html");
});
</script>
Since, I believe I first need to reach to that page after user clicks on "Use Template" button, where the editor is located, I have defined Code Snippet #1 on Page 1 and have defined the Code Snippet #2 and <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> as the very first two script tags in the Page 2 ( Editor Page). But still when I click on "User Template" button on Page 1, it's just letting me to next page and not loading the template into the editor.
Am I doing something wrong here? Please advise.
P.S. The problem I feel is somehow the click function on Page 2 is not getting activated with the temp1 id button mentioned on Page 1.
Thanks
Well, one can only guess without having access to the page itself (and it's source code). I can, however, make an educated guess on how it works.
The URL params follows a pattern. First you have a token that is equal in all templates. This probably means the token does not have any relevance to the template mechanism itself. Maybe it's an authentication token or something. Not relevant though.
Then you have the template identification (templateOne, templateTwo, etc...) followed by a HubId that is empty. Lastly you have a goalComplete=200 which might correspond to the HTTP success code 200 (OK).
Based on this, my guess would be that they are probably using AJAX on the background, to fetch those templates from the server. Then, via JScript, those templates are inserted into the editor box itself.
Using JQuery, something like this is trivial. here's an example:
template.html
<div>
<h1>TEST</h1>
<span>This is a template</span>
</div>
editor.html
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div contenteditable="true" id="myEditor">
replaced stuff
</div>
<button id="btn">Load TPL</button>
<script>
$("#btn").click(function() {
$("#myEditor").load("template.html");
});
</script>
</body>
</html>
Edit:
1) Well, since those templates are quite complex and include CSS, you probably want to keep them separated from you editor page (or the template's CSS will mess up your page's css).
However, since you're using TinyMCE, it comes with a template manager built in, so you probably want to use that. Check this link here http://www.tinymce.com/wiki.php/Configuration:templates for documentation.
2) I think 1 answers your question but, just in case, my method above works for any page in any directory, provided it lives on the same domain. Example:
<script>
$("#btn").click(function() {
$("#myEditor").load("someDirectory/template.html");
});
</script>
I recomend you check this page for the specifics on using TinyMCE http://www.tinymce.com/wiki.php/Configuration:templates
EDIT2:
Let me explain the above code:
$("#btn").click(function() { });
This basically tells the browser to run the code inside the brackets when you click the element with an id="btn"
$("#myEditor").load("someDirectory/template.html");
This is an AJAX request (check the documentation here). It grabs the contents of someDirectory/template.html and places them inside the element whose id="myEditor"