Integrate ckeditor in asp.net core mvc

Question

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?

Answer 1

Use id attribute and use a hash on the name.

<script type="text/javascript">CKEDITOR.replace('#editor1');</script>

Answer 2

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.