tinymce убрал разрывы в плагине CodeSample

Question

Я работаю над проектом, в котором я использую tinymce с плагином CodeSample. Когда я настраиваю некоторый код в примере кода, все в порядке, но после того, как я сохранил этот код в базе данных и перешел на страницу просмотра, все в одной строке. Похоже, что все разрывы удалены.

Я делаю этот проект в Asp. net core mvc framework.

<script>
        tinymce.init({
            selector: '#ArtikelInhoud',
            plugins: "code",
            plugins: 'codesample',
            codesample_languages: [
                { text: 'HTML/XML', value: 'markup' },
                { text: 'JavaScript', value: 'javascript' },
                { text: 'CSS', value: 'css' },
                { text: 'PHP', value: 'php' },
                { text: 'Ruby', value: 'ruby' },
                { text: 'Python', value: 'python' },
                { text: 'Java', value: 'java' },
                { text: 'C', value: 'c' },
                { text: 'C#', value: 'csharp' },
                { text: 'C++', value: 'cpp' }
            ],
            remove_linebreaks: false,
            convert_newlines_to_br: true,
            force_br_newlines: true
        });
    </script>

Answer 1

Я не смог воспроизвести вашу проблему, приведенный ниже пример является успешным, вы можете обратиться к нему.

(Я надеюсь, что вы можете предоставить полный код, расскажите нам, как вы представили данные и соответствующие ссылки js и css.)

Класс данных:

public class Data
{
    public string Content{ get; set; } 
}

контроллер:

   public IActionResult Test()
    {
        return View();
    }
    [HttpPost]
    public IActionResult Test(Data data)
    {
       //save the content in data.Content to database
        return View(data);
    }

Просмотр:

    @model WebApplication_core_mvc.Models.Data
    @{
        ViewData["Title"] = "Test";
        Layout = "~/Views/Shared/_Layout.cshtml";
    } 
   <h1>Test</h1>
    @section Scripts{ 
        <script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc" referrerpolicy="origin"></script>
        <script>
            tinymce.init({
                selector: '#ArtikelInhoud',
                plugins: "code",
                plugins: 'codesample',
                codesample_languages: [
                    { text: 'HTML/XML', value: 'markup' },
                    { text: 'JavaScript', value: 'javascript' },
                    { text: 'CSS', value: 'css' },
                    { text: 'PHP', value: 'php' },
                    { text: 'Ruby', value: 'ruby' },
                    { text: 'Python', value: 'python' },
                    { text: 'Java', value: 'java' },
                    { text: 'C', value: 'c' },
                    { text: 'C#', value: 'csharp' },
                    { text: 'C++', value: 'cpp' }
                ],
                remove_linebreaks: false,
                convert_newlines_to_br: true,
                force_br_newlines: true
            });
        </script>
    }

    <form asp-action="Test" method="post">
      <textarea id="ArtikelInhoud" asp-for="Content"> 
      </textarea>
      <input id="Button1" type="submit" value="button" class="btn btn-primary" />
    </form> 

Вот результат:

Answer 2

Когда вы визуализируете контент, созданный с помощью плагина codesample, вам нужно включить в него некоторый код из Prism. Это задокументировано на странице плагина codesample:

https://www.tiny.cloud/docs/plugins/codesample/#usingprismjsonyourwebpage

Вам необходимо добавить prism.js и prism.css на свою страницу в Чтобы получить синтаксис выделенных примеров кода на вашей веб-странице (созданный плагином Code Sample). Плагин Code Sample использует следующие языки: разметка, javascript, css, php, ruby, python, java, c, csharp и cpp. Вы можете создать файлы prism.js и prism.css на странице загрузки на веб-сайте Prism.