I am adding textboxes dynamically to a div. Something likhe this
$('#xyz').click(function()
{
$(#myDiv).append('<textarea></textarea>');
});
Now I want to attach tinymce editor to these textareas, Can you help me in doing this?
Try this:
$('#xyz').click(function() {
var myTextarea = $("<textarea></textarea>");
myTextarea.attr("id", "mce-editor");
$("#myDiv").append(myTextarea);
// this inistalises the TinyMCE editor upon the element with the id in the last parameter.
tinyMCE.execCommand("mceAddControl", false, "mce-editor");
});
You could even attach the tinymce element to the div directly, because you don't need a textarea in order to edit and submit text using a tinymce editor instance. Tinymce will create an editable iframe in the dom in which the user is able to edit html content. OnSave the editors content gets written back to the html element the tinymce editor was created for (this can be a textarea, a div, a paragraph or another html elment).
tinyMCE.execCommand('mceAddControl', false, 'myDiv');
Related
I need to check if Javascript is enabled or not. If it is disabled I need to hide a placeholder. In this placeholder is a widget that is based on JS (jQuery).
When Javascript is disabled the user can only see a white box with wasted space.
I found out that I can use the <noscript> Tag to display content (for example a <p> with an ID to identify this state) when JS is disabled but I don't know how to implement a function that checks if this ID is shown to the user or not.
When the ID is shown it should hide the placeholder. Is there any solution for doing this with C#?
Thanks for any help.
You can set a CSS class on your body tag (or any appropriate parent tag) when you render the markup, and then use Javascript to change that class. When the class changes you can set different CSS stylings, including hiding markup:
Initial html:
<body class="no-js">
<div class="placeholder"></div>
</body>
Then some jQuery:
$( document ).ready(function() {
//Remove the no-js class and replace it with js
$(".no-js").addClass('js');
$(".no-js").removeClass('no-js');
});
And some CSS:
.no-js .placeholder{
display: none;
}
This way your CSS rule will default to hiding the placeholder, but jQuery will turn it back on again.
EDIT: jQuery is a little bit case sensitive ;)
You can do that with JavaScript as well. Sounds weird but yes.
You even don't have to check for an ID if it's shown or not. Just hide the placeholder initially with CSS. Then, if JavaScript is enabled, show the placeholder.
I have a textarea which is dynamicly changed in c# by doing this:
TextBox1.Text=(String)Application["chat"];
When the text is to big for the textarea, I would like the scroll to always be on the bottom. I have tried to do this in JS(jquery) with the change event.
$("#TextBox1").change(function () {
alert("alert");
// $('#TextBox1').scrollTop($('#TextBox1')[0].scrollHeight);
});
This is the code I use in Javascript. The problem is that the event does not occur, even if the text in the textarea is changed, which I have proven by debuging it with the alert which does not execute.
var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
Regarding this issue of your event not firing: If this is ASP.NET webforms, it's unlikely that the client-side id of your textbox (input) is TextBox1.
View source on the generated page and check what the ID renders as and update you JS accordingly.
You sould use this code to scroll down the textarea to the bottom:
$("#TextBox1").scrollTop($("#TextBox1").height());
If you would like to scroll down, when it's content changes, use this:
$("#TextBox1").change(function(){
$(this).scrollTop($(this).height());
});
I have embedded the TinyMCE in WebBrowser control and using it as a HTML WYSIWYG editor in my WPF app.
On the html page containing TinyMCE, I have:
function getContent() {
return tinyMCE.get('elm1').getContent();
}
I am calling this function on the WPF Button click as follows to obtain the content of TinyMCE in C#:
string editHtml = this.webBrowser1.InvokeScript("getContent").ToString();
However I want to set the content of the TinyMCE from the file before it loads, just to show text previously entered by the user, so that he/she can continue to modify the older content, instead writing the new content. How can I set the content of the TinyMCE through C#.
Thank you.
If you are saving the data in database then on edit, select the data from table, and assign the text to your text box..
txbItemText.Text = ListofItems[0].description;
I am facing a problem I have to fill a TextArea programatically. I used the following code.
System.Windows.Forms.HtmlElement reviewText = myDoc.GetElementById("review-text");
reviewText.InnerText = Program.mainForm.richTextBox1.Text.Trim();
This works fine and it sets the text in TextArea control. The problem that I am facing is that this text appears light gary. When the user clicks over this text it disappears. It happens only on first click.
So I tried the following code to first click this box and then set the text.
reviewText.InvokeMember("click");
And then tried to set the text in the TextArea but got the same behaviour.
I dug into the source of the page and found some script associated with this TextArea.
Source of TextArea
<textarea onkeyup="javascript:yelp.ui.widget.countChars(this.form.comment,5000);" onkeydown="javascript:yelp.ui.widget.countChars(this.form.comment,5000);" name="comment" id="review-text" class="form400" rows="8" cols="40" style="height: 86px;"></textarea>
Script associated with TextArea
<script type="text/javascript">
var bizName = "Geary Club";
if ($('review-text'))
{
new yelp.ui.widget.DefaultValueTextField($('review-text'), 'Please write here');
}
Will somebody suggest to me how to insert the text into this TextArea control?
Is this an ASP.NET web app? If it is, the System.Windows.Forms.HtmlElement is a problem. What I think is going on is that you need to somehow disable the new yelp.ui.widget.DefaultValueTextField JavaScript code when you're pre-filling the TextArea. Are you able to use an ASP.NET TextBox control with the multi-line properties set? If so, I'd use that and change your top code to just set the .Text property of the Textbox control.
Either way, in the Javascript (if this is jQuery), I'd do this:
if ($('review-text') && $('review-text').val() != "")
{
new yelp.ui.widget.DefaultValueTextField($('review-text'), 'Please write here');
}
That way the default value is only set if there is no text.
I changed the HTML of text area.And remove the class="form400 default_valued_text_field" attribute from its html.
myDoc = this.webBrowser1.Document;
myDoc.GetElementById("review-text").OuterHtml = "<textarea id=\"review-text\" onkeyup=\"javascript:ui.widget.countChars(this.form.comment,5000);\" onkeydown=\"javascript:ui.widget.countChars(this.form.comment,5000);\" name=\"comment\" rows=\"8\" cols=\"40\" style=\"height: 86px;\"></textarea>";
After that i set the inner text of this element
myDoc.GetElementById("review-text").InnerText = "Testing";
I have some textbox and submit button.
When ever I click the submit button the div should be added dynamically in my aspx page.
Also the information which is available in the text box also displayed in the page default.
Use:Without using database i need to display the user suggestion in my page...
You have 2 possibilities:
You can add dynamically an asp.net panel which generates div tag.
// Create dynamic controls here.
// Use "using System.Web.UI.WebControls;"
Panel panel1 = new Panel();
panel1.ID = "MyPanel";
Form1.Controls.Add(panel1);
Create the div using jQuery
Select the parent element with
$("#id"), $("<element>") or $(".class") and then $(theElement).append("<div>Your content</div>");