How can I get RTF from HTML with CKEditor?

Question

I have a pretty good structure for multiple CKEditor textareas, and when clicking a submit button I'm letting the user copy/paste the HTML from a JavaScript prompt.

However, I want RTF instead of HTML. Do I need another JavaScript plugin, or can this be done with CKEditor?

Here's my code:

<!DOCTYPE html>
<html>
    <head>
        <title>CKEditor Test</title>

        <style type="text/css">
                .container {
                        margin-left: 30%;
                }
        </style>
    </head>
    <body>
    <div class="container">
            <form>
                <textarea class="ckeditor" name="ckeditor1">
                </textarea>
                <input type="submit" value="submit" />
            </form>

            <form>
                <textarea class="ckeditor" name="ckeditor2">
                </textarea>
                <input type="submit" value="submit" />
            </form>

            <form>
                <textarea class="ckeditor" name="ckeditor3">
                </textarea>
                <input type="submit" value="submit" />
            </form>
    </div>
    <script src="ckeditor_4.4.4_basic\ckeditor\ckeditor.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(".ckeditor").each(function() {
            CKEDITOR.replace($(this).attr("name"));
            CKEDITOR.config.width = 500;
        });

        $("form").submit(function(e) {
            e.preventDefault();

            var textarea = $(this).find("textarea:first");
            var name = $(textarea).attr("name");

            // forcing the textarea to update:
            CKEDITOR.instances[name].updateElement();

            var text = textarea.html();
            window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
        });
    </script>
    </body>
</html>

...what it looks like: multiple textareas with CKEditor

...and some sample HTML output (from the text in the above screenshot):

&lt;p&gt;some top-level text&lt;/p&gt;&lt;ul&gt;&lt;li&gt;a sub-item&lt;/li&gt;&lt;li&gt;another sub-item&lt;/li&gt;&lt;/ul&gt;

Note: I'm using the basic version of CKEditor, and have disabled some buttons with this line in config.js:

config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript,Link,Unlink,About';

CKEditor is an HTML editor, not a RTF one. you won't find much in the way of RTF tools on the web; there's really no point of it anymore... — dandavis, Sep 01 '14 at 18:01
@dandavis -- ok thanks, except that I need to format HTML into RTF, so that I can later generate this input into a Word document. — Ian Campbell, Sep 01 '14 at 22:51
little known trick: if you save an html document as "something.doc", it will open in word just fine. you can also save bare table html as "ss1.xls" to open it in excel just fine. — dandavis, Sep 01 '14 at 22:54
@dandavis -- Interesting, didn't know you could do that! However, I will be sending the input to the server, inserting it into the database, and generating a Word document with this and other info with Telerik Standalone Report Designer... so it will be mashed with other data. Maybe there's a C# and/or Telerik solution though, but JavaScript would be preferable. — Ian Campbell, Sep 01 '14 at 23:22
So, as an update I now have the HTML from the database correctly displaying through a Telerik HtmlTextBox control, but am still curious if there is a pure JavaScript or C# solution. — Ian Campbell, Sep 05 '14 at 19:13

score 0 · Answer 1 · edited May 23 '17 at 11:45

It can be done with CKEditor. The idea is to convert the HTML, generated by CKEditor to RTF after editing. A soultion for that can be found here: https://stackoverflow.com/a/155112/4776207.

There are two downsides, I admit, but it could still be a perfectly sufficient solution in your case.

The solution is in C# but the conversion to JS is rather trivial even without C# knowledge if you guess that result = System.Text.RegularExpressions.Regex.Replace(result, @"<( )*br( )*>", "\r", System.Text.RegularExpressions.RegexOptions.IgnoreCase); converts to result = result.replace(/<( )*br( )*>/gi, "\r"); So it should take just a couple of minutes to get the function converted to JS.
Regex, may not be a suitable tool for dealing with HTML, ok, but for your use case, that needs to be able to deal with a very limited set of html tags, it is powerful enough. You could even leave away much of the conversion function.

How can I get RTF from HTML with CKEditor?

1 Answers1