Hello i want to implement a rich text editor for a <textarea> that my users are uploading text. I found some on google but most of them are very old - like 9 years ago. Has anyone in mind anything more recent? It has to submit the text and then return it for other users to see. Just like here the rich text above. But i want it to change color too. Thanks in advance.
P.S. I dont need the script to upload to database of course just the rich text editor
How can that work? https://www.w3schools.com/tags/tag_textarea.asp does not tell us that textarea supports rich text. Maybe that's why it's not done that way at all.
I think you have to host the content/text somewhere like Google Docs does. Maybe it's a deeper problem after all.
I checked again with a simple example at https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_textarea
I want just as this one above here on daniweb. No the Code or Inline Code of course
If you want what DANIWEB uses just message Dani about that.
It's a markdown editor AFAIK. https://www.google.com/search?q=markdown+editor
My first choice would be https://codepen.io/Kiwka/pen/YNYvyG
My second is quills because it seemed kind of heavy
What do you think? @diafol, @cereal, @rproffitt
@S. It's up to you, but I think you need to reconsider the use of textarea since no rich text there.
Yes i used divs
when i fully complete it i ll post it here
Quilljs is good to go!!
I think this is the best Rich Text Editor script https://codepen.io/mykh/pen/zqdPqr
I think this is the best Rich Text Editor script https://codepen.io/mykh/pen/zqdPqr
That's also with Quill and it's the best you can get for free.
You can also just use the core JS & CSS files from Quill which is lighter due to no themes, formatting and non essential modules.
<link href="//cdn.quilljs.com/1.2.6/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.2.6/quill.core.js"></script>I can't write down anything. I mean the cursor doesn't focus on the selected so that you can type something. Any help?
I cant upload the text since i am using divs instead of textarea. I am passing the value thought the id and i put the same id on the div, the one i had on the text area. but the value doesn't pass throught. Any guess why?
Can a <div> hold a value to pass on for php?
You can grab the data with JS (or JQuery) and then you can do whatever you want with it.
https://www.google.com/search?q=get+content+of+contenteditable+for+PHP&gws_rd=cr&ei=GotKWcOpNIKZaevMqtAL
i already did that. With the <textarea class="big-dog" name="status" class="form-control share-text placeUpdate" id="statusText" rows="10" cols="100" placeholder="<?php echo $lang['MyText'].'...'?>"></textarea> stores ok.
But with <div name="status" class="form-control share-text placeUpdate" id="statusText"><p>This text can be edited by the user.</p>
doesn't
Jquery
var update = $("#statusText").val(); alert($('#statusText').val());
the alert returns undefined
updateNewsFeed(uid, update,Z,groupID,token,pic,lat,lang,baseUrl,apiBaseUrl,type,title);
$("#statusText").val('').focus().css("height", "20px");
........
}It's not .val(), but .text() if you want to store the text in variable.
ok it uploads now but the rich text doesn't work any guess?
should i put a class as provided by quills.css?
...and whats strikes me is that even the <strong></strong> on
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>doesn't change too
You shoudl read the documentation, because there are specific API methods to get the text or ful html from within the editor.
https://quilljs.com/docs/api/#gettext
https://quilljs.com/docs/api/#getcontents
i 'm getting this on console
Use of Mutation Events is deprecated. Use MutationObserver instead. quill.js:3301:4 quill:toolbar ignoring attaching to nonexistent format showHtml <button type="button" class="ql-showHtml">``
I see that the editor creates a div inside the original editor div that has a classname called 'ql-editor'. So,
var qle = $(".ql-editor").html();
console.log(qle);Worked for me.
I put a variable and called it for console.log(); ? Hows that going to solve it?
Anyways where do i put that to find out where the issue is? Cause i am getting a ReferenceError: $ is not defined[Learn More] error?
Hows that going to solve it?
If you can get the content into a variable then you can send it if ajaxing. The $ issue is probably due to it not picking up jquery. I assumed you were using it.
Oh you meant that i should have icluded a JQuery? OK. But -i mean for uploading a picture- the quills script should had a function (php or other server side) to do the uploading? I mean does -as it should , change the font or bold or color of text after uploading a text?
Now i am getting
quill:toolbar ignoring attaching to nonexistent format showHtml <button type="button" class="ql-showHtml"> quillsTest.js:1936:5 Use of Mutation Events is deprecated. Use MutationObserver instead. quillsTest.js:3302:4'
`URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.``
the quills script should had a function (php or other server side) to do the uploading?
Quiljs is just an edior. How you want to upload and save the data that's up to you.
I mean does -as it should , change the font or bold or color of text after uploading a text
To store also all the formatting you should use the getContents()API method.
getContents: Retrieves contents of the editor, with formatting data, represented by a Delta object.
https://quilljs.com/docs/api/#getcontents
https://quilljs.com/docs/delta/
And there's even an example with form submit to save the data. Notice the hidden input[name=about] where the data goes in.
http://quilljs.com/playground/#form-submit
Do you even read the quilljs guides & docs?
So i am guessing i have to change the Delta to HTML to upload the formatted -by the user- text?
So i am guessing i have to change the Delta to HTML to upload the formatted -by the user- text?
In early versions of Quilljs there used to be a getHtml() method, but they dropped that method in favor of delta objects to abstract away from providing HTML.
To get the HTML structure you could do something like this in vanilla JS.
Quill.prototype.getHtml = function() {
return this.container.querySelector('.ql-editor').innerHTML;
};But I took that snippet from this discussion :)
https://github.com/quilljs/quill/issues/903
More discussion about this matter here
https://github.com/quilljs/quill/issues/993
And there's a npm Quill Delta to HTML Converter
https://github.com/nozer/quill-delta-to-html
As I assumed jquery from a previous post I thought this would work:
var qle = $(".ql-editor").html();
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.