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>
}
</div>
<br />
<div @ref="@ToolBar">
@ToolbarContent
</div>
<div @ref="@EditorElement">
<div class="row">
<div class ="col">
<div @ref="@ToolBar">
@ToolbarContent
</div>
<div @ref="@EditorElement">
</div>
</div>
</div>
@code {
@ -128,4 +131,4 @@
StateHasChanged();
}
}
}

View File

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