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

Recommended Answers

All 32 Replies

I want just as this one above here on daniweb. No the Code or Inline Code of course

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?

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

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">``

Member Avatar for diafol

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?

Member Avatar for diafol

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

Member Avatar for diafol

As I assumed jquery from a previous post I thought this would work:

var qle = $(".ql-editor").html();

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.