How to show the content in CKeditor exactly how it is saved into the database, maintaining same spaces and paragraphs?

Question

I am trying to use CKEditor with the asp-for helper in edit mode, In Razor view, with a textarea element with the asp-for attribute that binds to the model property Content.

<textarea class="form-control mb-2" rows="10" name="@Html.NameFor(m => m.Content)"> @Model.Content</textarea>

And initialized the CKEditor instance for the textarea element using the following JavaScript.

ClassicEditor.create(document.querySelector('textarea'));

However, my Content in the database is stored as:

मेरे प्रिय आत्मन्‌!

मैं सोचता था, क्या आपसे कहूं? कौन सी आपकी खोज है? क्या जीवन में आप चाहते हैं? ख्याल आया, उसी
संबंध में थोड़ी आपसे बात करूं तो उपयोगी होगा।
मेरे देखे, जो हम पाना चाहते हैं से छोड़ कर और हम सब पाने के उपाय करते हैं। इसलिए जीवन में दुख और....

But, in the CKEditor, the content is displayed as shown in the following ways:

Is there any way to show this content in CKeditor exactly how it is saved into the database, by maintaining the exact same spaces and paragraphs?

Edit:

Looking into the content inside the db:

It is stored as:

" \n\nबीते दो दिनों में स्वयं की खोज के लिए कुछ बातें मैंने आपसे कहीं। पहले दिन मैंने आपसे कहा, हमें इस बात\nका स्मरण भी नहीं है कि हम हैं। हमारी सत्ता का बोध भी हमें नहीं है। और जिसे यह भी पता न हो वह है, उसके\nजीवन, उसके भविष्य उसकी उपलब्धियों का यदि यह भी बोध नहीं हो कि मैं हूं तो जीवन में और क्या हो सकेगा?\nफिर तो कोई भी जीवन में गति और विकास नहीं हो सकता। सबसे पहली बात तो यह होगी कि मैं जानूं कि मैं हूं।\n\nऔर मैं आपसे कहा, यह बहुत आश्चर्यजनक है कि हमें इसका स्मरण भी नहीँ आता। जीवन बीत जाता है और\nहमें पता भी नहीं चलता कि हम थे।"...

Here \n\n is a line break followed by a tab and \n is a line break.

Answer 1

UPDATE

I think there is no solution to this problem at present, of course you can go to CKEditor to seek official support. Perhaps they will have plans to implement this feature.

My findings are as follows, after using your OCR recognition, wait until the text looks like this:

\n\nबीते दो दिनों में स्वयं की खोज के लिए कुछ बातें मैंने आपसे कहीं। पहले दिन मैंने आपसे कहा, हमें इस बात\nका स्मरण भी नहीं है कि हम हैं। हमारी सत्ता का बोध भी हमें नहीं है। और जिसे यह भी पता न हो वह है, उसके\nजीवन, उसके भविष्य उसकी उपलब्धियों का यदि यह भी बोध नहीं हो कि मैं हूं तो जीवन में और क्या हो सकेगा?\nफिर तो कोई भी जीवन में गति और विकास नहीं हो सकता। सबसे पहली बात तो यह होगी कि मैं जानूं कि मैं हूं।\n\nऔर मैं आपसे कहा, यह बहुत आश्चर्यजनक है कि हमें इसका स्मरण भी नहीँ आता। जीवन बीत जाता है और\nहमें पता भी नहीं चलता कि हम थे।\n\nएक व्यक्ति के बाबत मैंने सुना है--यह बात निश्चित ही असल होगी--मैंने सुना है कि जब वह मर गया, तब\nउसे पता चला कि मैं जिंदा था। लेकिन यह सब व्यक्तियों के बाबत सच है। जब हम मरने लगेंगे तो पता चलेगा कि\nजीवन हाथ में था और नहीं है। लेकिन हम हैं, जब जीवन हमारे हाथ है तो हम दूसरे कामों में इतने व्यस्त हैं कि\nजीवन का हमें बोध नहीं हो पाता। हम जीने में इतने व्यस्त हैं कि जीवन का हमें पता नहीं चल पाता। हम जीने में\nइतने ज्यादा उलझे हुए हैं कि वह जो जीवन का केंद्र है, अपरिचित रह जाता है। इस संबंध मैंने आपसे कहा कि यह\nबहुत प्राथमिक बोध है, जो मनुष्य को जीवन के विकास की तरफ, उत्कर्ष की तरफ, जीवन के अनुभव की तरफ ले\nजाए। स्मरण आना चाहिए कि मैं हूं।\n\nएक तो हमारे काम की दुनिया है, जो हम कर रहे हैं, और एक हमारा होना है, जो हम हैं। एक तो हमारी\n\nडूइंग और कामों का जगत है और एक हमारे बीइंग का, हमारे होने की और हमारी सत्ता की दुनिया है। हम सारे\nलोग काम की ही दुनिया में समाप्त हो जाते हैं और उसे नहीँ जान पते जो कि हमारा होना है। हम काम करते हैं ,\nऔर काम करते हैं, और काम करते हैं, और काम करते हुए समाप्त हो जाते हैं। लेकिन यह कौन था जो काम के\nभीतर जी रहा था? यह कौन था जो सब काम के पीछे खडा था? यह कौन था जिसने सारे काम किए और सारे का\nदेखे? उसकी तरफ हमारी आंखें नहीं उठ पाती हैं।\n\nमैंने आपको कहा कि उसकी तरफ आंखें न उठें तो जीवन में कोई आनंद संभव नहीं है, क्योंकि आनंद का स्रोत\nतो वहां है। और उसकी ओर आंखें न उठें तो दुख से मुक्त होना असंभव है, क्योंकि दुख है सिर्फ इसीलिए कि हमारी\nआंखें उसकी तरफ नहीं हैं। जैसे कोई आदमी सूरज की तरफ पीठ कर ले और भागता जाए और भागता जाए, उसकी\nछाया उसके सामने पडेगी, अंधेरा उसके सामने होगा और वह रोए और चिल्लाए कि मेरे जीवन में अंधेरा है, अंधेरा\nहै, मैं क्या करूं? और भागता जाए, लेकिन सूरज की ओर आंखें न उठाए तो उसके जीवन से अंधेरा नहीं मिटेगा। वह\nलाख उपाय करे और हजारों मील की यात्राएं करें, छाया उसके सामने ही पडडती रहेगी। जिसके पीछे सूरज हो उसके\n\nसमाने छाया पडेगी, और जो सूरज की ओर आंखें उठा ले उसके लिए छाया विलीन हो जाएगी और जीवन प्रकाश से\n\nभर जाएगा।\nहै कोई सूरज हमारे भीतर--हमारी सता का। उसकी तरफ आंखें उठानी हैं। लेकिन पहली बात होगी कि हम\n\nजानें कि हम हैं। उस संबंध में मैंने पहले दिन आपसे बातें कीं। दूसरे दिन मैंने इस संबंध में बात की कि यह मैं कौन हूं\nइसको हम खोजें। कैसे खोजेंगे। तो मैंने आपसे कहा, क्रमश:य जो हम नहीं हैं उसे जानने से उसकी तरफ बहेंगे जो\nहम हैं। अगर हम ठीक से जानते चले जाए कि यह मैं नहीं हूं, षरीर मैं नहीं हूं, मन मैं नहीं हूं, विचार मैं नहीं हूं, तो\nधीरे-धीरे हम उसकी तरफ जाएंगे जो हम हैं। दो ही बातें महत्वपूर्ण हैं--यह जानना कि मैं हूं, और फिर यह खोज\nलेना कि मैं कौन हूं। आज मैं इस संबंध में कहूंगा कि यह खोज कैसे चित्त की भूमिका में हो सकती है।\n\nआपने मेरी बातें सुनी, अनेक लोग मुझसे कहते हैं, यह तो बहुत कठिन है। अब एक आदमी हो, एक किसान\nहो, बीज उसे दे दिया जाए और वह पहाड पर चला जाए और चट्टान पर बीज को बोने लगे और फिर वापस लौट\nकर आए कि बीज तो जल जाते हैं, पौधे तो निकलते नहीं। ये बीज कठिन है, बहुत कठोर हैं, इनसे कोई निकलेगा\n\nनहीं। तो उसे क्या कहेंगे? हम कहेंगे कि बीज बोए कहां थे? कहीं किसी चट्टान पर बोने तो नहीं चले गए थे? बीज\n\nतो बडे कोमल थे। बीज से तो अंकुर निकलने को प्रति क्षण उत्सुक था। वहां तो बीज को फोड कर प्राण निकलने को\nबाहर फैलने की आकांक्षा से भरे थे। वहां तो बीज के भीतर जो आत्मा बैठी थी वह सूरज की तरफ उठने को\n\nलालायित थी। लेकिन बीज डाले कहां थे? अगर बीज पत्थर पर बोए गए थे, पथरीली जमीन पर, तो फल नहीं\nलाएंगे। तो मैंने जो बात कहीं, वह कठिन मालूम हो सकती है, अगर मन की भूमि पथरीली हो, पत्थरों से भरी होय\nतो कठिन हो जाएगी। तो मन की भूमि चाहिए उपजाऊ।\n\n3\n

The content above using \n is applicable to normal tags, not applicable to ckeditor.

We need to convert the above text to that include html tag.

The following is the test code I wrote, you can take a look.

using DiffPlex;
using DiffPlex.DiffBuilder;
using DiffPlex.DiffBuilder.Model;
using Githubtesting.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using System;
using System.Diagnostics;
using System.Net;
using System.Reflection.Metadata;
using System.Text;
using Tesseract;

namespace Githubtesting.Controllers
{

    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult Index()
        {
            Chapter content = new Chapter();
            var chapterOutputPath = @"./page_1.png";
            using (var engine = new TesseractEngine("./tessdata", "hin", EngineMode.Default))
            {
                using (var img = Pix.LoadFromFile(chapterOutputPath))
                {
                    using (var page = engine.Process(img))
                    {
                        content.Text = page.GetText();
                    }
                }

            }

            ViewBag.result = CustomConvert(content.Text);
            return View(content);
        }

        private static string CustomConvert(string OldContent)
        {
            StringBuilder sb = new StringBuilder();

            string oldText = OldContent;
            string newText = string.Empty;

            var d = new Differ();
            var builder = new InlineDiffBuilder(d);
            DiffPaneModel result = builder.BuildDiffModel(oldText, newText);

            foreach (var line in result.Lines)
            {
                sb.Append("<div><span id=\"\"> ");

                sb.Append(line.Text + "</span></div> \n");
            }

            return sb.ToString();
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

Index.html

@using System.Net;
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "Home Page";
}
@model Chapter

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<textarea id="editor" class="form-control mb-2" rows="10">@Html.Raw(@WebUtility.HtmlDecode(ViewBag.result)) </textarea>

<br/>

For test, normal textarea tag

<textarea id="edito1r" class="form-control mb-2" rows="10">@Html.Raw(@Model.Text) </textarea>

@section Scripts {
    @{

        await Html.RenderPartialAsync("_ValidationScriptsPartial");
        //<script src="~/js/Book/ChapterEdit.js" asp-append-version="true"></script>
        <script>
            ClassicEditor
                .create(document.querySelector('#editor'))
                .then(editor => {
                    console.log('Editor initialized', editor);
                })
                .catch(error => {
                    console.error('Editor initialization failed', error);
                });
        </script>

    }
    }

Test Result

---

I test in my local and can't reproduce the same issue, but you can check the test code, it also could help you fix the issue. And I will attach the github repo link in the end. Thanks for @aLLUPS.

WriteArticle.cshtml

@model UserArticle

@{
    ViewData["Title"] = "Write Articles";
}

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/ckeditor/ckeditor.js"></script>
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="card" style="padding:10px 50px 50px 50px">

    <h3>Write your Article Here</h3>

    <div>
        <form asp-controller="Article" asp-action="WriteArticle" method="post">
            @Html.AntiForgeryToken()
            <input asp-for="ArticleId" type="hidden" />
            <input asp-for="UserId" type="hidden" />
            <div ass="col-md-10">
                <textarea style="border-color:grey;" asp-for="ArticleTitle" id="ArticleTitle" name="ArticleTitle" cols="70" placeholder="Add Title"></textarea>
            </div>
            <div ass="col-md-10">
                <textarea asp-for="Description" id="Description" class="ckeditor" name="Description" rows="200"></textarea>
            </div>
            <div style="padding-top:10px">
                <button class="btn btn-outline-primary" type="submit" value="submit">Submit</button>
            </div>
        </form>
    </div>
</div>
<style>
    body {
        background-color: #eee;
        font-family: "Poppins", sans-serif;
        font-weight: 300
    }
</style>


<script>
    $(document).ready(function () {
        CKEDITOR.replace('#Description');
    });
</script>

Github Repo: CKEditor-MSSQL-DB