I am using laravel and if some one puts the link in the description it shows as simple text only not as a link.So what needs to be done if the link should appear as link and simple text as simple text.
You can use jquery and regexp as below to achieve the same or you should use some wysiwyg editor
$(function(){
$("#yourTextArea").on("blur", function(){
var text = $(this).val();
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
var text1=text.replace(exp, "<a href='$1'>$1</a>");
var exp2 =/(^|[^\/])(www\.[\S]+(\b|$))/gim;
$(this).val(text1.replace(exp2, '$1<a target="_blank" href="http://$2">$2</a>'));
})
})
It is not possible to render HTML tags inside Textarea. It will treat it as a text. Either you make use of rich text editor or use div contenteditable.
Here is some more reference:
Rendering HTML inside textarea
I have a problem. I'd like to show CKEditor without toolbar, and still keep colors on it. This is my code.
$(document).ready(function() {
var textAreaName = 'description';
CKEDITOR.replace( textAreaName, {
removePlugins: 'toolbar,elementspath',
readOnly: true
} ) ;
var oCKeditor = CKEDITOR.instances[textAreaName];
});
The problem is text color doesn't show. It seems that CKEditor disable color as well.
Assuming (because it's still unclear) that you want to keep text color in editor's contents (BTW. editor's contents is not rendered using textarea - it is only used for easier data submitting) this is a solution:
config.extraAllowedContent = 'span{!color}';
This will allow span elements with color style. Read more about Advanced Content Filter.
use this config.uiColor = '#AADC6E';
Where config is object of that component.
I found this answer Default font for Rich Text field but it doesn't help me. I need to be able to set it in the application as this is an XPiNC (Xpages in Notes Client for those reading this in the CKEditor forum) app and I have no control over what is on the system beyond IBM Notes 8.5.3FP4. Because the config.js is server side for the CKEditor, I need to do this in the code or css somehow.
Is this even possible?
Add the following script block to your XPage. It will set the initial font and text size in CKEditor field.
<xp:scriptBlock
id="scriptBlock1">
<xp:this.value>
<![CDATA[XSP.addOnLoad(function() {
try{
CKEDITOR.on( 'instanceReady', function( ev ) {
if (ev.editor.getData() === "") {
ev.editor.setData('<span style="font-family: Comic Sans MS, cursive; font-size:36px;"></span>');
}
});
}catch(e){
console.log(e);
}
})]]></xp:this.value>
</xp:scriptBlock>
The trick is to set an initial value to field with a style when field is empty.
(Unfortunately, all attempts to set config.font_defaultLabel and config.fontSize_defaultLabel don't work like:
CKEDITOR.editorConfig = function( config ) {
config.font_defaultLabel = 'Comic Sans MS, cursive';
config.fontSize_defaultLabel = '36px';
};
)
Knut's solutions works great except you have to use instead of as you lose the font styling when clicking into the field and start typing.
I want to use KendoUI editor to basically only allow users to format text into paragraphs. Possibly allow bold and underline.
I'm struggling with 2 things:
I want to strip all html formatting from text when pasting
I want to disable keyboard shortcuts for bold, underline etc - they seem to work even when toolbar element is not there.
Thanks!
For pasting the only the text you might define a paste handler that remove all but text. This is as simple as:
$("#editor").kendoEditor({
paste: function (ev) {
ev.html = $(ev.html).text();
}
});
The paste handler receives as argument an event that has in html the text being parsed. We can use jQuery for getting only the text using $(ev.html).text()
For removing the shortcuts, and as far as I could test it with latest Kendo UI version, if you define only the tools that you want, only those shortcut are active. So if you say something like:
$("#editor").kendoEditor({
tools: [
"italic"
],
paste: function (ev) {
ev.html = $(ev.html).text();
}
});
Only italic shortcut <ctrl>+i is available. If you leave tools array empty then you do not have any.
This can be easily achieved now with pasteCleanup option.
See here: http://docs.telerik.com/kendo-ui/controls/editors/editor/pasting
Kendo MVC has also extension for this purpose. Example of usage:
.PasteCleanup(x => x.KeepNewLines(false))
false in this case means that you want to clear everything except new lines.
for me this is the complete solution
pasteCleanup: {
custom: function (html)
{
html = html.replace(/<\s*br\/*>/gi, '');
html = html.replace(/<\s*a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link - $1) ");
html = html.replace(/<\s*\/*.+?>/ig, '');
html = html.replace(/ {2,}/gi, '');
html = html.replace(/\n+\s*/gi, '');
html = html.replace(" ", '');
html = html.replace(/<.*?>/g, '');
return html;
}
}
I have been trying to put an image with a hyperlink on it into a google apps script ui. I first thought of using createAnchor(), but that only allows text. Then I thought of using a button, but as far as I know you cannot open a new tab/window and redirect in a callback function.
I also tried createHTML(), but the element is not handled by it as yet.
I have seen people overlay transparent buttons over images, but still have same issue in callback.
My research has not found an answer to this. Does anyone have any solutions/examples?
Thanks
This worked for me on Chrome20 and IE9
// Container for box and results
var imageContainer = app.createFlexTable();
// Setup the button
var button = app.createButton("ImageButton");
button.setStyleAttribute("background", "url(dontshowimagehere.JPG) no-repeat");
button.setStyleAttribute("position", "absolute");
button.setStyleAttribute("color", "transparent");
button.setStyleAttribute('zIndex','1');
button.setStyleAttribute("border", "0px solid black");
imageContainer.setWidget(0, 0, button);
// image to click
var image = app.createImage("image.jpg").setId(imageId);
imageContainer.setWidget(1,0, image);
The image has a slight (3px) offset. If important, this looks to fix it http://www.w3schools.com/css/css_positioning.asp (use relative for the flex table and top etc for the image and button)
Did you try a transparent Anchor overlaying the image?
function doGet() {
var app = UiApp.createApplication().setTitle("Image Anchor");
var panel = app.createAbsolutePanel().setWidth('50%').setHeight('50%');
var image = app.createImage().setUrl("https://lh6.googleusercontent.com/-v0Q3gPQz03Q/T_y5gcVw7LI/AAAAAAAAAF8/ol9uup7Xm2g/s512/GooglePlus-512-Red.png").setStyleAttribute("width", "28px").setStyleAttribute("height", "28px");
var anchor = app.createAnchor("?", "https://plus.google.com/u/1/116085534841818923812/posts").setHeight("28px").setWidth("28px").setStyleAttribute("opacity", "0.1").setTarget("blank");
panel.add(image,100,50);
panel.add(anchor,100,50);
app.add(panel);
return app.close();
}
app.createAbsolutePanel()
.add(app.createImage('https://www.google.com/images/logos/google_logo_41.png'))
.add(app.createAnchor('','https://www.google.co.uk/intl/en/about/')
.setStyleAttributes({position:'absolute',top:'0px',left:'0px',width:'201px',height:'47px',opacity:'0'}))
This is a tested one. It works fine.
It doesn't work with positioning the image (as 'absolute').
It doesn't work with .setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER)
I don't believe this is possible with the widgets available. I would suggest altering your UI's design to utilize an Anchor widget instead.
Use HTML Box if you are coding directly on your page. Click "Edit" to edit your page and go to "Insert>HTML Box" in your menu. It will accept javascript too! There are a few caveats - when using javascript, HTML Box will not accept links...too bad, but too many exploits there.
If you are coding in apps script, you could try to place the image on a panel and use absolute panel and position your link over your image. Another method could be to use the .setStyleAttribute for CSS styling and utilize the zIndex parameter to place a panel over top of your image....like so:
var panel = app.createSimplePanel();
// add your image to the simple panel or whatever panel you wish to choose in your GUI
var popPanel = app.createSimplePanel()
.setStyleAttribute('top','Y')
.setStyleAttribute('left','X')
.setStyleAttribute('zIndex','1')
.setStyleAttribute('position','fixed');
// add your anchor to the popPanel
app.add(panel).add(popPanel);
Not 100% sure if you can make this panel transparent, but you could try something like:
.setStyleAttribute('background',transparent')
or change the opacity via:
.setStyleAttribute('opacity','.5')
Hopes this gives you a few ideas!
I managed to do it with a single Anchor object and using CSS3.
It works on Chrome, I did not test it in other Browsers.
gui.createAnchor("", false, "$DESTINATION_URL$")
.setStyleAttributes({ "display":"block",
"width":"$IMAGE_WIDTH_IN_PIXEL$",
"height":"$IMAGE_HEIGHT_IN_PIXEL$",
"background":"url($URL_OF_THE_IMAGE$)",
"background-size":"100% 100%",
"background-repeat":"no-repeat" })
Of course you have to replace the $......$ with your data.
Thierry
If you first create all your HTML in a string, you can then replace the content of a page with the HTML you want like this:
var myString = 'the html you want to add, for example you image link and button';
var page = SitesApp.getSite('example.com', 'mysite').getChildByName('targetpage');
var upage = page.setHtmlContent('<div>' + myString + '</div>');