RTF Format In Web Text Editor

Is there a text editor on the web that supports input from RTF-formatted documents? I know it is a bit of an odd request for webdev, but I need to read RTF documents from the datab

Solution 1:

Quill is a rich text web editor.

Using the code from the quickstart you could enable it like this

Create the toolbar container

<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

Create the editor container

<div id="editor">
  <div>Hello World!</div>
  <div>Some initial <b>bold</b> text</div>
  <div><br></div>
</div>

Include the Quill library

<script src="//cdn.quilljs.com/0.20.1/quill.js"></script>

Initialize Quill editor

<script>
  var quill = new Quill('#editor');
  quill.addModule('toolbar', { container: '#toolbar' });
</script>

Setting the editor text

editor.setText("RTF document ");

Getting the editor text

by default 0 will get everything in the editor

var text = editor.getText(0);

also see this Mozilla post which defines how to implement your own rich text editor.

Solution 2:

You could use Word to load the RTF file, then Save As HTML. Works but generates a pile of spurious MS- tags.

Or I've written a program (Visual Studio) that you can have if you want - it's a bit basic, doesn't deal with fonts, but converts most text formatting. Let me know if you're interested (I'd need to tidy it a bit - it's very old - a bit like me).

Though as I write this, I see that Wamadahama may have a better solution.

Solution 3:

I also cam to this point and solved it by converting the html to rtf with a npm package. Like i posted here How to convert HTML to RTF using JavaScript you can use the package created from npm html-to-rtf-browser and bundled to a single file like i describe here

javascript-html-to-rtf-browser

form.onsubmit = function () {
  // convert html to rtf
   var htmlContent = editorElement.html();
   var htmlToRtfLocal = new window.htmlToRtf();
   var rtfContent = htmlToRtfLocal.convertHtmlToRtf(htmlContent);
   editorElement.html(rtfContent);
   return true;
}

Where editorElement is the quill content element/editor as jQuery element and form is the parent form ( with jQuery $(editorElement).closest('form') ).