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 database and edit them in a web-based text editor and store it back in RTF. Before I invest too heavily in a conversion tool, I thought I would ask if any of the many web text editors supported RTF. My research is showing that they don't.
Additionally, since this is an MVC 4.6 application, would it be a huge effort to write a two-way RTF-HTML conversion tool in C#?
Sample input that would be received by the editor:
"{\rtf1\ansi{\fonttbl\f0\fswiss Helvetica;}\f0\pard This is some {\b bold} text.\par }"
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.
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.
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') ).
Related
I am using React-Quill to add Rich text editor to my app.
have the next string store in my DB:
const text = '<p>Hello<strong> World</strong></p><p><strong>Next Line</strong></p>';
Now I want to "Render" the text const in a REACT component, but with the "Styuling" that HTML gives to it.
Hello World
Next Line
How can I do it? or other rich text editor to achieve that?
You can use dangerouslySetInnerHTML
Source: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
const text = '<p>Hello<strong> World</strong></p><p><strong>Next Line</strong></p>';
<div dangerouslySetInnerHTML={{__html:text}} />
react-quill supports HTML strings out of the box, so there's nothing to do except set the value property of the component with the string you receive from the database.
<ReactQuill value={text} ... />
Yeah react-quill is the way for working with React. I also have had a small demo to demonstrate how it works (we might have to put some css files to make it looking good): https://codesandbox.io/s/hardcore-hill-mdxji?file=/src/App.js
I designed my resume with bootstrap and material design lite, now I want to convert the html page to pdf file.
I tried some libraries (jsPdf) and some tools (html2pdf, princexml), it produces the pdf file but the problem is, that pdf is not what it looks in the html page.
There is no styles, the output i am getting is similar to pressing ctrl+p` in browser.
My question is,
Is there any tools or libraries for my problem ?
or
Is there any options in above mentioned tools that i can use?
pdf outputs
Try this converter WKHTMLTOPDF on your back-end. It outputs exactly what your see in you browser. It supports html, css and even js. Wkhtmltopdf based on webkit.
Using runtime it can be used like that
wkhtmltopdf http://google.com google.pdf
In your case, it seems that wkhtmltopdf can not load css. Check right css include path. Do not use relative path.
Your problem is the Bootstrap library, not any plugins or PDF tools you are using. It removes most styles when you "print" a web page, including print to PDF. My company, the DocRaptor HTML to PDF service, has a great blog post with a list of suggested fixes for getting Bootstrap styles to print correctly, but they could be summarized as:
Print using screen CSS mode/rules, not print. Otherwise, you have to a lot of overrides for Bootstrap to get it to work right. Much easier to just make the renderer use screen mode.
Bootstrap will think most PDFs are an extra small device, like a cell phone, so you have to either adjust your breakpoints or your in-code column definitions.
If your last column drops to a new row, this is because Bootstrap defines the width for many columns as XX.66666667%. The PDF engine adds all these up, and because of the 7 at the end, it is technically greater than 100%. Since the row width is over 100%, it bumps the last column to a new row. the fix is to override Bootstrap's column widths (handy Gist file for that).
jsPDF is able to use plugins. In order to enable it to print HTML, you have to include certain plugins and therefore have to do the following:
Go to https://github.com/MrRio/jsPDF and download the latest Version.
Include the following Scripts in your project:
jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
If you want to ignore certain elements, you have to mark them with an ID, which you can then ignore in a special element handler of jsPDF. Therefore your HTML should look like this:
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
Then you use the following JavaScript code to open the created PDF in a PopUp:
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
For me this created a nice and tidy PDF that only included the line 'print this to pdf'.
Please note that the special element handlers only deal with IDs in the current version, which is also stated in a GitHub Issue. It states:
Because the matching is done against every element in the node tree, my desire was to make it as fast as possible. In that case, it meant "Only element IDs are matched" The element IDs are still done in jQuery style "#id", but it does not mean that all jQuery selectors are supported.
Therefore replacing '#ignorePDF' with class selectors like '.ignorePDF' did not work for me. Instead you will have to add the same handler for each and every element, which you want to ignore like:
var elementHandler = {
'#ignoreElement': function (element, renderer) {
return true;
},
'#anotherIdToBeIgnored': function (element, renderer) {
return true;
}
};
From the examples it is also stated that it is possible to select tags like 'a' or 'li'. That might be a little bit to unrestrictive for the most usecases though:
We support special element handlers. Register them with jQuery-style
ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
There is no support for any other type of selectors (class, of
compound) at this time.
One very important thing to add is that you lose all your style information (CSS). Luckily jsPDF is able to nicely format h1, h2, h3 etc., which was enough for my purposes. Additionalyl it will only print text within text nodes, which means that it will not print the values of textareas and the like. Example:
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>
So, I tend to write my documents in markdown and I recently discovered that I could create abbreviations in markdown. This is great, but I had already created my own version of the abbreviation tag as I didn't like the way the standard tag looked when rendered. Is there a best practice to overriding existing tags?
The below text is to explain what I am trying to achieve in equivalence to. I cannot modify the markdown parser itself as I host my site on Github pages. For those who want to know how I have my own HTML tag, I use Polymer to create these tags.
Markdown Text:
Markdown converts text to HTML.
*[HTML]: HyperText Markup Language
Converted Code:
<p>Markdown converts text to <abbr title="HyperText Markup Language">HTML</abbr>.</p>
I want it converted to:
<p>Markdown converts text to <short-text abbr="HTML">HyperText Markup Language</short-text>.</p>
If it's all simple text, and you're doing this to all abbr tabs, you can simply build a new element and replace the old one.
With jQuery (for simplicity):
jQuery("abbr").each(function() {
var title = jQuery(this).attr("title");
var text = jQuery(this).text();
var $new = jQuery("<short-text></short-text>").attr("abbr", text).html(title);
jQuery(this).replaceWith($new);
});
After the page is loaded and the Markdown is parsed, try something like this (supported in ES5, nothing external required for supporting browsers):
document.querySelectorAll('abbr').forEach(function(el) {
var newEl = document.createElement('shortText');
newEl.setAttribute('abbr', el.innerHTML);
newEl.innerHTML = el.getAttribute('title');
el.parentNode.replaceChild(newEl, el);
});
I'm trying to display some rich text in a component with a tpl in my extjs application. I get the rich text from my database and it looks like this:
this is some example text \r\n\r\n with two line breaks
At the moment extjs just displays the text but I want it to also make the line breaks.
On the server-side I use PHP and the data then gets loaded into extjs via a direct layer.
Are there any possibilities to do this? The best thing would be if you could somehow translate the rich text to HTML.
Here is an example of my tpl:
tpl:[
'<h2>Some HTML Title</h2>'
'{RICH_TEXT}'
'<p>Some more HTML Stuff</p>'
]
Thanks in advance for your help.
EDIT:
I also encountered some cases where there is more than just some line breaks for example:
{\rtf1\ansi\ansicpg1252\deff0{\fonttbl{\f0\fnil\fcharset0 MS Sans Serif;}}
{\colortbl ;\red0\green0\blue0;}
\viewkind4\uc1\pard\cf1\lang2055\b\f0\fs16 text text text\b0 , more text }
How can I handle this? If there is no possibility, how can I get rid of that stuff and just display the clear text, because this is visible in extjs.
In JS you can replace the linebreaks with br tags with the following
str = str.replace(/(?:\r\n|\r|\n)/g, '<br />');
Or, you can do this same process on the PHP side before the data is sent using the built in function nl2br: http://php.net/manual/en/function.nl2br.php
How do you copy the html code of a link to the clipboard and parse it as a link in Lotus Notes?
For example, in Javascript put <a href='http://www.stackoverflow.com'>StackOverFlow</a> into clipboard,　and then parse it as a link in Lotus Notes while writing a new email. It should only show a link as StackOverFlow in new message.
I found a function window.clipboardData.setData("Text",link), but it can only copy the text into clipboard.
Any tips for me?
#Carlos has the basic user-level way to do it but it seems you want to do this programattically. I think the most effective approach is to have an action such as "paste link" that:
accesses the clipboard
parses the text into a basic html fragment
saves that fragment to disk
imports that html into the rich text field
here's an example on how to get to the clipboard.
To import the link into notes, build a rudimentary HTML file from your action, along the lines of:
<html><body>
<a id="myLink" href="http://www.google.com">Google Site</a>
</body></html>
save it and then import it using code like:
dim ws as New NotesUIWorkspace
dim d as NotesUIDocument
set d = ws.currentDocument
call d.import( "HTML File", "c:\foo.html" )
(assuming you saved your file as "c:\foo.html").
Depending on what exactly you are trying to achieve and what you're most comfortable with, you may want to compose the HTML outside of Notes and just have the action do the import bit. If you take this approach then the need to play with the clipboard is gone.
Note the following:
the method `NotesUIDocument.Import()` injects the contents of the HTML file wherever the cursor is in the rich text (body) field. You need to have your cursor in the right place.if you've got the cursor in a non-rich text field you will probably get an error.the method `NotesUIDocument.Import()` mirrors the functionality of the menu item `File \ Import` so you don't even have to write any code in Notes if you don't want to.
window.clipboardData is an Internet Explorer only feature. Other browser vendors view meddling with the clipboard as a security threat and potentially really really annoying so it isn't implemented in Firefox, for example.
The only way I know to do it cross-browser is to use a Flash movie, and you can find out more about that here: http://www.jeffothy.com/weblog/clipboard-copy/
If you're happy with supporting IE only, then the way to get the full outer HTML of an element (not just the innerHTML) would be to duplicate the link into another element and get the innerHTML of that element.
The javascript looks something like this (sorry, it's untested)
var newEl = myLink.cloneNode()
var div = document.createElement('div');
div.appendChild(newEl);
var outerHTML = div.innerHTML; // <-- this is the variable you want.
To create a link in a Lotus Notes email you have to:
Write the Text for the link example: Stackoverflow
Select the text
Click Create->Hotspot->Link Hotspot...
Enter the url in the Value field
This is for Notes 7. Not sure if it was Notes 8 or 8.0.2 where they added a button on the toolbar to make it easy to do this.
Hope this helps