Set HTMLEditorExtender to open links in a new window - ajaxcontroltoolkit

I am trying to use the Ajax Toolkit HTMLEditor (June 2012 release) to improve a strictly internal application used to post news items and links (mostly to internal resources). Everything works very well except that I have been unable to get the link creator to create the links to open in a new window (essentially with a 'target="_blank"' tag).
I have exposed the source code tab and tried to add the 'target="_blank"' tag into the link manually, but that seems to break the HTML display, and my app shows the raw HTML code rather than the rendered HTML. If I use the link creator and don't alter the link it creates, everything works fine, except of course the link opens in the same window. Sanitizer on or off makes no difference.
So far I have not been able to uncover any doucmentation on how to accomplish what I am trying to accomplish. Any ideas out there?

OK, figured it out, and now I feel dumb. All that was required was to use a regex to find the link pattern and replace it with with a pattern containing the target="blank" tag. I just feed the text generated by the extended text box into the following function:
Protected Function addLinkTarget(ByVal strText As String) As String
Dim pattern As String = "(?<start><a[^>]*)(?<end>>)"
Dim repl As String = "${start} target=""_blank"" ${end}"
strText = Regex.Replace(strText, pattern, repl)
Return strText
End Function
Or, in C#
protected string addLinkTarget(string strText)
{
string pattern = "(?<start><a[^>]*)(?<end>>)";
string repl = "${start} target=\"_blank\" ${end}";
strText = Regex.Replace(strText, pattern, repl);
return strText;
}

Related

ITextPDF - Link creation with PDFAnnotation

I have a question about hyperlinks within pdf documents created with itext. Currently, using the following code written in java, I am able to successfully create links. However, when I hover over the link, the link text is displayed. The client does not want the link text to appear upon hover-over. How can I either remove the hover-over, or give it alternate text to display (e.g. "Course Info")? I am using itext version 5.5.9. I have looked at "iText in Action" chapter 7 but was not able to find what I needed. Is there a better way to create the links? Any help and examples will be appreciated. Thanks.
package edu.ucsd.act.academic.studente2t.util;
import com.itextpdf.text.Rectangle;
import com.itextpdf.text.pdf.PdfAction;
import com.itextpdf.text.pdf.PdfAnnotation;
import com.itextpdf.text.pdf.PdfBorderArray;
import com.itextpdf.text.pdf.PdfContentByte;
import com.itextpdf.text.pdf.PdfPCell;
import com.itextpdf.text.pdf.PdfPCellEvent;
import com.itextpdf.text.pdf.PdfWriter;
class LinkInCellEvent implements PdfPCellEvent
{
protected String url;
public LinkInCellEvent(String url)
{
this.url = url;
}
public void cellLayout(PdfPCell cell, Rectangle position,
PdfContentByte[] canvases)
{
PdfWriter writer = canvases[0].getPdfWriter();
PdfAction action = new PdfAction(url);
PdfAnnotation link = PdfAnnotation.createLink(writer, position,
PdfAnnotation.HIGHLIGHT_INVERT, action);
PdfBorderArray border = new PdfBorderArray(0, 0, 0);
link.setBorder(border);
writer.addAnnotation(link);
}
}
This is not an iText problem. It's inherent to PDF. The PDF specification (ISO-32000-1) doesn't say anything about the way viewers should present tool tips for link annotations.
Your client (who probably should also be our client), may be confused by the following concepts:
Additional actions
The only occurrence of the word "tool tip" is in a NOTE when the E (enter) and X (exit) event are described in the section about additional actions. One can use additional actions, for instance on a widget annotation, to have a custom tool tip appear / disappear when someone hovers over a widget annotation.
When you study the PDF standard, you will see that there are several instances where you can define additional action (/AA), but link annotations aren't one of them.
Alternative field name
There's also the /TU entry (formerly known as the user name entry), which is (I quote the spec) an alternative field name that shall be used in place of the actual field name wherever the field shall be identified in the user interface (such as in error or status messages referring to the field). This text is also useful when extracting the document’s contents in support of accessibility to users with disabilities or for other purposes. The value of the /TU entry is often used by viewers as a tool tip, but as you can tell from the description, the /TU entry is specific for fields, not for annotations. It can only be used in a field dictionary, not in an annotation dictionary.
Conclusion:
Whatever is shown when someone hovers over a link annotation is not described in the specification. Every vendor of a PDF viewer may decide what to show (if anything) when a user hovers over a link annotation. There is no way to add something to the PDF that can force the viewer to show something else (or nothing).

CKEditor automatically strips classes from div

I am using CKEditor as a back end editor on my website. It is driving me round the bend though as it seems to want to change the code to how it sees fit whenever I press the source button. For example if I hit source and create a <div>...
<div class="myclass">some content</div>
It then for no apparent reason strips the class from the <div>, so when I hit source again it has been changed to...
<div>some content</div>
I presume this irritating behaviour can be turned off in the config.js, but I have been digging and cant find anything in documentation to turn it off.
Disabling content filtering
The easiest solution is going to the config.js and setting:
config.allowedContent = true;
(Remember to clear browser's cache). Then CKEditor stops filtering the inputted content at all. However, this will totally disable content filtering which is one of the most important CKEditor features.
Configuring content filtering
You can also configure CKEditor's content filter more precisely to allow only these element, classes, styles and attributes which you need. This solution is much better, because CKEditor will still remove a lot of crappy HTML which browsers produce when copying and pasting content, but it will not strip the content you want.
For example, you can extend the default CKEditor's configuration to accept all div classes:
config.extraAllowedContent = 'div(*)';
Or some Bootstrap stuff:
config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';
Or you can allow description lists with optional dir attributes for dt and dd elements:
config.extraAllowedContent = 'dl; dt dd[dir]';
These were just very basic examples. You can write all kind of rules - requiring attributes, classes or styles, matching only special elements, matching all elements. You can also disallow stuff and totally redefine CKEditor's rules.
Read more about:
Content filtering in CKEditor – why do you need content filter.
Advanced Content Filter – in deep description of the filtering mechanism.
Allowed content rules – how to write allowed content rules.
I found a solution.
This turns off the filtering, it's working, but not a good idea...
config.allowedContent = true;
To play with a content string works fine for id, etc, but not for the class and style attributes, because you have () and {} for class and style filtering.
So my bet is for allowing any class in the editor is:
config.extraAllowedContent = '*(*)';
This allows any class and any inline style.
config.extraAllowedContent = '*(*);*{*}';
To allow only class="asdf1" and class="asdf2" for any tag:
config.extraAllowedContent = '*(asdf1,asdf2)';
(so you have to specify the classnames)
To allow only class="asdf" only for p tag:
config.extraAllowedContent = 'p(asdf)';
To allow id attribute for any tag:
config.extraAllowedContent = '*[id]';
etc etc
To allow style tag (<style type="text/css">...</style>):
config.extraAllowedContent = 'style';
To be a bit more complex:
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';
Hope it's a better solution...
Edit: this answer is for those who use ckeditor module in drupal.
I found a solution which doesn't require modifying ckeditor js file.
this answer is copied from here. all credits should goes to original author.
Go to "Admin >> Configuration >> CKEditor"; under Profiles, choose your profile (e.g. Full).
Edit that profile, and on "Advanced Options >> Custom JavaScript configuration" add config.allowedContent = true;.
Don't forget to flush the cache under "Performance tab."
Since CKEditor v4.1, you can do this in config.js of CKEditor:
CKEDITOR.editorConfig = function( config ) {
config.extraAllowedContent = '*[id](*)'; // remove '[id]', if you don't want IDs for HTML tags
}
You can refer to the official documentation for the detailed syntax of Allowed Content Rules
if you're using ckeditor 4.x you can try
config.allowedContent = true;
if you're using ckeditor 3.x you may be having this issue.
try putting the following line in config.js
config.ignoreEmptyParagraph = false;
This is called ACF(Automatic Content Filter) in ckeditor.It remove all unnessary tag's What we are using in text content.Using this command in your config.js file should be turn off this ACK.
config.allowedContent = true;
Please refer to the official Advanced Content Filter guide and plugin integration tutorial.
You'll find much more than this about this powerful feature. Also see config.extraAllowedContent that seems suitable for your needs.
Following is the complete example for CKEDITOR 4.x :
HTML
<textarea name="post_content" id="post_content" class="form-control"></textarea>
SCRIPT
CKEDITOR.replace('post_content', {
allowedContent:true,
});
The above code will allow all tags in the editor.
For more Detail : CK EDITOR Allowed Content Rules
If you use Drupal AND the module called "WYSIWYG" with the CKEditor library, then the following workaround could be a solution. For me it works like a charm. I use CKEditor 4.4.5 and WYSIWYG 2.2 in Drupal 7.33. I found this workaround here: https://www.drupal.org/node/1956778.
Here it is:
I create a custom module and put the following code in the ".module" file:
<?php
/**
* Implements hook_wysiwyg_editor_settings_alter().
*/
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
if ($context['profile']->editor == 'ckeditor') {
$settings['allowedContent'] = TRUE;
}
}
?>
I hope this help other Drupal users.
I found that switching to use full html instead of filtered html (below the editor in the Text Format dropdown box) is what fixed this problem for me. Otherwise the style would disappear.
I would like to add this config.allowedContent = true; needs to be added to the ckeditor.config.js file not the config.js, config.js did nothing for me but adding it to the top area of ckeditor.config.js kept my div classes
Another option if using drupal is simply to add the css style that you want to use. that way it does not strip out the style or class name.
so in my case under the css tab in drupal 7 simply add something like
facebook=span.icon-facebook2
also check that font-styles button is enabled
I face same problem on chrome with ckeditor 4.7.1. Just disable pasteFilter on ckeditor instanceReady.This property disable all filter options of Advance Content Filter(ACF).
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.pasteFilter.disabled = true;
});

HTML Tags in GWT internationalization

I'm using the internationalization of GWT to manage the different languages of my application. I have a text where some words are in bold. Therefore I did the same thing as described here.
#DefaultMessage("Welcome back, {startBold,<b>}{0}{endBold,</b>}")
String testMessage(String name);
However, when I run the application, I get "Welcome back, < b>Peter< /b>" (the HTML is written out and not interpreted. I intentionally put a space between < b so that this text editor does not interpret the html tag).
Does anyone know how to solve this issue? Many thanks in advance!
P.S.
Code fragment which gets the language string:
Label label = new Label();
label.addStyleName("intro-Text");
label.setText(new HTML(trans.testMessage(name)).getHTML());
Instead of using a Label use the HTML widget.
HTML text = new HTML();
text.addStyleName("intro-Text");
text.setHTML(trans.testMessage(name));
Hope that helps.

How to use unescape() function inside JavaScript?

I have a JSP page in which I have JavaScript function that will be called when a link is clicked. Now, when the value reaches the JavaScript function, the apostrophe is encoded.
Example:
Name#039;s
Before # there is &, which originally should be:
Name's
I have used the unescape() decode function, but nothing seems to work. In the end, I had to delete the characters and add the apostrophe. Does anyone know a fix for this? Is it that JSP doesn't support encoding for &? When I was writing the same encode value in this page, it changed the symbol to the apostrophe, which is what I wanted in my code.
Built-in Javascript function such as unescape(), decodeURIComponent() has nothing to do with the string you are working on, because the one you are looking to decode are HTML entites.
There are no HTML entites decoder available in Javascript, but since you are working with a browser, if the string is considered safe, you may do the following (in JQuery, for example)
var str = $('<p />').html(str).text();
It bascially insert the string as HTML to a <p> element and then extract the text within.
Edit: I just realize the JSP output you posted is not real HTML entities; To process the example given you should use the following, add & before every #1234; and make it Ӓ:
var str = $('<p />').html(str.replace(/\#(\d+)\;/g '&#$1;')).text();

GWT - Create a link to external website

I need to create a link that point to another website, not to the portal itself trought ajax call. I write this at the moment :
InlineLabel fv1=new InlineLabel("Validator W3C : ");
InlineHyperlink linkfv1 = new InlineHyperlink("HTML" , "http://validator.w3.org/");
InlineLabel fv2=new InlineLabel(" | ");
InlineHyperlink linkfv2 = new InlineHyperlink("CSS" , "http://jigsaw.w3.org/");
but it call the portal. In fact, if i click on HTML it adds #http://validator.w3.org/ in the navigation bar. How can I fix this? Bye
The docs for InlineLabel say that it's meant to be used for "internal" links -- i.e., only to change the part after the #, like you're seeing.
You want to use Anchor -- this will result in an <a> tag being added to your page.
I prefer this solution:
Define an object of HTML class with the necessary parameters then add that object to a container in your GWT interface, FlowPanel for instance.
HTML link = new HTML("Take me to stackoverflow");
flowPanel.add(link);