Allows you to switch between Rich text and Raw HTML Editor

This commit is contained in:
Michael Washington
2019-11-29 18:14:58 -08:00
parent 3162caca01
commit 07f09361b9

View File

@ -13,38 +13,53 @@
<label for="Name" class="control-label">Content: </label> <label for="Name" class="control-label">Content: </label>
</td> </td>
<td> <td>
<RichTextEditor @ref="@RichTextEditorHtml"> @if (!RichTextEditorMode)
<ToolbarContent> {
<select class="ql-header"> <textarea class="form-control" @bind="@content" rows="5" />
<option selected=""></option> }
<option value="1"></option> else
<option value="2"></option> {
<option value="3"></option> <RichTextEditor @ref="@RichTextEditorHtml">
<option value="4"></option> <ToolbarContent>
<option value="5"></option> <select class="ql-header">
</select> <option selected=""></option>
<span class="ql-formats"> <option value="1"></option>
<button class="ql-bold"></button> <option value="2"></option>
<button class="ql-italic"></button> <option value="3"></option>
<button class="ql-underline"></button> <option value="4"></option>
<button class="ql-strike"></button> <option value="5"></option>
</span> </select>
<span class="ql-formats"> <span class="ql-formats">
<select class="ql-color"></select> <button class="ql-bold"></button>
<select class="ql-background"></select> <button class="ql-italic"></button>
</span> <button class="ql-underline"></button>
<span class="ql-formats"> <button class="ql-strike"></button>
<button class="ql-list" value="ordered"></button> </span>
<button class="ql-list" value="bullet"></button> <span class="ql-formats">
</span> <select class="ql-color"></select>
<span class="ql-formats"> <select class="ql-background"></select>
<button class="ql-link"></button> </span>
</span> <span class="ql-formats">
</ToolbarContent> <button class="ql-list" value="ordered"></button>
</RichTextEditor> <button class="ql-list" value="bullet"></button>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
</span>
</ToolbarContent>
</RichTextEditor>
}
</td> </td>
</tr> </tr>
</table> </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> <button type="button" class="btn btn-success" @onclick="SaveContent">Save</button>
<NavLink class="btn btn-secondary" href="@NavigateUrl()">Cancel</NavLink> <NavLink class="btn btn-secondary" href="@NavigateUrl()">Cancel</NavLink>
<br /> <br />
@ -56,6 +71,7 @@
public override string Title { get { return "Edit Html/Text"; } } public override string Title { get { return "Edit Html/Text"; } }
RichTextEditor RichTextEditorHtml; RichTextEditor RichTextEditorHtml;
bool RichTextEditorMode = true;
string content; string content;
string createdby; string createdby;
DateTime createdon; DateTime createdon;
@ -66,19 +82,7 @@
{ {
try try
{ {
HtmlTextService htmltextservice = new HtmlTextService(http, sitestate, NavigationManager); await LoadText();
HtmlTextInfo htmltext = await htmltextservice.GetHtmlTextAsync(ModuleState.ModuleId);
if (htmltext != null)
{
content = htmltext.Content;
createdby = htmltext.CreatedBy;
createdon = htmltext.CreatedOn;
modifiedby = htmltext.ModifiedBy;
modifiedon = htmltext.ModifiedOn;
await RichTextEditorHtml.LoadContent(content);
}
} }
catch (Exception ex) catch (Exception ex)
{ {
@ -87,9 +91,43 @@
} }
} }
private async Task LoadText()
{
HtmlTextService htmltextservice = new HtmlTextService(http, sitestate, NavigationManager);
HtmlTextInfo htmltext = await htmltextservice.GetHtmlTextAsync(ModuleState.ModuleId);
if (htmltext != null)
{
content = htmltext.Content;
createdby = htmltext.CreatedBy;
createdon = htmltext.CreatedOn;
modifiedby = htmltext.ModifiedBy;
modifiedon = htmltext.ModifiedOn;
if (RichTextEditorMode)
{
await RichTextEditorHtml.LoadContent(content);
}
}
}
private async Task RichTextEditor()
{
RichTextEditorMode = true;
await LoadText();
}
private async Task RawHTMLEditor()
{
RichTextEditorMode = false;
await LoadText();
}
private async Task SaveContent() private async Task SaveContent()
{ {
content = await this.RichTextEditorHtml.GetHTML(); if (RichTextEditorMode)
{
content = await this.RichTextEditorHtml.GetHTML();
}
try try
{ {