Codemirror integration

Question

Is it possible to integrate codemirror in Blazor RTE?

Yaswin Vikhaash Rajaretenam · Answer

Hi Stelios Malakoudis,We have reviewed your query and confirmed that it is indeed possible to integrate CodeMirror within the Rich Text Editor. In the provided sample, we've included an option to view color-coded HTML content in the "Code View" toolbar. By selecting the "Code View" option, you can view the HTML code with syntax highlighting, courtesy of CodeMirror. Additionally, you can preview the HTML code as needed. To integrate CodeMirror with the Rich Text Editor (RTE), you can bind the actionComplete event and trigger the necessary scripts to enable CodeMirror within the RTE. Please refer to the attached code and sample for more details and implementation.

Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.

Get started Quick Toolbar to click on the image

It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.

@code { SfRichTextEditor rteObj; public async Task actionComplete(ActionCompleteEventArgs args) { if (args.RequestType == "SourceCode" || args.RequestType == "Preview") { await JSRuntime.InvokeVoidAsync("myJsFunction", args); } } } Attachment: code_mirror_20c8bed1.zip

Stelios Malakoudis · Answer

Thank you verry much for your response.I tried to make it work but I'm getting an error when the function try to get sfBlazor.instancesThe array is empty, but I have 2 RTEs in my component.Attachment: error_272630a7.zip

Yaswin Vikhaash Rajaretenam · Answer

Hi Stelios Malakoudis,We have thoroughly reviewed your query and found the solution. In order to use sfBlazor.instances, it is necessary to reference the Rich Text Editor by its id. Based on the image you provided, it seems that an id has not yet been assigned to your Rich Text Editor instance.In the following line of code:var textArea = sfBlazor.instances["richtexteditor"].getEditPanel();The string "richtexteditor" refers to the id of the Rich Text Editor. To resolve the issue, please ensure that you assign an id to your Rich Text Editor component. Once the id is set, the instance will work properly, allowing you to use sfBlazor.instances.If you need any further assistance or clarification, please feel free to reach out. We are here to help!Regards,Yaswin Vikhaash

Stelios Malakoudis · Answer

Hi Yaswin Vikhaash,Yes, you're wright.So, my code now is referencing the id and the js function works with no errors, and while debugging.I changed the js function like this:function myJsFunction(e, sfId) {    var textArea = sfBlazor.instances["richtexteditor-" + sfId].getEditPanel()    var id = sfBlazor.instances["richtexteditor-" + sfId].contentPanel.id + 'mirror-view';    var mirrorView = sfBlazor.instances["richtexteditor-" + sfId].element.querySelector('#' + id);    if (e.requestType === 'Preview') {        textArea.style.display = 'block';        mirrorView.style.display = 'none';        textArea.innerHTML = myCodeMirror.getValue();    }    else {        if (!mirrorView) {            mirrorView = document.createElement('div');            mirrorView.classList.add("e-content");            mirrorView.id = id;            textArea.parentNode.appendChild(mirrorView);        }        else {            mirrorView.innerHTML = '';        }        textArea.style.display = 'none';        document.querySelector(".e-rte-srctextarea").style.display = "none"        mirrorView.style.display = 'block';        renderCodeMirror(mirrorView, sfBlazor.instances["richtexteditor-" + sfId].value);    }    function renderCodeMirror(mirrorView, content) {        myCodeMirror = CodeMirror(mirrorView, {            value: content,            lineNumbers: true,            mode: 'text/html',            lineWrapping: true,        })    }}but it returns a blanc screen (no content). From the other hand, i have no errors.Codemirror.js and css are loadedMaybe I'm missing something.Attachment: blancscreen_3a19b166.zip

Stelios Malakoudis · Answer

Hi Yaswin Vikhaash,

I prepared a test project to reproduce the error.You can see that switching from preview to html code, the screen get blanc.RegardsStelios Malakoudis Attachment: SFTest_66f18a5a.zip

Gokulraj Devarajan · Answer

Thanks for sharing the sample project we have fixed the issues in the sample.

Please find the attached sample for your reference.

We have updated the JS function code and added a styles to handle the visibility of the code mirror.

myJsFunctionForRTE.js

var myCodeMirror;
function myJsFunction(e, sfId) {
    var editor = sfBlazor.instances["richtexteditor-" + sfId];
    var id = editor.dataId + 'mirror-view';
    var mirrorView = editor.element.querySelector('#' + id);
    var rteContainer = editor.element.querySelector('.e-rte-container');
    if (e.requestType === 'Preview') {
        editor.value = myCodeMirror.getValue();
        rteContainer.classList.remove('e-rte-code-mirror-enabled');
        editor.focusIn();
    }
    else {
        rteContainer.classList.add('e-rte-code-mirror-enabled');
        rteContainer.classList.remove('e-source-code-enabled');
        if (!mirrorView) {
            mirrorView = document.createElement('div');
            mirrorView.classList.add("rte-code-mirror");
            mirrorView.style.display = 'none';
            mirrorView.id = id;
            rteContainer.appendChild(mirrorView);
            renderCodeMirror(
                mirrorView,
                editor.value === null ? '' : editor.value
            );
        }
        else {
            myCodeMirror.setValue(editor.value === null ? '' : editor.value);
        }
        myCodeMirror.focus();
    
    }
    function renderCodeMirror(mirrorView, content) {
        myCodeMirror = CodeMirror(mirrorView, {
            value: content,
            theme: 'monokai',
            lineNumbers: true,
            mode: 'text/html',
            lineWrapping: true,
        });

        myCodeMirror.refresh();
    }
}

Weather.razor

<style>
    .e-rte-code-mirror-enabled .rte-code-mirror {
        display: block !important;
        /* To show the custom source code view. */
    }

    .e-rte-code-mirror-enabled .e-rte-content {
        display: none !important;
        /* To hide the editor area when custom source code enabled. */
    }
</style>

Attachment: SFTest_efcb2396.zip