I want to develop a blog application with Django backend and React frontend. I shall be using Postgresql.
I want to use a rich text editor like Quill to write the blog article. My questions:
I heard that article written in a text editor needs to be converted to HTML before saving in the database. If so, how do I do this in Django Rest Framework?
How do I present the article keeping the same style and formatting in the frontend from the database?
Say, I include multiple photos in the article. How do I save all the photos in the database? i.e. what should be the schema then?
I want to have my doubts clear before I jump in.
I'm also doing the same thing at the moment. For your answers :
In DRF, the simplest way to post the data is by using Textfield in your model. Rich text field (with Tags) will be stored in the Postgres. In the Admin page or the DRF API you'll see something like this
Then, to re-render it to the front end, you can use any HTML Parser library. for example I'm using "react-html-parser" that simply convert the rich text into the defined styling.
As for Image, this is a bit tricky, and I havent done this part myself but what i could think of right now is you would create another model & end points to store the images.
when sending the post request to the django, you would convert the base file path/url from the front end to back end. example :
original > http://localhost:3000/image/efewf23r.jpg
new (django) > http://localhost:8000/media/img/img_model/efewf23r.jpg
then do a second post request to the image itself and make sure django would rename the the file as per what we set above.
Let me know if you found a better solution.
It's been long since I posted this question. After that, I have gained enough working knowledge to make Quill.js (the rich text editor I'm using) work with React.JS, or, in my case Next.JS. So, this is focused on Quill.js only. The Quill npm package more specific to ReactJS is react-quill. I am presenting it as beginner friendly as possible.
A built-in function is provided with Quill: editor.getHTML(). editor is the current editor instance, where one types the content. This method generates the innerHtml of the content one prepares in the editor.
To save it to the databse, simply POST it to your back-end. But you must sanitize this innerHtml before passing it to the database. Can't say about server-side but I had to do this sanitization on the client-side. One good package is DOMPurify. You need to save this to the database if you want to present it in the same manner as it was typed in the browser.
The first point also provides the solution to my 2nd question. But one important point: The content one writes in Quill editor is also available as a JSON like format called quill-delta. You can get the delta with the function editor.getContents(). You need to POST it to the database if you want to edit the content in a later time.
To edit, you need to get this delta from the database and then initialize Quill editor with this delta in the value attribute.
For example, the text in orange is the delta representation of the text in the editor:
codepen source.
There is another function editor.getText() which extracts all the text from the editor.
Photos. Generally in Quill, you simply put the photo in the editor and Quill generates a base64 encoded delta for the photo. It's this easy. You don't need to worry about separate image fields.
Related
hi I am working on the fillable pdf in Salesforce, i have uploaded the pdf in the static resource in Salesforce , now need to handle the data to fill in it and download the file , can any suggestions to achieve it
Thanks in advance
There is no functionality in Apex to interact with fillable PDFs. While it's possible to interact with binary formats such as PDF in Apex, it's difficult, slow, and subject to the extensive limitations of the Salesforce governor limits. You'd have to implement this from scratch based on your knowledge of the PDF format.
You will likely have much more success either building PDF manipulation functionality in JavaScript on the front end, or calling out to an external service on Heroku or elsewhere that uses PDF libraries available in some other stack to do this work.
Salesforce does not support inputs on generated pdf via Visualforce
pages.
To achieve this functionality, you can create a form with all the
inputs that are required in the pdf.
Once the user fills in the information in the created form and submits it, generate the pdf with the filled information by the user.
Bonus: you can save the filled-in information as well by creating a record under the object for future reference (data is everything)
I have a very strange problem with CKEditor on Symfony 3.4
When I create a new line in my database, via the CKEditor utility, I write everything I want, I make the layout, I add images. Everything is OK.
But when I validate, to save the HTML format of what I typed, in my database, it happens that it does not record everything.
Either he takes away text, images, or both.
And I have this since I configured the bundle FOSUserBundle.
I write my text
I check the source code
I look at what has been saved in the database
And the rendering on my site
I want to use Google Translate in my project. I completed all the formalities with Google. I have the API key also with me. With this key I can easily translate any word with JavaScript. But how to translate the PDF file as we can do in Google Translate site? I found one thing like this:
http://translate.google.com/translate?hl=fr&sl=auto&tl=en&u=http://www.example.com/PDF.pdf
But here I cannot use my key, as a result it takes so much time to translate. So I want to use my Key and translate a PDF file. Please help me out.
My approach is like this:
1. One html page I have.
2. One browse button for pdf
3. Upload the file
4. Transalte the pdf with Google API and show in the html page.
I searched it for this pdf translate with but did not find anything. Please help me out.
TL:DR: Use headless browser to render a PDF from the Google's PDF translation service.
PDF is a complex format and can include many components that are text. To translate it I will describe solution from easy one to more advanced.
Translate raw text
If you only need the translation without the visual output, you can extract the text and give it to Google Translate.
Since you did not provide information on your project (language, environment, ...) I will redirect you to this thread on how to extract text
Translate all text
If you need to get text from everything in your PDF, well that's pretty hard. To avoid headache (partially) you can convert the PDF to an image (using imagemagick tools or similar) and then you have three options:
OCR the text from the image, then give it to google, again you are loosing the original form.
OCR the text, but saving the position (some libraries can do that, again since you did not specify your project information, see theses links: #1, #2, #3, #4).
Then translate it with google api, and write the result to the image. For great results you need to take account of text font, color and background color. Pretty difficult, but feasible.
Translate the image using google translate image service. Unfortunately this feature is not available in the public API, so unless doing some reverse engineering, this is not possible.
Translate using Google's PDF translation service
The solution you provide by using the translate site can be automated quite easily. The reason it's long is because it is an heavy process and you probably won't beat Google.
Using an headless browser, you can get the translation page with your pdf, then observe that the translated content is sitting in an iframe, get that iframe and finally print to PDF.
Here is a short example using SlimerJS (should be compatible for Phantomjs)
var page = require("webpage").create();
// here you may want to setup page size and options
// get the page
page.open('https://translate.google.fr/translate?hl=fr&sl=en&u=http://example.com/pdf-sample.pdf', function(status) {
if (status !== 'success') {
console.log('Unable to access network');
} else {
// find the iframe with querySelector
var iframe_src = page.evaluate(function() {
return document.querySelector('#contentframe').querySelector('iframe').src;
});
console.log('Found iframe: ' + iframe_src);
// render the iframe
page.open(iframe_src, function(status) {
// wait a bit for javascript to translate
// this can be optimized to be triggered in javascript when translation is done
setTimeout(function() {
// print the page into PDF
page.render('/tmp/test.pdf', { format: 'pdf' });
phantom.exit(0);
}, 2000);
});
}
});
Giving this file: http://www.cbu.edu.zm/downloads/pdf-sample.pdf
It produce this result (translated in French): (I posted a screenshot since I cannot embed PDF ;) )
Use Apache Tika to extract the text content of the pdf file(you should write the necessary java code), then use whatever API you want to use to translate it. But, as it has been mentioned above Google Translate is a paid service.
I'm looking for a way to create a search box in wordpress, where visitors can search a number from the database. Is this possible? I have several package numbers in my database. I want to give my visitors the ability to search for their package number and request the information that comes with the number.
What you want to do can be done.
I suggest a different approach than using wp-exec. (I just looked at wp-exec website, and that plugin was created for WordPress 1.5, which means it hasn't been updated in about 5 years).
The content you want to display exists entirely outside of WordPress. I suggest you use a custom page template - see
http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates
In this case you would not use WordPress posts or pages or custom post types. On the custom page template you would write (or have written if you don't have the knowhow to do it yourself) PHP code to extract the info from the database and display it on a page.
For pages like that you would be using WordPress only as a container within which to display the results - they custom page would appear in the site Nav, The page of results would use the site's theme to display so it looks like the rest of the site.
But the code to display from the database would not use the WordPress loop. It would be PHP / MySQL data retrieval and display code.
I really doubt you will find a plugin that lets you display results from an external database, formatted the way you want them to appear. The reason is every external database is different, has different tables and table structures. And no two sites will want the external data visually displayed in the same way. So there is little generalization to encapsulate in a plugin as everyone wants it different.
I've created pages on some sites along the lines of what you want to do thus I know it can be done. But it requires writing custom code.
I am looking for some initial direction on this one because I cannot seem to find my way with it. Let me explain...
I am developing a website wherein a logged in site member (Joomla 1.6) can fill out a simple form and attach a pdf to be uploaded upon submission. The user then clicks the submit button and the page will refresh to a new and unique web page.
User Submits data on http://www.examplesite.com and then after submission a new web page is generated that is called http://www.examplesite.com/userSubmittedValue
This newly generated web page would come from a template that is specified by the administrator and, most important, it will display all of the information that the user submitted. Also, there would be a link to download the pdf they uploaded. The user could then view a list of all the pages they have created in this manner via their profile.
I have seen this all over, but I am at a loss for how to generate this. Any help is much appreciated.
This is not something you will be able to easily do or get a detailed answer for here. If you just wanted to do the submission form with a thank you page that shows the data submitted you could use any number of form wizard type extensions - http://extensions.joomla.org/extensions/contacts-and-feedback/forms
If you just needed a way for users to upload PDfs and have access to them you could use one of the file management extensions that offer front end upload features - http://extensions.joomla.org/extensions/directory-a-documentation/downloads
If the additional data that is being submitted is simply data related to the file - title, description, etc then one of the file download components should work fine for you. The choices are limited in 1.6 at this time though so you might have to go with 1.5 to get the extension that works best for your needs.
So this probably isn't the best way to do it if your using Joomla but it just might help.
I would use PHP and inside of you're directory have a file like "template.html". Then I would create some php to handle the task of....
Opening "template.html"
Finding and replacing the values that the user passed you
Save the "template.html" under a new name (userSubmittedValue.html)
Again, I never really use Joomla. If you were to try this I'd suggest checking out php's file system functions (http://us2.php.net/manual/en/ref.filesystem.php).
Hope this helps a bit.