I need to integrate an web based html editor in asp.net core project. I downloaded CKEditor and placed the unzipped folder in wwwroot
folder.
I have referenced "ckeditor.js" in _Layout.cshtml
using following script tag.
<script src="~/ckeditor/ckeditor.js" type="text/javascript">
</script>
Then, I've used following code to display the editor.
<textarea id="editor1" name="editor1">
</textarea>
<script type="text/javascript">CKEDITOR.replace('editor1');</script>
On using these lines of code in the empty About.cshtml of Home Folder, the editor was displayed. But the editor was not displayed when using the same code in another .cshtml
file. The Code is given below
<div class="panel">
<div class="panel-heading border">
Create User
</div>
<div class="panel-body">
<div class="row no-margin">
<div class="col-lg-12">
<form asp-action="Edit" class="form-horizontal bordered-group" role="form">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="_id" />
<div class="form-group">
<label asp-for="Subject" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input asp-for="Subject" class="form-control" />
<span asp-validation-for="Subject" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="MailFrom" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input asp-for="MailFrom" class="form-control" />
<span asp-validation-for="MailFrom" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Body" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
@* CKEDitor *@
<textarea id="editor1" name="editor1">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Update" class="btn btn-default" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">CKEDITOR.replace('editor1');</script>
Why is the editor not displayed in another cshtml
file?
To start, create a simple HTML page with a <textarea> element in it. You will then need to do two things: Include the <script> element loading CKEditor 4 in your page. Use the CKEDITOR.
Just Include the CKEditor library on the page and initialize it on the HTML textarea or container using CKEDITOR. replace([element-id]) . You can also use class='ckeditor' to initialize it on an element. In this case, you don't have to write JavaScript code.
I've also faced the same problem while integrating CKEditor in aps.net mvc project. After trying to determine the error I found that the Layout of the page is different. You may have the same problem.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With