I want to have a button to insert an image into primefaces text editor when click. The image may be as
<img src=\"data:image/png;base64," + imgToBase64String("Test") + "\">
I used the function PrimeFaces.widgets.editorA.editor.editor.insertText(PrimeFaces.widgets.editorA.editor.getSelection().index, ImageInfo, 'bold', true)"
But it just show the text about "<img src="data:image/png;base64," + imgToBase64String("Test") + "">", not an image, is there has anyway to insert an image just like call function as editor.editor.insertText?
Thanks a lot!
Related
I have put together some code in HTML and have a Color picker, that is working perfect. I also put in a some code and create a slider bar to try and control the brightness of the selected color. The problem is when I choose a color the slider bar wont change the brightness of the selected color. How do I connect the slider value to my color brightness? I will put my code for the slider and color picker below. Please let me know if anyone can help. Thank you -Austin
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">");
client.println("<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js\"></script>");
client.println("</head><body>");
client.println("<form>");
client.println("<hr>");
client.println("<section class=intensity>");
client.println("<label for=intensity>Light Brightness");
client.println("<br>");
client.println("<span>Dim</span>");
client.println("<input id=intensity type=range name=Dim min=0 max=255 step=1>");
client.println("<span>Bright</span>");
client.println("</section>");
client.println("</form>");
client.println("<div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1></div>");
client.println("<a class=\"btn btn-primary btn-lg\" href=\"#\" id=\"change_color\" role=\"button\">Change Color</a> ");
client.println("<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div>");
client.println("<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);");
//client.println("<script>function update(intensity)");
client.println("document.getElementById(\"change_color\").href=\"?r\" + Math.round(picker.rgb[0]) + \"g\" + Math.round(picker.rgb[1]) + \"b\" + Math.round(picker.rgb[2]) + intensity + \"&\";}</script></body></html>");
You need maybe use option opacity.
Example:
div {
opacity : 0.5;
}
I have a text area with one string binded to it. With the text color as white by default.
<textarea style="background-color: black;color:#fff;" [(ngModel)]="outputText"></textarea>
The bound string contains multiple variables.
return this.outputText = this.test1 + " test1Stat" + this.test2 + " test2Stat" + this.test3 + " test3Stat";
What I want to do is, if test1 is less than 1, it should show "test1 test1Stat" in red, while everything else is in green. Is there a way to do this?
It's not possible to color part of the text in a textarea,
However- you can try to use the 'contenteditable' property instead.
It basically turns your div into a textbox, and you can use html tags and such inside.
.greenText{
color:green;}
div{
border:black solid 1px;
padding:20px;
}
<div contenteditable="true">text text <span class='greenText'>GREEN TEXT</span> more text that you can edit</div>
All I ever wanted is my DropDownList to be special. :(
I can write just names, but that won't be as intresting. So I tried to add images, like so:
// Somewhere in the code...
ListItem item = new ListItem();
item.Value = // something
item.Text = "<img src=\"" + <AnImagePathIGetFromTheDatabase> + "\">";
<MyDropDownlist>.Items.Add(item);
However the evil thing escapes the text in a list automatically, like so:
<img src="https://41.media.tumblr.com/bcb96f4a4c46a1001118ee216d7abacf/tumblr_mgfhbngsDl1r58qimo1_500.png">
So I get text instead of an image. How can I overcome this?
EDIT: Using Lajos' solution, I've got to a situation where I inspect the selection element, And I get the following :
<img src="http://i.somethingawful.com/u/robtg/Fiesta/f05.jpg" alt="monster" height="42" width="42">
Which is pretty much what I was looking for. Sadly, in the page source, I get the following:
<option value="MeaninglessImp" class="imageconverter">http://i.somethingawful.com/u/robtg/Fiesta/f05.jpg</option>
The list itself shows 2 empty cells. The inspector says the pictures have been scaled down to 0x0.
Fiddle: here.
Why does that happen?
You can set the Text to contain the source and not show them until the page is loaded. You can implement a Javascript library which replaces src text with images in your list. That should solve the problem.
// Somewhere in the code...
ListItem item = new ListItem();
item.Value = // something
item.Text = <AnImagePathIGetFromTheDatabase>;
listItem.Attributes.Add("class", "imageconverter");
<MyDropDownlist>.Items.Add(item);
And in Javascript you need something like:
$(function() {
$(".imageconverter").each(function() {
$(this).html('<img src="' + $(this).text() + '">');
});
});
I use a site called finviz.com which provides stock charts. I like to view the charts along different timeframes, one on top of the other. I have been using excel to do this. E.g. if i enter "aapl" in cell A1, I use a simple concatenate formula in excel to put together the hyperlinks I need as follows:
<img src = 'http://elite.finviz.com/chart.ashx?t=aapl&ty=c&ta=st_c,sch_100,sma2_50,sma2_20,sma2_100,stofu_b_5_3_3&p=d&s=l'><br>
<img src = 'http://elite.finviz.com/chart.ashx?t=aapl&ty=c&ta=0&p=i15&s=l'><br>
<img src = 'http://elite.finviz.com/chart.ashx?t=aapl&ty=c&ta=0&p=i3&s=l'>[/code]
however this is pretty slow going. for each different ticker, i need to copy/paste the excel text into an html file on my desktop and refresh my chrome browser. i would prefer to have an input field in my html code that lets me enter a ticker symbol which then dynamically updates the html code for a different stock.
Can anybody suggest how to do that?
One way of doing it is to set up your input box and button, then use jQuery to update the image source.
Add a new input box and button to your HTML and give ids to your images:
<input type="text" id="tickerCode" /><input type="button" id="setTicker" value="Set Ticker" />
<img id="ticker1" src = 'http://elite.finviz.com/chart.ashx?t=aapl&ty=c&ta=st_c,sch_100,sma2_50,sma2_20,sma2_100,stofu_b_5_3_3&p=d&s=l'><br>
<img id="ticker2" src = 'http://elite.finviz.com/chart.ashx?t=aapl&ty=c&ta=0&p=i15&s=l'><br>
<img id="ticker3" src = 'http://elite.finviz.com/chart.ashx?t=aapl&ty=c&ta=0&p=i3&s=l'>
Now on your new button click:
$('#setTicker').click(function () {
$('#ticker1').attr("src", 'http://elite.finviz.com/chart.ashx?t=' + $('#tickerCode').val() + '&ty=c&ta=st_c,sch_100,sma2_50,sma2_20,sma2_100,stofu_b_5_3_3&p=d&s=l');
$('#ticker2').attr("src", 'http://elite.finviz.com/chart.ashx?t=' + $('#tickerCode').val() + '&ty=c&ta=0&p=i15&s=l');
$('#ticker3').attr("src", 'http://elite.finviz.com/chart.ashx?t=' + $('#tickerCode').val() + '&ty=c&ta=0&p=i3&s=l');
});
In case you don't want to use JQuery here is a plain JavaScript version of intracept's very nice code.
<input type="text" id="tickerCode" /><input type="button" id="setTicker" value="Set Ticker" />
<img id="ticker1" src = 'http://elite.finviz.com/chart.ashx?t=aapl&ty=c&ta=st_c,sch_100,sma2_50,sma2_20,sma2_100,stofu_b_5_3_3&p=d&s=l'><br>
<img id="ticker2" src = 'http://elite.finviz.com/chart.ashx?t=aapl&ty=c&ta=0&p=i15&s=l'><br>
<img id="ticker3" src = 'http://elite.finviz.com/chart.ashx?t=aapl&ty=c&ta=0&p=i3&s=l'>
<script>
document.getElementById('setTicker').addEventListener('click', function () {
var symbol = document.getElementById('tickerCode').value;
document.getElementById('ticker1').src = 'http://elite.finviz.com/chart.ashx?t=' + symbol + '&ty=c&ta=st_c,sch_100,sma2_50,sma2_20,sma2_100,stofu_b_5_3_3&p=d&s=l';
document.getElementById('ticker2').src = 'http://elite.finviz.com/chart.ashx?t=' + symbol + '&ty=c&ta=0&p=i15&s=l';
document.getElementById('ticker3').src = 'http://elite.finviz.com/chart.ashx?t=' + symbol + '&ty=c&ta=0&p=i3&s=l';
});
</script>
I am adding the link button and a image logo with that link dynamically from code behind. On the page it is showing linktext and then the image '[LinkText][Image]'. I want to show in the other manner like '[Image][LinkText]'. How we can implement it, please help.
Here is my code snippet:
HtmlGenericControl imgToAdd = new HtmlGenericControl("img");
imgToAdd.Attributes.Add("src", "../Images/Click.png");
imgToAdd.Attributes.Add("id", "img" + containerCountForLabels);
imgToAdd.Style.Add("height", "16px");
imgToAdd.Style.Add("vertical-align", "top");
HtmlGenericControl linkToAdd = new HtmlGenericControl("a");
linkToAdd.Attributes.Add("id", "linkbtn" + containerCountForLabels);
linkToAdd.Style.Add("margin-bottom", "5px");
linkToAdd.Style.Add("margin-top", "6px");
linkToAdd.Style.Add("margin-left", "10px");
linkToAdd.Style.Add("margin-right", "10px");
linkToAdd.Style.Add("font-size", "13px");
linkToAdd.Style.Add("float", "left");
linkToAdd.Style.Add("cursor", "pointer");
linkToAdd.Style.Add("color", "white");
linkToAdd.Style.Add("text-decoration", "underline");
linkToAdd.Style.Add("vertical-align", "top");
linkToAdd.Attributes.Add("onclick", "ShowHideDiv('img" + containerCountForLabels + "','divMain" + containerCountForLabels + "');");
linkToAdd.InnerText = dtReportLocal.Rows[0]["SubExpenseName"].ToString();
linkToAdd.Controls.Add(imgToAdd);
divForLink.Controls.Add(linkToAdd);
containerCountForLabels++;
I dont know why it shows before, but what you can do is to add the image and text as an innerHTML of the link instead using InnerText, something like the code below:
linkToAdd.InnerHTML = "<img src='../Images/Click.png' id='img"+ containerCountForLabels+"' style='height:16px;vertical-align:top;'>"+dtReportLocal.Rows[0]["SubExpenseName"].ToString();