Blazor Text Editor не может связать значение в форме (создание / редактирование) - PullRequest
Новая
       42

Blazor Text Editor не может связать значение в форме (создание / редактирование)

2 голосов
/ 09 апреля 2020

Я использую текстовый редактор Blazor из источника ниже.

Источник - https://github.com/Blazored/TextEditor

Я успешно интегрировал его с формой создания и редактирования, но не смог привязать к нему ценность. Из-за этого моя проверка данных аннулируется.

Внутренне Blazor использует Quill Editor, я не ищу javascript вариант.

Пример кода редактора 

<BlazoredTextEditor  @ref="@QuillNative" Placeholder="Enter non HTML format like centering...">
      <ToolbarContent>Some editor stuff here</ToolbarContent>
<BlazoredTextEditor

Может кто-нибудь, пожалуйста, помогите мне. Как связать-значение или правильный подход без javascript.

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

Венцовский - благодаря вашему быстрому ответу, я уже знал об этих методах, однако мне было любопытно узнать, пробовал ли кто-нибудь другой вариант.

Ниже приведено то, что я сделал ..

ФОРМА - Это обычная форма для создания и редактирования. OnValidSubmit вызовет соответствующий метод Create / Edit. 

<EditForm Model="Entity" class="contact-form" OnValidSubmit="OnValidSubmit">
//My form fields here
//Commented the validation from that particular field
@*<ValidationMessage For="@(() =>Entity.field)" />*@

<div class="col-sm-1">
    <button type="submit" @onclick="***getEditorData***" class="btn" 
    style="border:2px solid #555555;"><span>Save</span></button>
 </div>
</EditForm>

METHOD - getEditorData () будет запущен до OnValidSubmit () 

public async void getEditorData()
{
  Enity.field = await this.QuillNative.GetHTML();
}

Так что в моем последнем объекте OnValidSubmit () я получаю все поля вместе с данными редактора ..

Надеюсь, эта помощь, если кто-то пытается сделать это ..

0 голосов
/ 09 апреля 2020

Очевидно, вы не можете привязать значение к нему, но вы должны использовать предоставленные методы

Методы

  • GetText - Получает содержимое редактор как текст.
  • Получить HTML - получает содержимое редактора как HTML.
  • GetContent - получает содержимое редактора в собственном формате Quill JSON Delta.
  • LoadContent (json) - позволяет программно настраивать содержимое редактора.
  • LoadHTMLContent (строка) - разрешает содержимое редактора, который будет установлен программно.
  • InsertImage (строка) - вставляет изображение в текущую точку в редакторе.

Чтобы использовать эти методы, вам нужна ссылка на него 

@* Getting the BlazoredTextEditor reference*@
<BlazoredTextEditor @ref="@BlazoredTextEditorRef">
    @* rest of the code*@
</BlazoredTextEditor>

И в некотором коде вашего класса вы можете сделать 

void LoadData(){
    //var html = BlazoredTextEditor.LoadHTML(SomeDataToLoad)
    BlazoredTextEditor.LoadText(SomeDataToLoad)
}

void ValidateData(){
    //var html = BlazoredTextEditor.GetHTML()
    var text = BlazoredTextEditor.GetText()
    // do something to validate text
}

Вы можете вызывать эти методы и использовать ссылку в других методах, это всего лишь пример того, как это сделать.

...