Recommended client-side editor

Hi, i am exploring the Editor capabilities but have a hard time to determine which client-side editor I should use. If i am correct, the Editor API just does the conversion to HTML and allows to save the edited HTML again to the initial filetype.

As GroupDocs does not integrate or recommend a javascript editor for this, i tried summernote, trumbowyg, and am now looking for another one. The problem with the previously mentioned editors is that they sometimes produce non-valid html which the EditableDocument.FromMarkup() method from GroupDocs does not except (throws exception on).

Some exceptions i got are :

  • Internal error - Cannot find properly closed root HTML element
  • Stack is empty

I understand this not being an issue of GroupDocs API itself as it is normal I should feed it valid HTML but so what do you recommend as editor? Which is the editor in the .NET example (angular example?)

Thank you

1 Like

I am still working further on this and i thought it was worth noticing that I wrote some cleanup methods for my HTML using “Html Agility Pack” nuget. Using this code it converts correctly:

public string SaveHtml(string html, string path) {
        using (GroupDocs.Editor.Editor editor = new GroupDocs.Editor.Editor(path, null))
        {                
            EditableDocument newDoc = EditableDocument.FromMarkup(CleanupHtml(html), null);
            editor.Save(newDoc, "c:\\Temp\\saved.docx", new WordProcessingSaveOptions(WordProcessingFormats.Docx));

            return path;
        }
    }

    private string CleanupHtml(string html) {
        var doc = new HtmlDocument();
        html = Regex.Replace(html, @"\t|\n|\r|\r\n", "");

        doc.OptionFixNestedTags = true;
        doc.OptionOutputAsXml = true;
        doc.LoadHtml(html);

        var body = doc.DocumentNode.SelectSingleNode("//body");
        var cleanedHtml = (body != null) ?
            body.InnerHtml : doc.DocumentNode.InnerHtml;
        return "<html><head><title>temp</title></head><body>" + cleanedHtml + "</body></html>";
    } 

Still I’m interested in the correct/recommended way of doing it :slight_smile:

1 Like

@Verthosa,

Did you explore our GitHub open-source showcase projects (MVC and WebForms based)? Please note that GroupDocs.Editor for .NET is a back-end, UI-Independent API that can be integrated in any .NET application. You can locate API on the server-side. Server-based code invokes GroupDocs.Editor methods, passes input document and obtains results, that are transmitted to the client-side into the WYSIWYG HTML-editor, like CKEditor or TinyMCE.
Our web applications demonstrate the API features with a built-in WYSIWYG document editor.

You will find this article helpful. If you still have any concerns, please share.

Hi, thanks for your response. I am aware i should implement the front-end myself and did that using two types of wysiwyg editors being “summernote” and “trumbowyg”. Both however gave me back malformed HTML, so when i tried to create an EditableDocument from it (through FromMarkup() method), i received errors.
I noticed in the github example that all works flawlessly so i wonder which WYSIWYG editor is used there (can’t seem to find it in the sources) ?

1 Like

@Verthosa,

Please keep track of this ticket. However, as there is any update, we’ll also notify you in this same thread.

Great! appreciate it!

1 Like

@Verthosa,

You are welcome.

@Verthosa,

We used our own simple WYSIWYG editor based on contenteditable. However, you can try ckeditor. Hopefully it will work for you.

Thank you, i tried all of that but still i have documents not being able to convert to an EditableDocument or fail on the editor.Save method (InvalidOperationException: Internal error - Original URI should not be NULL, empty or whitespace).
I dived into the MVC example which works perfectly, but then i saw that the API version used is 19.5.0.0 and still used objects like EditorHandler and such.
Those are now (or will be) deprecated and marked as Legacy. Are there plans to publish a new example using the latest API without legacy objects/methods?

Thanks again

1 Like

@Verthosa,

We have logged this request as an enhancement here. We’ll certainly share a plan with you.

1 Like