> For the complete documentation index, see [llms.txt](https://hencework.gitbook.io/pangong/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hencework.gitbook.io/pangong/forms/editor.md).

# Editor

## Introduction

We used [tinymce ](https://www.tiny.cloud/), the most powerful text editing platform for building content for the web..

<div align="left"><img src="https://3450431908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQEhO3LIP7yf9jj1Q3z%2F-LRmdRAR5RkRyhy2L5CN%2F-LRmeRbYWYQdUovl99VP%2FScreenshot_2018-11-21%20Protype%20I%20Editor.png?alt=media&amp;token=994f63a0-5429-4ccc-95c2-0872e3004209" alt=""></div>

## How to Setup

### **HTML Structure**

```markup
<div class="tinymce-wrap">
    <textarea class="tinymce"></textarea>
</div>
```

## Dependency

### JS

```markup
<!-- Tinymce JavaScript -->
<script src="vendors/tinymce/tinymce.min.js"></script>
```

### Initialize tinymce JS

```javascript
/*Tinymce Init*/
$(function() {
	"use strict";
	
	tinymce.init({
	  selector: '.tinymce',
	  height: 300,
	  plugins: [
		'advlist autolink lists link image charmap print preview anchor',
		'searchreplace visualblocks code fullscreen',
		'insertdatetime media table contextmenu paste code'
	  ],
	  toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
	 
	});
});

```