Code Example:
I have a string pageContent as below:
<div class="ExternalClassB18B2CED421C4DBE9D35A9D59DB7749C">
<table id="layoutsTable" style="width:100%;">
<tbody>
<tr style="vertical-align:top;">
<td style="width:100%;">
<div class="ms-rte-layoutszone-outer" style="width:100%;">
<div class="ms-rte-layoutszone-inner" role="textbox" aria-haspopup="true" aria-autocomplete="both" aria-multiline="true">
<p>Test Page</p>
<table width="100%" class="ms-rteTable-default" cellspacing="0">
<tbody>
<tr>
<td class="ms-rteTable-default" style="width:33.33%;">?ID</td>
<td class="ms-rteTable-default" style="width:33.33%;">?Task Name</td>
<td class="ms-rteTable-default" style="width:33.33%;">?Status</td>
</tr>
<tr>
<td class="ms-rteTable-default">?1</td>
<td class="ms-rteTable-default">?Task.1</td>
<td class="ms-rteTable-default">?Completed</td>
</tr>
</tbody>
</table>
<p> </p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<span id="layoutsData" style="display:none;">false,false,1</span>
</div>
Then I use method UpdatePageContent to update into OneNote
I try to debug and know that it can't parse to OneNote XML schemas.
I try a lot of of ways and can't find solutions for this case. Need Help !!!
OneNote Object Model does support HTML, but you need to put it inside the HTMLBlock element. Simply wrap your HTML with this:
<?xml version="1.0" encoding="utf-8"?>
<one:Page ID="--yourpageid--" xmlns:one="http://schemas.microsoft.com/office/onenote/2010/onenote">
<one:Outline>
<one:OEChildren>
<one:HTMLBlock>
<one:Data>
<![CDATA[
html goes here
]]>
</one:Data>
</one:HTMLBlock>
</one:OEChildren>
</one:Outline>
</one:Page>
You have a bunch of HTML as your input, but the OneNote client add-in object model requires XML content formed in one of the OneNote XML schemae; it doesn't interpret HTML (The OneNote service's REST API on the other hand does).
You could either switch to using the server-side API, or go through some process in your add-in to take the HTML and convert it to OneNote markup.
Related
I am attempting to place HTML in an email template of an older vendor solution that doesn't support modern HTML5 techniques. In the code sample (JSFiddle url below) if I resize the template and make it smaller the text falls to the next line without an indent.
Is there a way to make the text indent without a hard line break and indenting?
<div>
<table style="background:#8B0000 ;color:#FFF;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30">Test Email</td>
<td align="right"></td>
<td width="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30">
<p style="font-size: 10.5pt;font-weight: 700;color:#555"> Test.</p>
<div style="font-size: 10pt;color:#555">
<p> There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td></td>
<td height="30"> </td>
</tr>
</table>
</div>
Working code sample: https://jsfiddle.net/wa1z4nvr/4/
Remove the ensp entity and give your paragraph a margin you like.
<p style="text-indent: 0; margin: 1em;">There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
It looks like right now you're using en-spaces as your indent
This would create a behavior where the first line appears to be indented and the rest does not.
If you want subsequent lines of text to be lined up with your first line, then you're probably not looking for an "indent".
You can remove the from both your paragraph and your "Test." text, and adding a padding-left:1em to those elements, or to the table row containing them.
The table containing your test text might look like this:
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30" style="padding-left: 1em">
<p style="font-size: 10.5pt;font-weight: 700;color:#555">Test.</p>
<div style="font-size: 10pt;color:#555">
<p>There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>
I am creating an html email template that will hopefully show on mostly used desktop and web email clients (such as Outlook, Gmail or Yahoo).
I'm having a hard time on doing an html email template where my images are being considered as attachments. I'm assuming it's possible to not show them as attachments since most websites that I am subscribed of such as Pinterest, they have images on their html email templates, but it doesn't show them as attachments too.
Here's a code I am testing
<table align="center">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<img src="#web/mail/img/email-for-first-users-header.jpg" style="width:auto; height: auto; border-style: none; display: block;"/></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<h2>Hi, non-user's name!</h2>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
What I basically want to achieve is that, the email clients will not add my images on the attachments area.
Embedding an image in an email first requires that you have a version of said image as a base64 encoded string. Once your image is encoded, jump into your template, or whatever HTML you’re sending out, and embed it using a standard HTML image tag:
<img alt="My Image" src="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgACAESAAMAENkDZ5u8/61a+X...more encoding" />
Then you’re done! Send away.
i have a joomla! based website,and i published thousands of articles in it. but now, i need to add a link to all of the articles,and im sure you know its not possible to edit thousands of articles 1 by 1.
all of my articles are using the same class and style, for example:
<div class="table-border">
<table class="article" cellpadding="0" cellspacing="0" border="0">
<tr class="thead">
<td class="col1">TITLE GOES HERE</td>
</tr>
<tr class="even" dir="rtl">
<td> CONTENT GOES HERE </td>
</tr>
</table>
</div>
now i want to know,is there a way to call a class or a link in css? (like when you set background image in css)
any help in anyway (css, php, html solutions, etc.) would be appreciated.
You could add in your template file:
<?php
if (JRequest::getVar('option') == 'com_content' && JRequest::getVar('view') == 'article') {
echo 'LINK';
}
?>
EDIT: I have added a fiddle to better demonstrate what is happening since the person who has taken the time to offer an answer (thanks!) does not seem to get what I was asking, so hopefully this helps to clarify
http://jsfiddle.net/t5sPL/
I am sending an HTML email. It renders fine in gmail, outlook desktop client, and several other email clients. however, when viewing an inbox online in the outlook webmail app, http://portal.microsoftonline.com, Microsoft seems to be doing its best to not let me center the contents of a table. Tipped off by this article
https://litmus.com/blog/hotmail-and-outlook-com-drop-support-for-margin
I see that the margin attribute is no longer supported. I tried using padding instead and no luck. So, to center my table, I thought I could go oldschool and use this pattern to center it:
<table width='100%' style='width:100%'>
<tbody>
<tr>
<td align='center'>
<table width='700' style='width:700px'>
<tbody>
<tr>
<td>Content to be centered</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
however, this still does not work, because in my <td align='center'> tag, outlook is inexplicably attaching a style='text-align:center;' attribute, for a result of
<td align='center' style='text-align:center;'>
which effectively justifies the content to the left. When I use "inspect element" and delete the style attribute, everything looks as expected.
Has anyone dealt with this issue before? Any resolution, or explanation? Thanks!
Are you trying to center the content inside the 700 wide table? If so, add align="center" to the table cell it is in:
<table width='700' style='width:700px'>
<tbody>
<tr>
<td align="center">Content to be centered</td>
</tr>
</tbody>
</table>
If you are trying to left align the 700 table content, but have the 700 table itself centered, just add align="left" to the <td> instead.
UPDATE:
Based on your jsFiddle - This should fix it:
<table width='100%' style='width:100%' border=1>
<tbody>
<tr>
<td align='center' style='text-align:center'>
<table align='center' width='700' style='width:700px' border=1>
<tbody>
<tr>
<td align='left'><b style='color:red'>This content used to be aligned incorrectly...</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
I am trying to get this table on my site to have an image on the left and information about the staff member on the left. It is in a WordPress page but regardless of weather it's on the page or in a standalone HTML document it doesn't seem to render the way I want it to.
It's supposed to follow the same general idea as http://grab.by/djQk.
I attempted to copy their source but couldn't get it to render so I pulled their source from my site and started from scratch and still couldn't get it working.
http://radio.powercastmedia.net/staff/
I have implemented what you need using CSS instead of tables.
See this JSFiddle
Cheers, Sam
If you're using tables....
<table>
<tr>
<td style="width: 25%;">
<img src="blah"/>
</td>
<td>
<table>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
<td>
</tr>
</table>
Note: the problem with your pastebin example is that you're using <tr> inside a <td> which is incorrect - <tr> can only go inside a table so you need additional table tags.
It's also possible to do with a single table using colspan and rowspan on individual cells, but I'd personally prefer to do it by making the image a float left eg:
<div>
<img src="blah" style="float: left;"/>
<p>Name: John</p>
<p>Something else</p>
</div>