1. Home
  2. Forum
  3. Blazor
  4. How to Paste and Format Code Snippet

How to Paste and Format Code Snippet

Hello all. I'm new to Syncfusion. I want to use the Rich Text Editor to create forum posts. I would like to allow users to paste code blocks. When the user views the post after it has been published, the editor would be in read only mode and text of the code snippet is colored according to the type of text it is


For example, strings are a certain color, method names or function names are another color, keywords are another color.

Does this functionality exist? Is there an extension available?


Thanks. 


4 Replies
VY Vinothkumar Yuvaraj Syncfusion Team June 19, 2023 11:17 AM UTC

Hi David,


We require further information to determine the feasibility of your requirement. Kindly provide us with details regarding the content that was pasted into the Rich Text Editor. To assess its feasibility, we request that you share the pasted content document or HTML string with us. Moreover, please inform us if the pre element is used within the code block.


Regards,

Vinothkumar


DW David Warwick June 19, 2023 04:46 PM UTC

Thank you for your reply. Are you familiar with the website stackoverflow.com. That is a website where programmers frequently paste code that is copied directly from various IDE's, such as Microsoft Visual Studio or Visual Studio Code. They might also paste queries from Microsoft SQL Server Management Studio.

I want to do something similar to that, where they can paste code into Rich Text Editor, so I would imagine that the editor would have to surround the pasted code with pre tags, but I wouldn't expect that forum user to have to do that manually. This would all be automated.


Tiny MCE has a plugin that handles this nicely, but I am exploring alternatives to Tiny MCE. https://www.tiny.cloud/docs/plugins/opensource/codesample/


AK Adnan Khan replied to Vinothkumar Yuvaraj June 21, 2023 11:10 AM UTC

Hi   Vinothkumar Yuvaraj,

I have a query with Paste image in Rich Text Editor and I created a thread but got no response from the syncfusion team.
I got stuck in code, please help 



VY Vinothkumar Yuvaraj Syncfusion Team June 21, 2023 12:24 PM UTC

Hi David,


We have achieved your requirement by using the third-party prismjs library in the Rich Text Editor. In the editor we have create a “Insert Code” customer toolbar to insert the code into the Rich Text Editor. Please see the following code and attached sample for your reference.


_Layout.cshtml

<head>

    <link rel='nofollow' href=https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css rel="stylesheet" />

    <script src=https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js></script>

</head>


 

 <SfDialog Target="#target" Width="500px" Height="500px" ShowCloseIcon="true" @bind-Visible="Visibility" AllowPrerender="true" IsModal="true">

<DialogTemplates>

<Header>Insert/Edit Code Sample</Header>

<Content> <textarea @bind="myProperty" placeholder='Enter Code' style="width:100%;height:100%" id="textBox"></textarea></Content>

</DialogTemplates>

    <DialogButtons>

<DialogButton Content="Insert" IsPrimary="true" OnClick="@OkClick" />

<DialogButton Content="Cancel" OnClick="@CancelClick" />

    </DialogButtons>

 </SfDialog>

 

<SfRichTextEditor @ref="rteObj"  ID="richTextEditor">

    <RichTextEditorToolbarSettings Items="@Tools">

<RichTextEditorCustomToolbarItems>

<RichTextEditorCustomToolbarItem Name="Code">

                <Template>

                    <SfButton @onclick="ClickHandler">Insert Code</SfButton>

                </Template>

</RichTextEditorCustomToolbarItem>

</RichTextEditorCustomToolbarItems>

    </RichTextEditorToolbarSettings>

    <p> ……. <p>

</SfRichTextEditor>

<style>

    .e-richtexteditor .e-rte-content .e-content pre.language-javascript, .e-richtexteditor .e-rte-content .e-content pre.language-css {

background-color: #f5f2f0 !important;

    }

</style>

@code{

    SfRichTextEditor rteObj;

    private string myProperty;

    private bool Visibility { get; set; } = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

if (firstRender)

{

await jsRuntime.InvokeVoidAsync("Prism.highlightAll");

}

    }

    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()

    {

new ToolbarItemModel() { Command = ToolbarCommand.Bold },

new ToolbarItemModel() { Command = ToolbarCommand.Italic },

new ToolbarItemModel() { Command = ToolbarCommand.Underline },

new ToolbarItemModel() { Command = ToolbarCommand.Separator },

new ToolbarItemModel() { Name = "Code", TooltipText = "Insert Code" },

new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },

new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }

};

    private async Task ClickHandler()

    {

this.Visibility = true;

await this.rteObj.SaveSelectionAsync();

    }

    private void CancelClick()

    {

this.Visibility = false;

this.myProperty = "";

    }

    private async Task OkClick()

    {

await this.rteObj.RestoreSelectionAsync();

await this.rteObj.ExecuteCommandAsync(CommandName.InsertHTML, "<pre contenteditable='false'><code class='language-javascript'>" + myProperty + "</code></pre>");

await jsRuntime.InvokeVoidAsync("Prism.highlightAll");

this.Visibility = false;

this.myProperty = "";

    }

}


API Link : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorCustomToolbarItem.html


Regards,

Vinothkumar


Attachment: BlazorApp1_aef1b620_(1)_c7a7f418.zip

Loader.
Up arrow icon