Skip to main content

Methods

destructor​

Releases occupied resources

void destructor();

richtext.destructor();

exitFullScreen​

Exits the full screen mode

void exitFullScreen();

richtext.exitFullScreen();

fullScreen​

Enters the full screen mode

void fullScreen();

richtext.fullScreen();

getEditorAPI​

Returns an object with editor API methods

object getEditorAPI();

Returns:

TypeDescription
objectan object with API methods of the editor
var EditorAPI = richtext.getEditorAPI();

Details​

The returned object contains a list of methods you can use to apply different operations to the editor. Check the list of editor API methods:

getStats​

Returns statistics about the entered content

object getStats();

Returns:

TypeDescription
objectan object with available statistical data about edited text
var chars = richtext.getStats(); 
// -> {chars: 467, words: 80, charsExlSpace: 393}

Related samples: Get Stats

Details​

Getting separate statistical data fields​

You can get each field of statistical data separately, as it's described below.

Characters

To return the count of characters typed into the editor, use the chars property of the getStats() method.

var chars = richtext.getStats().chars;

Words

To return the count of words typed into the editor, use the words property of the getStats() method.

var words = richtext.getStats().words;

Characters without spaces

To return the count of characters typed into the editor excluding the number of spaces, use the charsExlSpace property of the getStats() method.

var chars = richtext.getStats().charsExlSpace;

Getting custom statistics​

It is also possible to return a value of the custom statistical parameter set via the customStats configuration option, e.g. the number of sentences. For that, use the name of the custom property as a property of the getStats() method:

var richtext = new dhx.Richtext("rich", {
    customStats: [ 
        {
           name: "chars"
        },
        {
           name: "words"
        },
        {
           name: "sentences",
           cb: function(text) {
               var rawSentences = text.split(/[.?!]+/);
               var count = 0;
               for (var i=0; i<rawSentences.length; i++) {
                   if (rawSentences[i].length > 0) {
                       count += 1;
                   }
               }
               return count;
           }
        }
    ],
    toolbarBlocks: ["default", "stats"]
});

// return the number of sentences typed into the editor
var sentences = richtext.getStats().sentences;

getValue​

Returns the content of the RichText editor in the chosen format

string getValue( [string mode] );

ParameterTypeDescription
modestringthe format of returned content:"html" (default), "markdown" or "text"

Returns:

TypeDescription
stringthe content of the RichText editor
// getting content in the markdown format
var content = richtext.getValue("markdown");

Related samples: Get Value

paint​

Repaints RichText

void paint();

richtext.paint();

setValue​

Adds content into the RichText editor

void setValue(string value,string mode);

ParameterTypeDescription
valuestringthe context you want to add into the editor in either HTML or Markdown format
modestringoptional, the format of text parsing: "html" or "markdown"
var htmlText = `<h1>Meet DHTMLX Rich Text Editor!</h1>` +
`<p>This demo will show you a customizable JavaScript rich text editor.</p>` +
`<p><i>To learn more, read </i><a href="https://docs.dhtmlx.com/richtext/"><i>documentation</i></a></p>.`
 
// adding HTML content
richtext.setValue(htmlText);

Related samples: Setting HTML content

Details​

An example of adding Markdown content is given below:

var mdText = `# Meet DHTMLX Rich Text Editor!
 
This demo will show you a customizable **JavaScript rich text editor**.
 
*To learn more, read [documentation](https://docs.dhtmlx.com/richtext/)*.`
 
richtext.setValue(mdText,"markdown");

Related samples: Setting Markdown Value

note

Note, that for a text in the Markdown format you need to define paragraphs by empty lines.