# Adding a Barcode to the Editor and Exporting It to PDF

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Telerik UI for ASP.NET Core Editor</td>
 </tr>
</table>

## Description

I want to have a Barcode inside the Editor and export everything to PDF when working with the Telerik UI for ASP.NET Core components.

## Solution

You can achieve this requirement using the following approach:

```Razor Index.cshtml
<div id="barcodeContainer" style="display: none;">
    <div style="text-align:center;">
        @(Html.Kendo().Barcode().Name("barcode")
        .Value("2346722")
        .Width(280)
        .Height(100))
    </div>
</div>

<br />

@(Html.Kendo().Editor()
          .Name("editor")
          .HtmlAttributes(new { style = "width: 100%; height:700px", aria_label = "editor" })
          .Pdf(pdf => pdf
              .Margin(20, 20, 20, 20)
              .PaperSize("A4")
              .ProxyURL(Url.Action("Pdf_Export_Save", "Editor"))
          )
          .Tools(tools => tools
              .Clear()
              .Pdf()
          )
          .Value(@<text>
                <br/>
                <p style="text-align:center;">
                    <span style="font-family:Verdana, Geneva, sans-serif;font-size:large;">
                        <strong>Click the Export to PDF button</strong>
                    </span>
                </p>
           </text>)
    )
```

```TagHelper Index.cshtml
@addTagHelper *, Kendo.Mvc

<div id="barcodeContainer" style="display: none;">
    <div style="text-align:center;">
        <kendo-barcode name="barcode" value="2346722" width="280" height="100"></kendo-barcode>
    </div>
</div>

<br />

<kendo-editor name="editor">
    <pdf paper-size="A4" proxy-url="@Url.Action("Pdf_Export_Save", "Editor")">
        <margin top="20" right="20" bottom="20" left="20" />
    </pdf>
    <tools>
        <tool name="clear" />
        <tool name="pdf" />
    </tools>
    <content>
        <br />
        <p style="text-align:center;">
            <span style="font-family:Verdana, Geneva, sans-serif;font-size:large;">
                <strong>Click the Export to PDF button</strong>
            </span>
        </p>
    </content>
</kendo-editor>
```

```JS script.js
    $(document).ready(function () {
        var editor = $("#editor").data().kendoEditor;
        var barcode = $("#barcode").data().kendoBarcode;

        var image;
        barcode.exportImage().done(function (data) {
            image = data;
            editor.value("<div style='width: 100%; text-align: center;'><img src='" +
                image + "' />" + "<br/>" + editor.value());
        });
    });
```

## More ASP.NET Core Editor Resources

* [ASP.NET Core Editor Documentation](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/editor/overview)

* [ASP.NET Core Editor Demos](https://demos.telerik.com/aspnet-core/editor)

* [ASP.NET Core Editor Product Page](https://www.telerik.com/aspnet-core-ui/editor)

* [Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)](https://www.telerik.com/aspnet-core-ui/documentation/getting-started/video-onboarding)

* [Telerik UI for ASP.NET Core Forums](https://www.telerik.com/forums/aspnet-core-ui)

## See Also

* [Client-Side API Reference of the Editor for ASP.NET Core](https://docs.telerik.com/kendo-ui/api/ui/editor)
* [Server-Side API Reference of the Editor for ASP.NET Core](https://docs.telerik.com/aspnet-core/api/editor)
* [Telerik UI for ASP.NET Core Breaking Changes](https://www.telerik.com/aspnet-core-ui/documentation/backwards-compatibility/2023-backwards-compatibility)
* [Telerik UI for ASP.NET Core Knowledge Base](https://docs.telerik.com/aspnet-core/knowledge-base)