Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Integrate ckeditor in asp.net core mvc

Tags:

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?

like image 793
20B2 Avatar asked Dec 05 '16 15:12

20B2


People also ask

How do you call Ckeditor in HTML?

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.

How does Ckeditor store data in database?

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.


1 Answers

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.

like image 185
David Silwal Avatar answered Sep 24 '22 01:09

David Silwal