Modifying html text area using Razor view engine and C# in ASP.NET MVC 3,4
1. Create new ASP.NET MVC 3 Web Application project and name it CKEditor. Choose Razor view engine and internet application.
2. Go to http://ckeditor.com/download and download latest version. Unzip the file and copy ckeditor folder.
3. Inside your solution explorer right click on the name of solution and select paste.
Go to Views - Home –
About.cshtml. Delete the section <p></p> and type
@Html.TextArea("editor", new {@class = "ckeditor", @id = "aboutme"})
@Html.TextArea("editor", new {@class = "ckeditor", @id = "aboutme"})
Using above code will produce this html code :
<textarea class="ckeditor" cols="20" id="aboutme" name="editor" rows="2">
</textarea>
Please keep in mind that you have to add class “ckeditor” to
every textarea you are using in your application. Field id and name are also
required, otherwise ckeditor will not work.
You can find attachment with complete project.
Regards, Adam Bielecki.
Hi
ReplyDeleteHow configure ckeditor in partial view?
I added the same example but in partial view don't show me the ckeditor. Only textare no ckeditor
How I can resolve this problem?
Have you added reference to ck js inside your partial view?
DeleteBy default partial views are not using any layout and as you can see in layout there is reference to ckeditor.js.
Add src="../../ckeditor/ckeditor.js" type="text/javascript"> within script, to you partial view and that should solve the issue.
Let me know if that save the problem.
Cheers.
Is it possible to have the ckeditor reference inside partial view ?? I show the partial view only when it is needed. It saves me 1sec while loading my home page
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThanks for your sharing! Very useful!
ReplyDeleteThanks for the tutorial,
ReplyDeleteCan you explain more this step:
5. Open ckeditor folder and drag and drop skeditor.js file under other js references
That means you have to include your ckeditor.js file into the view you are using.
DeleteWhen tried to open in showModalDialog().
ReplyDeleteIt says 'ckeditor' is undefined.
for this line of code 'ckeditor = ckeditor.replace('aboutme');'
Please help me out.
Hi. showModalDialog is deprecated :
ReplyDeletehttps://developer.mozilla.org/en-US/docs/Web/API/Window.showModalDialog
I would suggest to use fancy box and include ckeditor js reference or use partial view.
Make sure if you are using partial view you include reference to ckeditor.js file.
Thanks for sharing :)
ReplyDeleteMy project is nearly done but one function fail to work. That's the video uploader, can you please give me some advice?
Nice and simple tutorial but it does not work with version 4.4.6 (25 Nov 2014). Downloaded CKEditor 3.6.6.2 (15 Jul 2014) and it works flawlessly. Did not test with CKEditor 4.3.5 (23 Apr 2014) though.
ReplyDeleteA IEEE project is an interrelated arrangement of exercises, having a positive beginning and end point and bringing about an interesting result in Engineering Colleges for a particular asset assignment working under a triple limitation - time, cost and execution. Final Year Project Domains for CSE In Engineering Colleges, final year IEEE Project Management requires the utilization of abilities and information to arrange, plan, plan, direct, control, screen, and assess a final year project for cse. The utilization of Project Management to accomplish authoritative objectives has expanded quickly and many engineering colleges have reacted with final year IEEE projects Project Centers in Chennai for CSE to help students in learning these remarkable abilities.
ReplyDeleteSpring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining the authors explore the idea of using Java in Big Data platforms.
Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai