I'm trying to insert an e-mail address with the ckeditor. After I saved my content element (text&media), the source code showing the ckeditor looks fine
some#mailaddress.com
But when I visit the webpage only the following is visible:
some(at)mailaddress.com
I found out, that the problem is the spam protection. If I enable
config.spamProtectEmailAddresses = 1
The mail not rendered anymore. It's working without protection, but I want to use it.
Thank you for help.
I have performed the following test (TYPO3 8.7.7) and CKEditor with full configuration:
1) config.spamProtectEmailAddresses = 1 and config.spamProtectEmailAddresses_atSubst = [at]
2) Create a CE text with image
3) write test email into the text editor and then use the "link" button to add an email address
3.1) write test#email.it into the text editor and then use the "link" button to add an email address
3.2) write test#email.it into the text editor without adding the link
Results
3.1) the href attribute of the link is encrypted (javascript:linkTo_UnCryptMailto('...');)
3.2) the href attribute of the link is encrypted (javascript:linkTo_UnCryptMailto('...');) while the visible text does not become test[at]email.it
3.3) no link is added to the text; the visible text does not become test[at]email.it
Could you tell us if you installed some CKEditor plugins or some write some detail of your configuration?
I found it out!
The problem was at my fluid template. I wrapped the {CONTENT} variable with
<f:format.html parseFuncTSPath="lib.parseFunc">{CONTENT}</f:format.html>
It's working now after I changed this to
<f:format.raw>{CONTENT}</f:format.raw>
but if you use <f:format.raw>, the email address is not spam protected anymore. Thats not, what you wanted, isn't it?
I have the problem, the <pre>-tag is html encoded and only works in <f:format.raw>, but then, the email addresses are plain.
Martin
Related
How do I create a link to a part of long webpage on another website that I don't control?
I thought you could use a variant of the #partofpage at the end of my link. Any suggestions?
Just append a # followed by the ID of the <a> tag (or other HTML tag, like a <section>) that you're trying to get to. For example, if you are trying to link to the header in this HTML:
<p>This is some content.</p>
<h2><a id="target">Some Header</a></h2>
<p>This is some more content.</p>
You could use the link Link.
Create a "jump link" using the following format:
http://www.example.com/somepage#anchor
Where anchor is the id of the element you wish to link to on that page. Use browser development tools / view source to find the id of the element you wish to link to.
If the element doesn't have an id and you don't control that site then you can't do it.
That is only possible if that site has declared anchors in the page.
It is done by giving a tag a name or id attribute, so look for any of those close to where you want to link to.
And then the syntax would be
text
In case the target page is on the same domain (i.e. shares the same origin with your page) and you don't mind creation of new tabs (1), you can (ab)use some JavaScript:
see tenth paragraph on another page
Trivia:
var w = window.open('some URL of the same origin');
w.onload = function(){
// do whatever you want with `this.document`, like
this.document.querySelecotor('footer').scrollIntoView()
}
Working example of such 'exploit' you can try right now could be:
javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('https://stackoverflow.com/questions/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')
If you enter this into location bar (mind that Chrome removes javascript: prefix when pasted from clipboard) or make it a href value of any link on this page (using Developer Tools) and click it, you will get another (duplicate) SO question page scrolled to the footer and footer painted red. (Delay added as a workaround for ajax-loaded content pushing footer down after load.)
Notes
Tested in current Chrome and Firefox, generally should work since it is based on defined standard behaviour.
Cannot be illustrated in interactive snippet here at SO, because they are isolated from the page origin-wise.
MDN: Window.open()
(1) window.open(url,'_self') seems to be breaking the load event; basically makes the window.open behave like a normal a href="" click navigation; haven't researched more yet.
The upcoming Chrome "Scroll to text" feature is exactly what you are looking for....
https://github.com/bokand/ScrollToTextFragment
You basically add #targetText= at the end of the URL and the browser will scroll to the target text and highlight it after the page is loaded.
It is in the version of Chrome that is running on my desk, but currently it must be manually enabled. Presumably it will soon be enabled by default in the production Chrome builds and other browsers will follow, so OK to start adding to your links now and it will start working then.
Edit: It's been implemented in Chrome. See https://chromestatus.com/feature/4733392803332096
You can NOW...
As of Chrome release 81 (Feb 2020), there is a new feature called Text Fragments. It allows you to provide a link that opens at the precise text specified (with that text highlighted).
At the moment, it works in Edge, Chrome and Opera but not in Firefox, Safari or Brave. (See note 6 at bottom for more)
For security reasons, the feature requires links to be opened in a noopener context. Therefore, make sure to include rel="noopener" in your anchor markup or add noopener to your Window.open() list of window functionality features.
You create the link to your desired text by appending this string to the end of the URL:
/#:~:text=
and providing the percent-encoded search string thus:
/#:~:text=String%20to%20focus%20on
Here is a working example:
https://newz.icu/#:~:text=Google%20surveillance%20increases
Notes:
Test the above link in Chrome or Opera only
In the above example, note that the text string is in a div that is normally hidden on page load - so in this example it is being displayed despite what would normally happen. Useful.
Recent versions of Chrome also include a new option when you Right-Click on selected text: Copy link to highlight. This will auto-create the direct-to-text link for you (i.e. it automatically appends the /#:~:text= to the text you highlighted) and place it in the clipboard - just paste it where desired.
Suppose you want to highlight an entire block of text? The Text Fragments feature allows specifying a starting%20phrase and an ending%20phrase (separated by a comma), and it will highlight all text in between:
https://newz.icu/#:~:text=Dr.%20Mullis,before%20now
Note the comma between Mullis and before
web.dev article about Text Fragments
CanIUse status of Text Fragments
PS - Please forgive choice of example website. It simply had the desired
elements required for the demonstration. Hoping we can focus on function
rather than content.
First off target refers to the BlockID found in either HTML code or chromes developer tools that you are trying to link to. Each code is different and you will need to do some digging to find the ID you are trying to reference. It should look something like div class="page-container drawer-page-content" id"PageContainer"Note that this is the format for the whole referenced section, not an individual text or image. To do that you would need to find the same piece of code but relating to your target block. For example dv id="your-block-id" Anyways I was just reading over this thread and an idea came to my mind, if you are a Shopify user and want to do this it is pretty much the same thing as stated.
But instead of
> http://url.to.site.example/index.html#target
You would put
> http://example.com/target
For example, I am setting up a disclaimer page with links leading to a newsletter signup and shopping blocks on my home page so I insert https://mystore-classifier.com/#shopify-section-1528945200235 for my hyperlink.
Please note that the -classifier is for my internal use and doesn't apply to you. This is just so I can keep track of my stores.
If you want to link to something other than your homepage you would put
> http://mystore-classifier.example/pagename/#BlockID
I hope someone found this useful, if there is something wrong with my explanation please let me know as I am not an HTML programmer my language is C#!
It's now possible to create an "anchor" link that goes to a specific part of any webpage in most browsers in a few different ways.
All of them will create a link with an #anchor at the end, where "anchor" is the thing that you want to navigate to. The browser will interpret the part of the URL after the # to scroll to a specific part of the page.
Here are 3 ways to create a url like this:
Using an existing anchor. Perhaps there will be one in the URL as you scroll down the page. If not, look around the page for a header that has a little link icon to the left of it and click it to update the browsers navigation url.
Using any html element's id property or the name or id on an ("anchor") element. The other answers explain this quite well. You will have to open the developer console and inspect the part of the page to find an id (and you may not find one). It's a little different on each browser, but here's how to inspect an element in Chrome.
Using a text snippet to highlight part of the page.
Basically, html tag can have id="abc" as shown below:
<div id="abc">test</div>
<p id="abc">test</p>
<span id="abc">test</span>
<a id="abc">test</a>
And, "<a>" tag can also have name="abc" as shown below:
<a name="abc">test</a>
Then, you can use the id and name values "abc" with "#" in urls as shown below to go to the specific part of a page:
https://www.example.com/#abc
https://www.example.com/index.html#abc
Then, you can put the urls above in "<a>" tag to create the links to id="abc" and name="abc" as shown below:
test
test
And, if you want to go to the specific part of the same page, you can only put the id and name values "abc" with "#" in "<a>" tag to create the links to id="abc" and name="abc" as shown below:
<!-- Go to the specific part of the same page -->
test
<div id="abc">test</div>
<!-- Go to the specific part of the same page -->
test
<a name="abc">test</a>
My web application sends emails to subscribed users.
The email is formatted as an html page and contains html addresses specified as plain text (not inside href tag).
The intent is for the email client to display the html address as simple text, one that the user can "paint" with the cursor and copy to clipboard
This works just fine in some email clients (for example yahoo). However,
other clients (for example, MS outlook and gmail) detect these pieces of text, and display the html address as a link, making it difficult for the user to do the paint-copy-paste described above.
I tried the following:
wrap the text in CDATA block - gmail then disregards the whole block
escape the html address (instead of http://... --> http://...) - makes no difference (still make a link out of text)
any ideas?
you could but a double :: to disable the parsing:
http:<span style="display: none;">:</span>//google.com/
This will not show the second : and should avoid the parsing.
EDIT:
This will work:
http<span>:</span>//google<span>.</span>com/
I'm kind of new to HTML and hoping you an help me out.
I am pulling a database field that is a URL into automated emails. However, the URL is coming over as text.
Is there HTML coding that will turn whatever the text is into a URL without having to list the url in the coding (this is impossible, since the URLs are changing all the time)?
Example: one email says http://blahblahblah.com/yourquotes234980
The next email created is http://blahblahblah.com/yourquotes069283
How can that be turned into a URL link automatically?
Simply use the anchor element:
http://blahblahblah.com/yourquotes069283
Would come out as:
http://blahblahblah.com/yourquotes069283
you have to load that variable into a <A HREF> </A HREF> tag so it will look like this
yourvariable or you can add something else here as a name of your link
with variable i refer the variable where you get the email, so it will dinamically work and you don't have to create email tag for each user only you have to call your variable
i hope i helped you :-D
How do I create a link to a part of long webpage on another website that I don't control?
I thought you could use a variant of the #partofpage at the end of my link. Any suggestions?
Just append a # followed by the ID of the <a> tag (or other HTML tag, like a <section>) that you're trying to get to. For example, if you are trying to link to the header in this HTML:
<p>This is some content.</p>
<h2><a id="target">Some Header</a></h2>
<p>This is some more content.</p>
You could use the link Link.
Create a "jump link" using the following format:
http://www.example.com/somepage#anchor
Where anchor is the id of the element you wish to link to on that page. Use browser development tools / view source to find the id of the element you wish to link to.
If the element doesn't have an id and you don't control that site then you can't do it.
That is only possible if that site has declared anchors in the page.
It is done by giving a tag a name or id attribute, so look for any of those close to where you want to link to.
And then the syntax would be
text
In case the target page is on the same domain (i.e. shares the same origin with your page) and you don't mind creation of new tabs (1), you can (ab)use some JavaScript:
see tenth paragraph on another page
Trivia:
var w = window.open('some URL of the same origin');
w.onload = function(){
// do whatever you want with `this.document`, like
this.document.querySelecotor('footer').scrollIntoView()
}
Working example of such 'exploit' you can try right now could be:
javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('https://stackoverflow.com/questions/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')
If you enter this into location bar (mind that Chrome removes javascript: prefix when pasted from clipboard) or make it a href value of any link on this page (using Developer Tools) and click it, you will get another (duplicate) SO question page scrolled to the footer and footer painted red. (Delay added as a workaround for ajax-loaded content pushing footer down after load.)
Notes
Tested in current Chrome and Firefox, generally should work since it is based on defined standard behaviour.
Cannot be illustrated in interactive snippet here at SO, because they are isolated from the page origin-wise.
MDN: Window.open()
(1) window.open(url,'_self') seems to be breaking the load event; basically makes the window.open behave like a normal a href="" click navigation; haven't researched more yet.
The upcoming Chrome "Scroll to text" feature is exactly what you are looking for....
https://github.com/bokand/ScrollToTextFragment
You basically add #targetText= at the end of the URL and the browser will scroll to the target text and highlight it after the page is loaded.
It is in the version of Chrome that is running on my desk, but currently it must be manually enabled. Presumably it will soon be enabled by default in the production Chrome builds and other browsers will follow, so OK to start adding to your links now and it will start working then.
Edit: It's been implemented in Chrome. See https://chromestatus.com/feature/4733392803332096
You can NOW...
As of Chrome release 81 (Feb 2020), there is a new feature called Text Fragments. It allows you to provide a link that opens at the precise text specified (with that text highlighted).
At the moment, it works in Edge, Chrome and Opera but not in Firefox, Safari or Brave. (See note 6 at bottom for more)
For security reasons, the feature requires links to be opened in a noopener context. Therefore, make sure to include rel="noopener" in your anchor markup or add noopener to your Window.open() list of window functionality features.
You create the link to your desired text by appending this string to the end of the URL:
/#:~:text=
and providing the percent-encoded search string thus:
/#:~:text=String%20to%20focus%20on
Here is a working example:
https://newz.icu/#:~:text=Google%20surveillance%20increases
Notes:
Test the above link in Chrome or Opera only
In the above example, note that the text string is in a div that is normally hidden on page load - so in this example it is being displayed despite what would normally happen. Useful.
Recent versions of Chrome also include a new option when you Right-Click on selected text: Copy link to highlight. This will auto-create the direct-to-text link for you (i.e. it automatically appends the /#:~:text= to the text you highlighted) and place it in the clipboard - just paste it where desired.
Suppose you want to highlight an entire block of text? The Text Fragments feature allows specifying a starting%20phrase and an ending%20phrase (separated by a comma), and it will highlight all text in between:
https://newz.icu/#:~:text=Dr.%20Mullis,before%20now
Note the comma between Mullis and before
web.dev article about Text Fragments
CanIUse status of Text Fragments
PS - Please forgive choice of example website. It simply had the desired
elements required for the demonstration. Hoping we can focus on function
rather than content.
First off target refers to the BlockID found in either HTML code or chromes developer tools that you are trying to link to. Each code is different and you will need to do some digging to find the ID you are trying to reference. It should look something like div class="page-container drawer-page-content" id"PageContainer"Note that this is the format for the whole referenced section, not an individual text or image. To do that you would need to find the same piece of code but relating to your target block. For example dv id="your-block-id" Anyways I was just reading over this thread and an idea came to my mind, if you are a Shopify user and want to do this it is pretty much the same thing as stated.
But instead of
> http://url.to.site.example/index.html#target
You would put
> http://example.com/target
For example, I am setting up a disclaimer page with links leading to a newsletter signup and shopping blocks on my home page so I insert https://mystore-classifier.com/#shopify-section-1528945200235 for my hyperlink.
Please note that the -classifier is for my internal use and doesn't apply to you. This is just so I can keep track of my stores.
If you want to link to something other than your homepage you would put
> http://mystore-classifier.example/pagename/#BlockID
I hope someone found this useful, if there is something wrong with my explanation please let me know as I am not an HTML programmer my language is C#!
It's now possible to create an "anchor" link that goes to a specific part of any webpage in most browsers in a few different ways.
All of them will create a link with an #anchor at the end, where "anchor" is the thing that you want to navigate to. The browser will interpret the part of the URL after the # to scroll to a specific part of the page.
Here are 3 ways to create a url like this:
Using an existing anchor. Perhaps there will be one in the URL as you scroll down the page. If not, look around the page for a header that has a little link icon to the left of it and click it to update the browsers navigation url.
Using any html element's id property or the name or id on an ("anchor") element. The other answers explain this quite well. You will have to open the developer console and inspect the part of the page to find an id (and you may not find one). It's a little different on each browser, but here's how to inspect an element in Chrome.
Using a text snippet to highlight part of the page.
Basically, html tag can have id="abc" as shown below:
<div id="abc">test</div>
<p id="abc">test</p>
<span id="abc">test</span>
<a id="abc">test</a>
And, "<a>" tag can also have name="abc" as shown below:
<a name="abc">test</a>
Then, you can use the id and name values "abc" with "#" in urls as shown below to go to the specific part of a page:
https://www.example.com/#abc
https://www.example.com/index.html#abc
Then, you can put the urls above in "<a>" tag to create the links to id="abc" and name="abc" as shown below:
test
test
And, if you want to go to the specific part of the same page, you can only put the id and name values "abc" with "#" in "<a>" tag to create the links to id="abc" and name="abc" as shown below:
<!-- Go to the specific part of the same page -->
test
<div id="abc">test</div>
<!-- Go to the specific part of the same page -->
test
<a name="abc">test</a>
Anyone know of a doc with the default custom tags for email templates for Sendgrid? I know they have [UNSUB] and I'm using it.
I want Forward to Friend, View in Browser, etc...
I am uploading my own template code, not using the design editor. Do I have to create these? For view in browser, do I have to host my page and point to it?
Thanks
The tags for unsubscribe and view in browser should be [unsubscribe] and [weblink] respectively. Not sure why that's not documented, but I've opened up a ticket to get that fixed. Thanks for the heads up!
Edit:
I dug a little deeper and have a full list of built in tags:
weblink
email
unsubscribe
Also, if you define custom column headers on your lists, you can refer to those in the same manner. (Ex. If you add shoe size to each person in your list, you could do [shoe_size])
And the closing tip is that if you're editing in HTML-mode, you need to follow the full href convention:
<a href="[unsubscribe]" ...