EditHtml fix second part

This commit is contained in:
Pavel Vesely 2020-03-07 00:10:03 +01:00
parent 8730ecc6ad
commit c467a5cb67
2 changed files with 95 additions and 80 deletions

View File

@ -16,11 +16,14 @@
<button type="button" class="btn btn-secondary" @onclick="CloseFileManager">Close</button> <button type="button" class="btn btn-secondary" @onclick="CloseFileManager">Close</button>
} }
</div> </div>
<br /> <div class="row">
<div @ref="@ToolBar"> <div class ="col">
@ToolbarContent <div @ref="@ToolBar">
</div> @ToolbarContent
<div @ref="@EditorElement"> </div>
<div @ref="@EditorElement">
</div>
</div>
</div> </div>
@code { @code {

View File

@ -7,64 +7,64 @@
@inject HttpClient http @inject HttpClient http
@inject SiteState sitestate @inject SiteState sitestate
<table class="table table-borderless"> <div class="row" style="margin-bottom: 50px;">
<tr> <div class="col @_visibleText">
<td> <textarea class="form-control" @bind="@content" rows="10"></textarea>
<label for="Name" class="control-label">Content: </label> </div>
</td>
<td> <div class="col @_visibleRich">
@if (!RichTextEditorMode) <RichTextEditor @ref="@RichTextEditorHtml">
{ <ToolbarContent>
<textarea class="form-control" @bind="@content" rows="5" /> <select class="ql-header">
} <option selected=""></option>
else <option value="1"></option>
{ <option value="2"></option>
<RichTextEditor @ref="@RichTextEditorHtml"> <option value="3"></option>
<ToolbarContent> <option value="4"></option>
<select class="ql-header"> <option value="5"></option>
<option selected=""></option> </select>
<option value="1"></option> <span class="ql-formats">
<option value="2"></option> <button class="ql-bold"></button>
<option value="3"></option> <button class="ql-italic"></button>
<option value="4"></option> <button class="ql-underline"></button>
<option value="5"></option> <button class="ql-strike"></button>
</select> </span>
<span class="ql-formats"> <span class="ql-formats">
<button class="ql-bold"></button> <select class="ql-color"></select>
<button class="ql-italic"></button> <select class="ql-background"></select>
<button class="ql-underline"></button> </span>
<button class="ql-strike"></button> <span class="ql-formats">
</span> <button class="ql-list" value="ordered"></button>
<span class="ql-formats"> <button class="ql-list" value="bullet"></button>
<select class="ql-color"></select> </span>
<select class="ql-background"></select> <span class="ql-formats">
</span> <button class="ql-link"></button>
<span class="ql-formats"> </span>
<button class="ql-list" value="ordered"></button> </ToolbarContent>
<button class="ql-list" value="bullet"></button> </RichTextEditor>
</span> </div>
<span class="ql-formats"> </div>
<button class="ql-link"></button>
</span> <div class="row">
</ToolbarContent> <div class="col">
</RichTextEditor> @if (!RichTextEditorMode)
} {
</td> <button type="button" class="btn btn-secondary" @onclick="RichTextEditor">Rich Text Editor</button>
</tr> }
</table> else
@if (!RichTextEditorMode) {
{ <button type="button" class="btn btn-secondary" @onclick="RawHtmlEditor">Raw HTML Editor</button>
<button type="button" class="btn btn-secondary" @onclick="RichTextEditor">Rich Text Editor</button> }
} <button type="button" class="btn btn-success" @onclick="SaveContent">Save</button>
else <NavLink class="btn btn-secondary" href="@NavigateUrl()">Cancel</NavLink>
{ </div>
<button type="button" class="btn btn-secondary" @onclick="RawHtmlEditor">Raw HTML Editor</button> </div>
}
<button type="button" class="btn btn-success" @onclick="SaveContent">Save</button> <div class="row">
<NavLink class="btn btn-secondary" href="@NavigateUrl()">Cancel</NavLink> <div class="col">
<br/> <AuditInfo CreatedBy="@createdby" CreatedOn="@createdon" ModifiedBy="@modifiedby" ModifiedOn="@modifiedon"></AuditInfo>
<br/> </div>
<AuditInfo CreatedBy="@createdby" CreatedOn="@createdon" ModifiedBy="@modifiedby" ModifiedOn="@modifiedon"></AuditInfo> </div>
@code { @code {
@ -78,8 +78,30 @@ else
get { return "Edit Html/Text"; } get { return "Edit Html/Text"; }
} }
bool RichTextEditorMode = true; public bool RichTextEditorMode
bool _richTextEditorLoading = false; {
get => _richTextEditorMode;
set
{
_richTextEditorMode = value;
if (_richTextEditorMode)
{
_visibleText = "d-none";
_visibleRich = "";
}
else
{
_visibleText = "";
_visibleRich = "d-none";
}
}
}
string _visibleText;
string _visibleRich;
bool _richTextEditorMode;
RichTextEditor RichTextEditorHtml; RichTextEditor RichTextEditorHtml;
string content; string content;
string createdby; string createdby;
@ -95,17 +117,10 @@ else
{ {
if (content == null) if (content == null)
{ {
RichTextEditorMode = true;
await LoadText(); await LoadText();
} }
} }
else
{
if (_richTextEditorLoading)
{
await RichTextEditorHtml.LoadContent(content);
_richTextEditorLoading = false;
}
}
} }
catch (Exception ex) catch (Exception ex)
{ {
@ -137,18 +152,15 @@ else
private async Task RichTextEditor() private async Task RichTextEditor()
{ {
RichTextEditorMode = true; RichTextEditorMode = true;
_richTextEditorLoading = true; await RichTextEditorHtml.LoadContent(content);
StateHasChanged(); StateHasChanged();
} }
private async Task RawHtmlEditor() private async Task RawHtmlEditor()
{ {
if (RichTextEditorMode) content = await this.RichTextEditorHtml.GetHTML();
{
content = await this.RichTextEditorHtml.GetHTML();
}
RichTextEditorMode = false; RichTextEditorMode = false;
// await LoadText(); StateHasChanged();
} }
private async Task SaveContent() private async Task SaveContent()