Although Outlook sends e-mails as HTML by default, Microsoft seems to want to make it hard for us to write that HTML ourselves. One important reason for using HTML is to keep the size of an e-mail down when inserting an image by using an <img> tag to access the image from online instead of inserting the image itself in the body of the e-mail.
Several sources [e.g., 1, 2] say that the way to do this is to use "Insert as Text" to insert a file containing the HTML code. But as of Office 2016, the "Insert as Text" option is no longer available by default. Fortunately though, there are also sources [e.g., 3] that show how to get it back.
However, when I tried this, Outlook did not interpret my HTML. So, for example, if I make a file containing the line:
<img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">
and then use "Insert as Text" to insert that line in my e-mail, the result is just that line of code, not the image. What am I doing wrong?
(As indicated by the alt attribute, the image file in that example is just a random online image that appears in one of the articles referenced above. I have no affiliation with that website.)
The answer is very simple. In a way, it's obvious, but in another way, it's not.
The answer is that each segment of HTML code inserted has to be a complete HTML file, including the <!DOCTYPE>, <HTML> and <body> tags, not just the desired HTML code. The reason this is not obvious is because if you insert multiple code segments, each one has to be a complete HTML file, which is something you would never do when actually writing HTML. I presume that what is happening is that when Outlook detects a valid HTML file being "Inserted as Text", it strips the opening and closing <!DOCTYPE>, <HTML> and <body> tags and then inserts the code that was between them -- as HTML, not as text.
So, the solution I found was that instead of the single line of code shown in the question, I need to "Insert as Text" a file containing:
<!DOCTYPE html>
<html>
<body>
<img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">
</body>
</html>
When I insert that as text in my e-mail, I see the image, not the code.
In all the sources I found online that said to use "Insert as Text" to insert HTML in Outlook, none of them said it had to be a complete HTML file instead of just the desired code. So maybe this Q&A will be helpful to someone else, if I'm not the only person who had to scratch my head for a long time before thinking of that.
========================
Added details about using HTML in the e-mail:
As pointed out in the Lenetek article linked in the question, Outlook does not support all HTML tags. In particular, for embedding images, I have found:
When sending from Outlook:
Outlook does not support <figure> and <FigCaption>. I found that an image and caption placed in those tags were rendered inline, just ignoring the tags. For floating to the right margin, I found I was able to get the same results by replacing <figure> with <table> and then placing the image and its caption each inside of <TR><TD>...</TD></TR>.
When receiving in Outlook:
There are differences in how different e-mail clients interpret HTML, which is probably why some e-mails come with a link at the top for viewing the e-mail in one's browser. In particular, I've read that Outlook is not well behaved in this regard. And that was the case with my right-floated image referred to above.
After doing the "Insert as Text" trick, the image appeared correctly at the right margin in the draft e-mail in Outlook, but when it was sent, the CSS style float attribute was ignored and the table appeared by itself at the left margin with no text wrapped around it. I was able to fix this by, in the <table> tag, replacing the style attribute float: right; with the old-fashioned HTML attribute align="right". With that, the image and caption appeared correctly at the right margin when received in Outlook. I have not tested what it looks like in other e-mail clients.
In addition to NewSites answer, I want to point out, that in current Outlook 365 versions the option for "Insert as text" does not appear in the standard settings. The mentioned function under the "attach" tab does NOT offer the "Insert as text" option in the modal window.
For this to work, you will have to add a new tab yourself to the ribbon and add the "Attach" button to this new tab. Once you click this newly added button, you will get a modal with the little dropdown next to the "Insert" button.
I had this same issue and have been so frustrated. It's actually super easy. The trick is to use outlook.live.com. Type any word in the body, highlight it, right click, select "inspect". The code will appear and the word you typed in the body of the email should be highlighted. Right click in the code and select "edit as html." Then, in the code, highlight the word you typed in the body and replace it with your code. Voila! (I learned that here: https://youtu.be/yZOYRhB6ONs)
I had issues displaying the linked image while generating outlook email using HTML code. Somehow it works on a couple of machines, but most didn't show the image.
Kept on researching knowing the problem is with Outlook interpreting the HTML code. And then I reached this thread and the #NewSites answer really nailed it. Just added the line <!DOCTYPE HTML> at the top of my HTML code and all are working perfectly now.
Outlook 365 (2022 Update)
For Outlook 365, the Attach option needs to be enabled manually. Modify the Command Ribbon from inside the message, not the main Outlook window:
Note this option is Attach File without subcommands, i.e. the "classic" Attach File.
From there you can choose Insert as Text as the HTML snippet will show up as processed, not just code.
Outlook version for this post: Microsoft® Outlook® for Microsoft 365 MSO (Version 2202 Build 16.0.14931.20652) 64-bit
There has been a little bug with my Sublime Text 3. When I try auto-completing some HTML tags, a extra '<' is inserted before the first tag, making me have to go back and manually delete it every time I autocomplete tags. I am using build 3176 and I have tried rolling back to 3170 but the issue still occurred. The odd thing is that on my main PC, even though I have the same version of Sublime Text, the bug does not occur there. I have included images below of my issue.
Before pressing tab:
After pressing tab:
Just type the short version that you want, may it be 'p' for <p></p> and press the tab, not enter and it will autocomplete.
What happens is, it looks like you are using Emmet. You gotta give only the tag name and it completes.
Eg:
div→
<div></div>
a→
link→
<link rel="stylesheet" href="" />
img→
<img src="" alt="" />
Try to leverage the use of Emmet this way. You have a huge list of Cheat Sheet to make use of too. It's really a feature and not a bug. :)
I am unsure if this is possible...I am currently working on a VBS script which fills in a web form and uploads a file. However, the upload button is a HTML input field of type "text"...The way I am planning to approach this is to remove the attribute type="file" and replace it with type="text". Then I am planning to populate the resulting text box with my file location and click upload afterwards. This works great when done manually through the browser developer tools.
However, I am limited to use of VBScript as the solution must be supportable by my colleagues. Has anybody got any ideas?
With some determination I stumbled through and produced an answer to my own Question:
IE.Document.All.Item("testYOYO").type = "text"
IE.Document.All.Item("testYOYO").value = "testtest"
You can try:
IE.Document.getElementsByClassName("testYOYO").Item(1).removeAttribute(the Attribut)
Good Luck
we are using CKEditor in our project. We recently upgraded the version from 3.X to 4.x. After the update, we are not able to see <img> tags in the old saved documents. When we click on the source, we see
<p> <p> in place of a <p><img ......><p>.
On further debugging, we found that many documents which had the <img> tag were also having a junk attribute in the <img> tag like <img /="/" src="/folder/11801321/112267100.neck.png" height="308" width="467">.
By junk, I mean this part of tag /="/". This was a bug introduced while we were processing the user's input. We reverted old CKEditor version to 3.X and the editor was internally taking care of the junk values. it was trimming it off. so the users never complained.
But now the CKEditor 4 is not handling the HTML in the same way. It is actually stripping the whole <img> tag.
We have two options to fix this issue.
1. Remove the junk characters in all the documents. This is huge data. Needs approval from the user to do it.
2. Change CKEditor 4 config settings to get the same behavior as the CKEditor 3.X.
We are in favor of point 2. I have been searching and trying couple of config settings but haven't been able to nail it.
Let me know if any one has faced the same issue and have resolved it.
If you really want you can set all the code inside the img tag as "protected" and this way the editor will not strip this code:
CKEDITOR.config.protectedSource.push(/<img \/="\/" .*?>/g)
Remember that your final html will not be valid.
Since that part of the code is "protected" you will not see these images in the editor.
Here is a working example for that:
https://jsfiddle.net/oLb4Lmdb/
However - I really think it will be best to replace the string <img \/="\/" with <img in the source once the ckeditor instance is ready:
CKEDITOR.instances.editor1.on('instanceReady', function() {
this.setData(this.getData().replace("<img /=\"/\"", "<img"))
})
This way you don't need to go over all the data in the "backround", and the replacement will be done "on the fly" for every document that you need to edit.
You can check this jsfiddle:
https://jsfiddle.net/k1ewc29p/
I have a web page with a read-only text box which shows some HTML code:
<input type="text" readonly="true" value="<table>...</table>"/>
There is also submit button, which causes page post back and XSS validation to trigger. I don't want to turn off XSS.
I also tried disabled="disabled", but then the user is not able to copy the text in the text box.
So I thought that using div and span which can give same look and feel would suffice and negate the need for turning off the validation. While trying this, I am struggling to restrict the string in one line. As in text box, it is a single row with column size and text is shown nicely, we can also copy text.
Is there a better solution for what I'm trying to do?
If I understand you correctly you're trying to show some example code in a web interface that is formatted for easy consumption by the end user.
As a general rule, you should wrap code snippets in <pre></pre> tags, I would then suggest having a go at using: http://alexgorbatchev.com/wiki/SyntaxHighlighter to format the code as if you were viewing in an IDE.
This will prevent you from having to turn of the XSS checker.
you could use <pre> tags
check this link