Winforms RTF to Blazor HTML

40 Views Asked by At

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:

RTF Text Box

0

There are 0 best solutions below

Related Questions in BLAZORISE-RICHTEXTEDIT