Отображение расширенного текста в ASP.NET Core (Razor) - PullRequest
Новая
       26

Отображение расширенного текста в ASP.NET Core (Razor)

0 голосов
/ 09 января 2019

Я играл вокруг создания сайта ресторана. Наконец-то я начал работать с tinyMCE, чтобы я мог записывать текст в свою базу данных, используя жирный, курсив и т. Д.

Однако, когда я пытаюсь показать текст, он не отображается в расширенном формате, и изображения не отображаются.

Мой код выглядит так, когда я записываю его: 

<div class="form-group row">
            <div class="col-2">
                <label asp-for="MenuItem.Description" class="custom-label"></label>
            </div>
            <div class="col-5">
                <input id="mytextarea" asp-for="MenuItem.Description" class="form-control" />
            </div>
            <span asp-validation-for="MenuItem.Description" class="text-danger"></span>
        </div>

Однако, когда я хочу увидеть текст, он возвращается так:

enter image description here

Это код для его показа: 

<div class="form-border row">
    <div class="col-8">
        <fieldset disabled>
            <div class="form-group row">
                <div class="col-4">
                    <label asp-for="MenuItem.Name" class="custom-label"></label>
                </div>
                <div class="col-8">
                    <input asp-for="MenuItem.Name" class="form-control" />
                </div>
            </div>
            <div class="form-group row">
                <div class="col-4">
                    <label asp-for="MenuItem.Description" class="custom-label"></label>
                </div>
                <div class="col-8">
                    <textarea asp-for="MenuItem.Description" class="form-control"></textarea>
                </div>
            </div>

Это мои формы, которые каким-то образом мешают мне показывать текст в формате Rich?

Edit: Я инициализировал мой tinyMCE следующим образом 

<script>

    tinymce.init({
        selector: '#mytextarea',
        theme: 'modern',
        plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak',
            'searchreplace wordcount visualblocks visualchars code fullscreen',
            'insertdatetime media nonbreaking save table contextmenu directionality',
            'emoticons paste textcolor colorpicker textpattern imagetools'
        ],
        toolbar1: 'insertfile undo redo | styleselect fontselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        toolbar2: 'print preview media | forecolor backcolor emoticons',
        image_advtab: true,
        height: "700",
        file_picker_callback: function (callback, value, meta) {
            if (meta.filetype === 'image') {
                $('#upload').trigger('click');
                $('#upload').on('change', function () {
                    var file = this.files[0];
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        callback(e.target.result, {
                            alt: ''
                        });
                    };
                    reader.readAsDataURL(file);
                });
            }
        }

    });

</script>

Как я уже сказал, я могу записать это очень хорошо, и у меня есть эта строка при этом:

enter image description here

1 Ответ

0 голосов
/ 09 января 2019

Если вы пытаетесь визуализировать контент (в отличие от редактирования), вы хотите поместить его в нечто вроде div, а не в текстовое поле.

В зависимости от вашей среды вам может потребоваться запретить использование HTML (часто это делается для защиты от атак).

...