EDIT: We replaced Quill with TinyMCE and solved all our issues. We can successfully insert HTML response (as is) into tinyMCE's state as well as modify it!
We're experiencing a styling issue. We're building a mail templating
application and the user can create/modify their templates. We also provide preexisting templates for our users.
The issue we're experiencing is the following.
1- We send the user a mail template. The initial/original response sent to the user is the following HTML
<html>
<head>
<title>FINROTA</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
</head>
<body bgcolor=\"#FFFFFF\" leftmargin=\"0\" topmargin=\"0\" marginwidth=\"0\" marginheight=\"0\" style=\"font-family: Verdana, Geneva, Tahoma, sans-serif\">
<table width=\"670\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">
<tr>
<td bgcolor=\"#FFFFFF\">
<table bgcolor=\"#FFFFFF\" width=\"575\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">
<!-- Header -->
<tr>
<td bgcolor=\"#FFFFFF\">
<table width=\"575\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"border-bottom: 1px solid #F3F3F3;\">
<tr>
<td style=\"height: 94px;text-align: center;\">
<a href=\"https://portal.finrota.com/\">
<img width=\"120\" height=\"30\" style=\" display: initial;padding-top: 20px;\" src=\"https://cdnecozum.com/static/images/mailing/header.png\" alt=\"finrota-logo\" />
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- /Header -->
</table>
</td>
</tr>
</table>
</body>
</html>
2- We then take this html response and set the react-quill 'state' with it
import { textEditorOptions } from "lib/constants";
import React, { forwardRef, useImperativeHandle, useRef } from "react";
import ReactQuill from "react-quill";
const editorOptions = {
toolbar: false,
clipboard: {
matchVisual: false
}
},
TemplateEditor = forwardRef(({ formParamForQuill, setFormParamForQuill, shouldHideToolbar, data, stateData, update, communicationType }, ref) => {
const [quillState, setQuillState] = React.useState({ description: data || "" }),
editorRef = useRef(),
handleQuillChange = val => {
setQuillState(() => ({ description: val }));
update(`${communicationType}`, { ...stateData[`${communicationType}`], body: val });
};
useImperativeHandle(ref, () => ({ editorRef }));
React.useEffect(() => {
if (formParamForQuill.token !== null && formParamForQuill.explanation !== null)
setFormParamForQuill({ token: null, explanation: null, ref: null });
}, [formParamForQuill]);
return (
<>
<div className="communication-template-quill">
<ReactQuill
ref={editorRef}
modules={!shouldHideToolbar ? textEditorOptions : editorOptions}
value={typeof quillState.description === "string" ? quillState.description : quillState.description.join("")}
onChange={value => handleQuillChange(value)}
/>
</div>
</>
);
});
export default TemplateEditor;
'data' passed onto the editor component as a prop is the initial HTML response attached above. However, when the quill state is set with this 'data', quill state then becomes this (state modified by react-quill (attached below)), which does not preserve the original HTML thus leaving us with a messed up layout.
<p>FINROTA <a href=\"https://**.**.com/\" rel=\"noopener noreferrer\" target=\"_blank\">
<img src=\"https://*****.com/-/-/-/-.png\" alt=\"finrota-logo\" height=\"30\" width=\"120\">
</a>
<img src=\"https://*****.com/static/images/mailing/pay.png\" alt=\"top-images\" height=\"128\" width=\"123\"> Sayın <strong style=\"color: rgb(16, 16, 16);\">{{-}},</strong>
</p>
<p>---</p>
<p>---</p>
<p>
<strong>** ** **</strong> Sistem Destek E-Mail: <strong> **#**.com </strong> Telefon: <strong> 0(**) ** ** 00 </strong> Fax: <strong> 0(**) ** ** 00 </strong>
<a href=\"https://twitter.com/*****\" rel=\"noopener noreferrer\" target=\"_blank\">
<img src=\"https://******.com/static/images/mailing/twitter.png\" alt=\"twitter\" height=\"32\" width=\"32\">
</a>
<a href=\"https://www.linkedin.com/company/*****/mycompany/\" rel=\"noopener noreferrer\" target=\"_blank\">
<img src=\"https://*****.com/static/images/mailing/linkedin.png\" alt=\"linkedin\" height=\"32\" width=\"32\">
</a>
<a href=\"https://www.facebook.com/*****/\" rel=\"noopener noreferrer\" target=\"_blank\">
<img src=\"https://*****.com/static/images/mailing/facebook.png\" alt=\"facebook\" height=\"32\" width=\"32\">
</a>
<a href=\"https://www.instagram.com/EcozumAS/\" rel=\"noopener noreferrer\" target=\"_blank\">
<img src=\"https://*****.com/static/images/mailing/instagram.png\" alt=\"instagram\" height=\"32\" width=\"32\">
</a>
</p>
How could the original HTML be preserved ? How do we overcome this styling issue ?
Short answer
No, you can't just throw any markup into a WYSIWYG editor and expect it to be able to perfectly work with the structure. These editors work with a subset of HTML.
Emails usually use ancient styling techniques. Even if Quill is able to correctly parse each tag and attribute, the result would likely be terrible to work with while editing. Emails often put everything in a table and need to add inline styles to work in older clients.
You can get part of the way there by only injecting the actual visible body content into Quill, not an entire HTML document.
The document head is not something that you could edit in a WYSIWYG editor. As you can see Quill just removes all tags it doesn't "know about" from around the content. Then it adds p tags around orphaned text. Hence you see the document title in the output as a paragraph.
1- We send the user a mail template
You only need to send the user the part of the template they can edit. The outer HTML is something that can be added by your server when the mail is finally sent.
The second problem is that the email content seems to be from a pre-existing application that formatted everything as tables. Also it contains a bunch of inline styles.
Quill is not a sophisticated HTML parser. (I mean, come on, it doesn't even remove the head tag) Neither is it very good at outputting HTML.
So if you want to convert this text to an email with that specific mark up, you'll have to do this conversion yourself from the tags and style attributes returned by Quill's content.
You'll probably also have to do a one time effort to convert these old templates into a format Quill can work with. Or write a function that can convert between the formats.
You could also try quil-better-table. It might improve Quill's ability to pick up table markup in the input.
If you're sending your emails with PHP, you could try quil-delta-parser or php-quil-renderer.
That way you can send Quill's "deltas" to your back end, and transform them to the right HTML at save time, or even when the email is sent.
You can install both with Composer.
composer require nadar/quill-delta-parser
or
composer require deanblackborough/php-quill-renderer
Both libraries seem flexible enough to make it output the styles you want based on which attributes are in Quill's delta.
In any case it's probably very challenging if not impossible to make Quill understand and return the exact same markup of the template you post. Much easier to just take whatever it outputs and transform it afterwards.
Related
I am using UI for ASP.NET Core. I have configured autocomplete widget with customized the header & item template like below
#(Html.Kendo().AutoCompleteFor(x => x.AccountNumber)
.DataTextField("AccountNumber")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetData", "Lookup");
})
.ServerFiltering(true);
})
.MinLength(2)
.Height(400)
.HeaderTemplateId("headerTemplate")
.TemplateId("itemTemplate"))
Templates
<script id="headerTemplate" type="text/x-kendo-template">
<table>
<tr class="auto-hd-tr">
<td class="auto-hd-td auto-td-large">Account Number</td>
<td class="auto-hd-td auto-td-small">State</td>
</tr>
</table>
</script>
<script id="itemTemplate" type="text/x-kendo-template">
<table>
<tr>
<td class="auto-item-td auto-td-large">${AccountNumber}</td>
<td class="auto-item-td auto-td-small">${State}</td>
</tr>
</table>
</script>
When auto complete shows searched result, and if the AccountNumber or State property is null it actually shows null string as value.
How do i use if-then-else in template, so if property is null then don't show anything
Note:
1> I can handle this on server and set value to string.empty if property is null but i would like to handle it on client side.
2>Telerik has overview of Template here. However the syntax to show property value #= # or #: # (aka hash templates) does not work. I have to use syntax ${ } to get it to work.
I know how to use if-then-else with hash template syntax. However i dont know how to use if-then-else with syntax ${ }
I just searched my code base and the only use that I have of the ${} style is setting values such as:
<script id="tmpMyViewItem" type="text/x-kendo-tmpl" >
<div class="myViewItem" id=${AccountNumber}>
<h3>${AccountNumber}</h3>
</div>
</script>
In all the places where I have conditional statements the hash templates are used:
.ItemTemplate("#if(data.Name!='<All>'){#<img style='padding-top:3px;'.....
Perhaps this link I have bookmarked from way back in 2011 may put things in perspective. What keeps you from using the has template style?
I try to get the item-title from new releases at bandcamp.com from the 'Discover' part of the page (rock->all rock->new arrivals)
scrapy shell 'https://bandcamp.com/?g=rock&s=new&p=0&gn=0&f=all&w=0'
Part of the relevant source code of the page looks like this:
<div class="col col-3-12 discover-item">
<a data-bind="click: playMe, css: { 'playing': playing }" class="item-link playable">
<span class="item-img ratio-1-1">
<img class="art" data-bind="src_art: { 'art_id': artId, 'format': 'art_tags_large' }" src="https://f4.bcbits.com/img/a1631562669_9.jpg">
<span class="plb-btn">
<span class="plb-bg"></span>
<span class="plb-ic"></span>
</span>
</span>
</a><a data-bind="attr: { 'href': itemURL }, text: title, click: playMe" class="item-title" href="https://reddieseloff.bandcamp.com/album/dead-rebel?from=discover-new">Dead Rebel</a>
<a data-bind="attr: { 'href': bandURL }, text: artist, click: playMe" class="item-artist" href="https://reddieseloff.bandcamp.com?from=discover-new">Red Diesel</a>
<span class="item-genre" data-bind="text: genre">rock</span>
</div>
I tried to get the text of item-title (in this example 'Dead Rebel') with the help of xpath:
response.xpath('//div[#class="col col-3-12 discover-item"]//a[#class="item-title"]/text()').extract()
but it returns nothing.
[]
It's also not working for 'item-artist' so i wonder what i'm doing wrong.
I appreciate any help.
All of the data you seek is hidden in the a hidden div node inside of the page body.
When your browser loads the webpage, javascript instructs how to unpack and display this data and since scrapy does not run any javscript you need to do this step yourself:
# all of the data is under "<div id="pagedata" data-blob=" attribute
data = response.css('div#pagedata::attr(data-blob)').extract()
import json
data = json.loads(data[0])
# dig through this python dictionary to find your data
(it has pretty much everything, even more than the page displays)
I am trying to get the value of an element attribute from this site via importXML in Google Spreadsheet using XPath.
The attribute value i seek is content found in the <span> with itemprop="price".
<div class="left" style="margin-top: 10px;">
<meta itemprop="currency" content="RON">
<span class="pret" itemprop="price" content="698,31 RON">
<p class="pret">Pretul tau:</p>
698,31 RON
</span>
...
</div>
I can access <div class="left"> but i can't get to the <span> element.
Tried using:
//span[#class='pret']/#content i get #N/A;
//span[#itemprop='price']/#content i get #N/A;
//div[#class='left']/span[#class='pret' and #itemprop='price']/#content i get #N/A;
//div[#class='left']/span[1]/#content i get #N/A;
//div[#class='left']/span/text() to get the text node of <span> i get #N/A;
//div[#class='left']//span/text() i get the text node of a <span> lower in div.left.
To get the text node of <span> i have to use //div[#class='left']/text(). But i can't use that text node because the layout of the span changes if a product is on sale, so i need the attribute.
It's like the span i'm looking for does not exist, although it appears in the development view of Chrome and in the page source and all XPath work in the console using $x("").
I tried to generate the XPath directly form the development tool by right clicking and i get //*[#id='produs']/div[4]/div[4]/div[1]/span which does not work. I also tried to generate the XPath with Firefox and plugins for FF and Chrome to no avail. The XPath generated in these ways did not even work on sites i managed to scrape with "hand coded XPath".
Now, the strangest thing is that on this other site with apparently similar code structure the XPath //span[#itemprop='price']/#content works.
I struggled with this for 4 days now. I'm starting to think it's something to do with the auto-closing meta tag, but why doesn't this happen on the other site?
Perhaps the following formulas can help you:
=ImportXML("http://...","//div[#class='product-info-price']//div[#class='left']/text()")
Or
=INDEX(ImportXML("http://...","//div[#class='product-info-price']//div[#class='left']"), 1, 2)
UPDATE
It seems that not properly parse the entire document, it fails. A document extraction, something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<div class="product-info-price">
<div class="left" style="margin-top: 10px;">
<meta itemprop="currency" content="RON">
<span class="pret" itemprop="price" content="698,31 RON">
<p class="pret">Pretul tau:</p>
698,31 RON
</span>
<div class="resealed-info">
» Vezi 1 resigilat din aceasta categorie
</div>
<ul style="margin-left: auto;margin-right: auto;width: 200px;text-align: center;margin-top: 20px;">
<li style="color: #000000; font-size: 11px;">Rata de la <b>28,18 RON</b> prin BRD</li>
<li style="color: #5F5F5F;text-align: center;">Pretul include TVA</li>
<li style="color: #5F5F5F;">Cod produs: <span style="margin-left: 0;text-align: center;font-weight: bold;" itemprop="identifier" content="mol:GA-Z87X-UD3H">GA-Z87X-UD3H</span> </li>
</ul>
</div>
<div class="right" style="height: 103px;line-height: 103px;">
<form action="/?a=shopping&sa=addtocart" method="post" id="add_to_cart_form">
<input type="hidden" name="product-183641" value="on"/>
<img src="/templates/marketonline/images/pag-prod/buton_cumpara.jpg"/>
</form>
</div>
</div>
</html>
works with the following XPath query:
"//div[#class='product-info-price']//div[#class='left']//span[#itemprop='price']/#content"
UPDATE
It occurs to me that one option is that you can use Apps Script to create your own ImportXML function, something like:
/* CODE FOR DEMONSTRATION PURPOSES */
function MyImportXML(url) {
var found, html, content = '';
var response = UrlFetchApp.fetch(url);
if (response) {
html = response.getContentText();
if (html) content = html.match(/<span class="pret" itemprop="price" content="(.*)">/gi)[0].match(/content="(.*)"/i)[1];
}
return content;
}
Then you can use as follows:
=MyImportXML("http://...")
At this time, the referred web page in the first link doesn't include a span tag with itemprop="price", but the following XPath returns 639
//b[#itemprop='price']
Looks to me that the problem was that the meta tag was not XHTML compliant but now all the meta tags are properly closed.
Before:
<meta itemprop="currency" content="RON">
Now
<meta itemprop="priceCurrency" content="RON" />
For web pages that are not XHTML compliant, instead of IMPORTXML another solution should be used, like using IMPORTDATA and REGEXEXTRACT or Google Apps Script, the UrlFetch Service and the match JavasScript function, among other alternatives.
Try smth like this:
print 'content by key',tree.xpath('//*[#itemprop="price"]')[0].get('content')
or
nodes = tree.xpath('//div/meta/span')
for node in nodes:
print 'content =',node.get('content')
But i haven't tried that.
<div><div style="margin-left:67px"><table style="border:1px #80A0BB solid;" padding="5px"><tr><td><img src="{$smarty.const.DOC_ROOT}/images/thumbs/{$link.ID}-300x225.png" alt="" /></td></tr></table></div></div>
I'm trying to hide a div based on if an image exists on my server. How would I check to see if an image exists and hide the div if it doesn't exist? Or is there a better way to do this?
The easiest way is just to use write a function in PHP and then use it in Smarty.
In PHP:
function linkImageExists($link){
//Check to see if image for link exists and return true if it does.
// otherwise:
return false;
}
In Smarty template:
{if linkImageExists($link)}
<div>
<div style="margin-left:67px">
<table style="border:1px #80A0BB solid;" padding="5px">
<tr>
<td>
<a href="{$link.URL|trim}" target="_blank">
<img src="{$smarty.const.DOC_ROOT}/images/thumbs/{$link.ID}-300x225.png" alt="" />
</a>
</td>
</tr>
</table>
</div>
</div>
{else}
{* image doesn't exist *}
{/if}
You may want to consider turning $link into an object and then you can call functions on it, rather than having to use global functions which may producer cleaner code in the future.
The following javascript, intended to open a new window and jump to a specified anchor, works great in IE. Unfortunately, in Firefox, it opens the window, but it doesn't jump to the anchor.
I've been struggling with this problem for a couple of days now (searches and modifications) to no avail.
If anybody has any insight as to how I can get this to work as intended in both IE and Mozilla browsers, I'd be forever grateful.
Here's the javascript function containing window.open() and the link calling the function containing window.open():
<html>
<head>
<script language=javascript>
function openPopupWindow_Why(sPopupUrl, sPopupLabel)
{
window.open(sPopupUrl, sPopupLabel, 'toolbar=no,resizable=yes,
scrollbars=yes,height=250,width=450', false);
return false;
}
</script>
</head>
<body>
<A onclick="openPopupWindow_Why('MyProfile_WhyAsk.htm#ethnicity', 'Why')"
href="javascript:void(0)" class="WhyAsk">Why do we ask?</a>
</body>
</html>
Here's the HTML anchor on the page that's opened by window.open():
<tr>
<td align="center">
<a name="#ethnicity"> </a>
</td>
</tr>
Try removing the # from the ethnicity anchor name like so:
<tr>
<td align="center">
<a name="ethnicity"> </a>
</td>
</tr>
Works in at least IE, Firefox and Chrome