Does anyone know how to auto-populate the tinymce editor from the ASP.NET MVC model? In other words, what code do I need to use to set the contents of tinymce?
EDITED:
My problem is that tinyMCE is hiding my textbox contents. It opens blank, even though if I view the source of the page in my browser, it shows the correct info (i.e. from the Model).
Here is my code:
Javascript:
<script type="text/javascript">
tinyMCE.init({
theme: "advanced",
mode: "textareas",
plugins: "",
theme_advanced_buttons3_add: "fullpage",
theme_advanced_toolbar_location: "top"
}
);
</script>
Text Area:
<%= Html.TextArea("PostContent", Model.PostContent,30, 68, new {id="newPost"}) %>
Thanks,
Jack
<textarea><%= Model.TextAreaContent %></textarea>
Please note that since you cannot escape the contents of your string (you need proper HTML elements for TinyMCE) you have to be sure that there's nothing nasty within your string. I'm using the HTML Agility Pack to prefilter the contents before putting it into the page.
Related
I'm attempting to use the inline mode of TinyMCE with an MVC 5 page. I created the HTML content using a TinyMCE editor in the standard mode as follows:
That data is saved back to the database and then retrieved and displayed on a different page. On that page I've set up an instance of TinyMCE to display that content in the inline view as follows:
<div id="myeditablediv">#Model.LongDescription</div>
<script src="~/scripts/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: '#myeditablediv',
entity_encoding: 'raw',
inline: true
});
</script>
I'd expected that to show the formatted HTML in a clickable TinyMCE control with no toolbars, but instead it's just showing the raw HTML:
Clicking on the control does switch it into edit mode and the toolbar appears etc:
so it looks like I'm not passing the data to be rendered to the control correctly when setting up the div with <div id="myeditablediv">#Model.LongDescription</div>?
I am guessing that your code is escaping the HTML when inserting it back into the page. I don't know ASP.NET but there is likely something you can do to #Model.LongDescription to have it place the raw HTML into the page.
A quick google search suggest this might be the answer:
#Html.Raw(#Model.LongDescription)
In my web application I am using the tinymce editor to allow users to create html emails. I have included a feature where they can save a template to the database so they can use it for multiple emails and access it where ever they want. But when I am trying to load the content that is stored in the database, back into the editor, it just inserts the html string. I want it so the html is rendered so they can see the template like it was when they saved it.
I think the problem has something to do with ERB because when I pass in a normal string it works fine, but when I use ERB to use an instance variable it just sets the content to the html string, not correctly formatted. Here is my code:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
...
oninit : "loadTemplate"
});
function loadTemplate() {
tinyMCE.activeEditor.setContent("<%= #template %>");
}
This would just put <strong>Text Here</strong> in the editor, but this:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
...
oninit : "loadTemplate"
});
function loadTemplate() {
template = "<strong>Text Here</strong>";
tinyMCE.activeEditor.setContent(template);
}
works perfectly fine and puts Text Here in the editor. What is going on here that is causing this problem?
If #template contains an HTML String, rails will automatically escape it. To prevent the escaping, try adding raw, like so:
<%= raw #template %>
I'm working on a site that has a dynamically generated FAQ and I'm trying to get nested accordions working. The problem is, only the first collection of questions take on the ui-accordion class.
Here's my code:
http://jsfiddle.net/SmFdt/
(I just copied the source of the page and stripped out most of the text)
What am I doing wrong?
You've got the same id assigned to multiple divs. Try the following instead:
HTML
<h1>Frequently Asked Questions</h1>
<div id="faqs-container" class="accordian">
<h3>One</h3>
<div class="accordian">
<h3>A</h3>
<div>AAAAAAAAAA</div>
<h3>B</h3>
<div>BBBBBBBBBB</div>
</div>
<h3>Two</h3>
<div class="accordian">
<h3>A2</h3>
<div>AAAAAAAAAA2</div>
<h3>B2</h3>
<div>BBBBBBBBBB2</div>
</div>
</div>
JavaScript
$("div.accordian").accordion({
autoHeight: false,
collapsible: true,
active: false
});
Link to example: http://jsfiddle.net/SmFdt/1/
Try this http://jsfiddle.net/SmFdt/3/
The reason it was not working was you were using the same id for multiple divs. I have changed the ids to classes.
On a side note, you have lot of code to display the accordion. You may possibly want to consider reducing some code. (e.g. no need of <p> inside <div>. You can control the spacing using CSS margin and padding properties.)
I'm looking at outsourcing some in-page help on a large web application I am creating and would like to make it really easy for this content to added to our pages when we're ready for it.
So I was thinking I could create a system where I can add text files to the same folder where an action expects it's view to be and read out the content of that file the content in that file can be passed back to the view to display. Either that or create a helper that would do the same.
Example
Controllers
HomeController.cs
Views
Home
Index.aspx
Index.txt
Index.aspx would then have access to the content in Index.txt.
How would I start going about creating this system. Are there any built in classes in .NET MVC that I could take advantage of?
A similar question was asked yesterday: Including static html file from ~/Content into ASP.NET MVC view.
Basically you can read the text from the file and include it inside your view by using File.ReadAllText so you would have something like this inside your index.aspx file
<%= File.ReadAllText(Server.MapPath("~/Views/Home/index.txt")) %>
I'd create a parallel hierarchy in the Content folder and put the files there, probably as HTML. Then you can simply load them via AJAX in the view using the parallel hierarchy convention.
Content
Help
Home
index-help.html
about-help.html
Foo
index-help.html
bar-help.html
Then in your views
<div class="help">
<noscript>
<a href='#Url.Content( "~/content/help/home/index-help.html" )'>Click for Help</a>
</noscript>
</div>
<script type="text/javascript">
$(function() {
$('.help').load( '#Url.Content( "~/content/help/home/index-help.html" )' );
});
</script>
You may also be able to extract the controller/action from RouteData in the view if your routes are consistent and move this to your _Layout.cshtml file with the path being provided by route data.
#{
var controller = ViewContext.RouteData["controller"] as string;
var action = ViewContext.RouteData["action"] as string;
var url = Url.Content( string.Format( "~/content/help/{0}/{1}-help.html", controller, action ) );
<div class="help">
<noscript>
<a href="#url>Click for Help</a>
</noscript>
</div>
<script type="text/javascript">
$(function() {
$('.help').load( "#url" );
});
</script>
}
One possible solution would be to store them as xml file instead, that are serialized from the model the view is expecting. You could then create an Action Filter populate the model being returned with the data from the XML file. I hope that helps.
I have a nested attribute (speeches) under a model Speaker and I'm using tinyMce to let a speaker fill out a profile form where they might have one or more speeches they give.
I'm using the Rails 2.3 nested attributes helpers as used in Ryan Bates's complex-form-example github account.
The tinyMce functionality is great for a "Speech" if it's loaded by the page, but not active for a new "Speech" loaded by AJAX on "Add new speech" (calls a insert_fields script to add the form fields)
The tinyMce code on the page is
<script src="/javascripts/tiny_mce/tiny_mce_src.js?1254270151" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
tinyMCE.init({
editor_selector : 'mceEditor',
language : 'en',
mode : 'textareas',
theme : 'simple'
});
//]]>
</script>
And to activate a textarea form field, you put class="mceEditor" on it.
Is there a way to activate tinyMce on the new Ajax inserted form fields?
TinyMce plugin: http://github.com/kete/tiny_mce
You can create a new editor after TinyMCE has been initialized using:
var new_editor = new tinymce.Editor('new_id', {
});
new_editor.render();
This won't utilize the settings you have in your controller, and is a pure javascript solution, not really a ruby one, but you should be able to easily run it after your ajax call completes and you have the id of the new text area.
I don't know if this is a good answer; but for this situation (someone following the Railscast on nested attributes and complex forms and wanting to use tinyMCE)
pasting
<script type="text/javascript">
//<![CDATA[
tinyMCE.init({
editor_selector : 'mceEditor',
language : 'en',
mode : 'textareas',
theme : 'simple'
});
//]]>
</script>
Into my insert fields function made it worl