Difference between revisions of "Markdown Editor"

From WHMCS Documentation
 
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
WHMCS has implemented Bootstrap Markdown Editor to the ticket system as a Markdown Editor. The editor allows users who may not know Markdown to use toolbar buttons and shortcuts. Also, the syntax renders while editing to show the expected result. Headings are larger, emphasised words italicise, links underline, etc.
+
WHMCS supports Markdown for formatting of ticket messages, notes, client notes and more.
  
−
=== Autosaving ===
+
You can access the markdown editor when you submit or reply to support tickets at '''Support > [[Support Tickets]]''' or create a predefined reply at '''Support > [[Predefined Replies]]'''.
−
The editor has a built in auto-save feature. In WHMCS, this means that each ticket reply or note will save every 10 seconds. Auto-save uses Browser storage, so each user has unique saved replies.
 
−
The save will load when visiting a ticket visited before. Each auto-save has a unique filename. This means that a user can start a reply on many tickets and have them saved separately. Notes also have this same functionality.
 
−
The saved file clears when submitting a reply or note.
 
  
−
=== Markdown Guide ===
+
Supported formatting includes:
  
−
This is the same guide displayed in WHMCS when clicking the Markdown Guide toolbar button.
+
* '''Bold'''
 +
* ''Italics''
 +
* Headings
 +
* Bulleted Lists
 +
* Numbered Lists
 +
* Code Blocks
 +
* Quotes
  
−
'''Emphasis'''
+
=== Editor ===
  
−
'''<nowiki>**bold**</nowiki>'''
+
An editor is provided that makes it easy to apply common formatting.
  
−
''<nowiki>*italics*</nowiki>''
+
The following screenshot provides an example of the editor in ''Preview Mode'' for a [[Support Tickets|support ticket]] reply.
  
−
<nowiki>~~strikethrough~~</nowiki>
+
[[File:Markdown-editor.jpg]]
  
−
'''Headers'''
+
=== Markdown Guide ===
−
 
 
−
<nowiki># Big header
 
−
 
 
−
## Medium header
 
−
 
 
−
### Small header
 
−
 
 
−
#### Tiny header</nowiki>
 
−
 
 
−
'''Lists'''
 
−
 
 
−
<nowiki>* Generic list item
 
−
 
 
−
* Generic list item
 
−
 
 
−
* Generic list item
 
−
 
 
−
1. Numbered list item
 
−
 
 
−
2. Numbered list item
 
−
 
 
−
3. Numbered list item</nowiki>
 
−
 
 
−
'''Links'''
 
−
 
 
−
[Text to display](http://www.example.com)
 
−
 
 
−
'''Quotes'''
 
−
 
 
−
<nowiki>> This is a quote.
 
−
 
 
−
> It can span multiple lines!</nowiki>
 
−
 
 
−
'''Tables'''
 
  
−
<nowiki>| Column 1 | Column 2 | Column 3 |
+
A convenient and easily accessible Markdown Guide is provided within the product accessible via the Help icon within the editor toolbar at any time.
  
−
| -------- | -------- | -------- |
+
<table class="table table-striped">
 +
<tr>
 +
<td>'''Markdown'''</td>
 +
<td>'''Output'''</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
<nowiki># This is an <h1> tag</nowiki>
  
−
| John | Doe | Male |
+
<nowiki>## This is an <h2> tag</nowiki>
  
−
| Mary | Smith | Female |</nowiki>
+
<nowiki>###### This is an <h6> tag</nowiki>
 +
</td>
 +
<td>
 +
<samp><h1>This is an &lt;h1&gt; tag</h1>
 +
<h2>This is an &lt;h2&gt; tag</h2>
 +
<h6>This is an &lt;h6&gt; tag</h6>
 +
</samp>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td><nowiki>*This text will be italic*</nowiki>
  
−
Or without aligning the columns...
+
<nowiki>_This will also be italic_</nowiki>
  
−
<nowiki>| Column 1 | Column 2 | Column 3 |
+
<nowiki>**This text will be bold**</nowiki>
  
−
| -------- | -------- | -------- |
+
<nowiki>__This will also be bold__</nowiki>
  
−
| John | Doe | Male |
+
<nowiki>_You **can** combine them_</nowiki>
 +
</td>
 +
<td>
 +
<samp><p><em>This text will be italic</em></p>
 +
<p><em>This will also be italic</em></p>
 +
<p><strong>This text will be bold</strong></p>
 +
<p><strong>This will also be bold</strong></p>
 +
<p><em>You <strong>can</strong> combine them</em></p>
 +
</samp>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
<nowiki>* Item 1</nowiki>
  
−
| Mary | Smith | Female |</nowiki>
+
<nowiki>* Item 2</nowiki>
  
−
'''Displaying code'''
+
<nowiki>  * Item 2a</nowiki>
  
−
<nowiki>`var example = "hello!";`
+
<nowiki> * Item 2b</nowiki>
 +
</td>
 +
<td>
 +
<samp><ul><li>Item 1</li>
 +
<li>Item 2
 +
<ul><li>Item 2a</li>
 +
<li>Item 2b</li>
 +
</ul></li>
 +
</ul></samp>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
<nowiki>1. Item 1</nowiki>
  
−
Or spanning multiple lines...
+
<nowiki>2. Item 2</nowiki>
  
−
```
+
<nowiki>3. Item 3</nowiki>
  
−
var example = "hello!";
+
<nowiki>  * Item 3a</nowiki>
  
−
alert(example);
+
<nowiki>  * Item 3b</nowiki>
 +
</td>
 +
<td>
 +
<samp><ol><li>Item 1</li>
 +
<li>Item 2</li>
 +
<li>Item 3
 +
<ul><li>Item 3a</li>
 +
<li>Item 3b</li>
 +
</ul></li>
 +
</ol></samp>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
<nowiki>[WHMCS Marketplace](http://marketplace.whmcs.com)</nowiki>
 +
</td>
 +
<td>
 +
<samp>[http://marketplace.whmcs.com WHMCS Marketplace]
 +
</samp>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
<nowiki>Header for quotes:</nowiki>
  
−
```</nowiki>
+
<nowiki>> This is the first line of the quote</nowiki><br/>
 +
<nowiki>>.</nowiki><br/>
 +
<nowiki>> followed by the second line.</nowiki>
 +
</td>
 +
<td>
 +
<samp><p>Header for quotes:</p>
 +
<blockquote>
 +
<p>This is the first line of the quote</p>
 +
<p>followed by the second line.</p>
 +
</blockquote>
 +
</samp>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
<nowiki>I think you should add padding around the `$string` output.</nowiki>
 +
</td>
 +
<td>
 +
<samp><p>I think you should add padding around the <code>$string</code> output.</p>
 +
</samp>
 +
</td>
 +
</tr>
 +
</table>

Latest revision as of 19:05, 14 April 2022

WHMCS supports Markdown for formatting of ticket messages, notes, client notes and more.

You can access the markdown editor when you submit or reply to support tickets at Support > Support Tickets or create a predefined reply at Support > Predefined Replies.

Supported formatting includes:

  • Bold
  • Italics
  • Headings
  • Bulleted Lists
  • Numbered Lists
  • Code Blocks
  • Quotes

Editor

An editor is provided that makes it easy to apply common formatting.

The following screenshot provides an example of the editor in Preview Mode for a support ticket reply.

Markdown-editor.jpg

Markdown Guide

A convenient and easily accessible Markdown Guide is provided within the product accessible via the Help icon within the editor toolbar at any time.

Markdown Output

# This is an <h1> tag

## This is an <h2> tag

###### This is an <h6> tag

This is an <h1> tag

This is an <h2> tag

This is an <h6> tag
*This text will be italic*

_This will also be italic_

**This text will be bold**

__This will also be bold__

_You **can** combine them_

This text will be italic

This will also be italic

This text will be bold

This will also be bold

You can combine them

* Item 1

* Item 2

* Item 2a

* Item 2b

  • Item 1
  • Item 2
    • Item 2a
    • Item 2b

1. Item 1

2. Item 2

3. Item 3

* Item 3a

* Item 3b

  1. Item 1
  2. Item 2
  3. Item 3
    • Item 3a
    • Item 3b

[WHMCS Marketplace](http://marketplace.whmcs.com)

WHMCS Marketplace

Header for quotes:

> This is the first line of the quote
>.
> followed by the second line.

Header for quotes:

This is the first line of the quote

followed by the second line.

I think you should add padding around the `$string` output.

I think you should add padding around the $string output.
Retrieved from "http://3.17.75.209/index.php?title=Markdown_Editor&oldid=31960"