Skip to content

pl-rich-text-editor element

Provides an in-browser rich text editor, aimed mostly at manual grading essay-type questions. This editor is based on the Quill rich text editor.

Sample element

Screenshot of the pl-rich-text-editor element

question.html
<pl-rich-text-editor file-name="answer.html"> </pl-rich-text-editor>

Customizations

Attribute Type Default description
allow-blank boolean false Whether an empty input box is allowed. By default, empty submissions will not be graded (invalid format).
clipboard-enabled boolean true Whether the element supports cutting, copying and pasting the contents of the editor from the user interface. Note that the editor content is still available in the browser's developer tools, which would allow students to copy the content anyway. Also note that preventing operations like copying or pasting text may be detrimental to the student's experience, and as such should be avoided unless absolutely necessary.
counter "word", "character" or "none" "none" Whether a word or character count should be displayed at the bottom of the editor. If min-word-count or max-word-count are set, then the counter is set to "word" by default.
directory string See description Directory where the source file with existing code is to be found. Only useful if source-file-name is used. If it contains one of the special names "clientFilesCourse" or "serverFilesCourse", then the source file name is read from the course's special directories, otherwise the directory is expected to be in the question's own directory. If not provided, the source file name is expected to be found in the question's main directory.
file-name string "answer.html" The name of the output file; will be used to store the student's answer in the _files submitted answer. Must be unique if more than one pl-rich-text-editor element is included in a question.
format "html" or "markdown" "html" Format used to interpret the specified source file or starting content. This option does not affect the output format.
markdown-shortcuts boolean true Whether the editor accepts shortcuts based on Markdown format (e.g., typing _word_ causes the word to become italic).
max-word-count integer none Maximum number of words in the submitted answer. Longer answers will be marked as invalid (not gradable).
min-word-count integer none Minimum number of words in the submitted answer. Shorter answers will be marked as invalid (not gradable). Cannot be used with allow-blank set to "true".
placeholder string "Your answer here" Text to be shown in the editor as a placeholder when there is no student input.
quill-theme string "snow" Specifies a Quill editor theme; the most common themes are "snow" (which uses a default toolbar) or "bubble" (which hides the default toolbar, showing formatting options when text is selected). See the Quill documentation for more information about additional themes.
source-file-name string Name of the source file with existing content to be displayed in the editor. The format of this file must match the format specified in the format attribute.

Word count

The algorithm identifies words by splitting on whitespace, a convention that works well for most standard English texts. In contexts such as formulas, programming syntax, or languages without space-separated words, the resulting count may not correspond to meaningful linguistic units.

Using more than one element in a question

The pl-rich-text-editor element creates a file submission corresponding to the HTML content of the student answer. If the file name is not provided, the name answer.html is used. If more than one pl-rich-text-editor is included in a question, they must each contain a different file name; in that case, the file name must be explicitly provided, as the default name would clash between elements.

Example implementations

See also