Some time ago I wrote a Winforms app that did a very basic save of some richtext data to a database:
SqlCommand SQLSearch = sqlconn.CreateCommand();
SQLSearch.CommandText = "update items set [search_tags] = '" + rtbSearch_Tags.Text +
"', [item_resolution] = '" + rtbResolution.Rtf.Replace("'", "''") +
"', [commands] = '" + rtbCommands.Rtf.Replace("'", "''") +
"', [item_incident] = '" + rtbIncident.Rtf.Replace("'", "''") +
"' where item_id = '" + globalItemID + "';";
SQLSearch.ExecuteScalar();
btnUpdate.Text = "Updated complete";
I now want to update my app to a Blazor server web app. However in the Winforms app to display the saved data it was simple
data = SQLDR.GetString(1).Replace("''", "'");
if (data.ToString().StartsWith("{\\"))
{
rtbCommands.Rtf = data;
}
else
{
rtbCommands.Text = data;
}
However in Blazor, it's causing a few issues.
Here is the HttpClient async data collection from my EF models controller:
response = await httpClient.GetAsync("/api/item");
var content2 = await response.Content.ReadAsStringAsync();
var founditem = JsonConvert.DeserializeObject<List<Item>>(content2);
if (founditem.Count > 0)
{
var richTextContent = founditem[0].Commands;
String data = richTextContent.ToString().Replace("''", "'");
if (data.ToString().StartsWith("{\\"))
{
richTextContent = data.Replace("''", "'");
}
else
{
richTextContent = data.Replace("''", "'");
}
}
And this is the HTML:
<div class="row mb-3">
<RichTextEdit @ref="richTextEditRef"
Theme="RichTextEditTheme.Snow"
ContentChanged="@OnContentChanged"
PlaceHolder="Type your post here..."
ReadOnly="@readOnly"
SubmitOnEnter="false"
EnterPressed="@OnSave"
ToolbarPosition="Placement.Bottom">
<Editor>@((MarkupString)htmlValue)</Editor>
<Toolbar>
<RichTextEditToolbarGroup>
<RichTextEditToolbarButton Action="RichTextEditAction.Bold" />
<RichTextEditToolbarButton Action="RichTextEditAction.Italic" />
<RichTextEditToolbarSelect Action="RichTextEditAction.Size">
<RichTextEditToolbarSelectItem Value="small" />
<RichTextEditToolbarSelectItem Selected />
<RichTextEditToolbarSelectItem Value="large" />
<RichTextEditToolbarSelectItem Value="huge">Very Big</RichTextEditToolbarSelectItem>
</RichTextEditToolbarSelect>
<RichTextEditToolbarButton Action="RichTextEditAction.List" Value="ordered" />
<RichTextEditToolbarButton Action="RichTextEditAction.List" Value="bullet" />
</RichTextEditToolbarGroup>
<!-- Custom toolbar content -->
<RichTextEditToolbarGroup Float="Float.End">
<Blazorise.Button onClick="window.open('https://www.quilljs.com/','quilljs')"><Icon Name="IconName.InfoCircle" /></Blazorise.Button>
<Blazorise.Button Clicked="@OnSave"><Icon Name="IconName.Save" /></Blazorise.Button>
</RichTextEditToolbarGroup>
</Toolbar>
</RichTextEdit>
</div>
But the content for this returned data item contains an image and text
Data snippet
{\rtf1\ansi\ansicpg1252\deff0\deflang2057{\fonttbl{\f0\fnil\fcharset0 Microsoft Sans Serif;}} \viewkind4\uc1\pard\f0\fs17{\pict\wmetafile8\picw8756\pich2962\picwgoal4964\pichgoal1679 01000900000318da0000000002da00000000050000000b0200000000050000000c02920b342202 ........................................ 292929292929292929292929292929292929292929292929292929292929292929292929290000 00030000000000 }\par }
I am currently using Blazorise RichTextEdit component and I have tried RtfPipe also, the images just don't show:
