본문 영역

TinyMce4

Download

Mong9 Editor for TinyMce.

TIP Quick Setup Guide

Download on Mong9 Editor for TinyMce Github.
Upload the mong9-editor folder to the ~/plugins folder.
Copy and paste the required JavaScript and stylesheet between <head> and </head>.
Modify the JavaScript code on the TinyMceusage page.

TinyMce4 Sample

Installation Guide

1. Download the Mong9 Editor plugin file, and extract it on your computer.

After extracting, a folder named tinymce4-plugin-mong9-editorwill be created.
Rename the folder to mong9-editor

2. Connect to the server using an FTP client or other file transfer method.

If you see folders like /langs, /plugins, /utils as shown above, you're in TinyMce4's top (root) directory.
Finding this top directory is important

3. Upload the `mong9-editor` folder to `/plugins` folder.

Mong9 Editor is a plugin, so upload it in the /plugins folder.
Place the mong9-editor folder inside /plugins folder, like in the image above.

4. Insert necessary JavaScript and stylesheets between <head>~</head>.

<script>
if (!M9_SET) { var M9_SET = {}; }
M9_SET['mong9_editor_use'] = '1'; // Using Mont9 Editor
M9_SET['mong9_url'] = '[DOMAIN]/tinymce/plugins/mong9-editor/'; // Mont9 Editor URL
M9_SET["google_token"] = "AIzaSyAMdgTVhn64xo2Tpf0ewdtR055w68hAHOs"; // Google Maps Token (Required for Google Maps usage)
</script>

<script src="./tinymce/plugins/mong9-editor/source/js/mong9.js"></script>

<link rel="stylesheet" href="./tinymce/plugins/mong9-editor/source/etc/bootstrap-icons/bootstrap-icons.min.css">
<link rel="stylesheet" href="./tinymce/plugins/mong9-editor/source/css/mong9-base.css">
<link rel="stylesheet" href="./tinymce/plugins/mong9-editor/source/css/mong9.css">
<link rel="stylesheet" href="./tinymce/plugins/mong9-editor/source/css/mong9-m.css" media="all and (max-width: 768px)">
<link rel="stylesheet" href="./tinymce/plugins/mong9-editor/source/css/mong9-e.css" media="all and (max-width: 576px)">

The code above is the files needed for the document created by Mong9 Editor. Insert it on every page of your homepage.
Please modify the M9_SET['mong9_url'] variable to suit your site.

5. Modify the JavaScript code on the TinyMce4 usage page.

<!-- Source code to insert on the editor page -->
<script src="./tinymce/tinymce.min.js"></script>
<script src="./tinymce/plugins/mong9-editor/source/js/mong9-connect.js"></script>

<script>

	tinymce.init({
		selector:'#textarea_id',
		language : 'ko_KR',
	});

	// Insert Mont9 Editor buttons
	mong9_btn_attach(['tinymce4']);

</script>

This source is added when running TinyMce.

Caution

Changing font color, font size, etc. means modifying HTML and CSS.
web editors make you crate document easily, but they also allow code changes, which could lead to security risks.
It is possible to intentionally insert malicious code and malicious links.
To prevent this, limit usage to trusted individuals, like administrators

When printing documents created with Mong9 Editor,Use the `Mong9_Html_Convert()`

<?php

	$html = 'Web documents saved with Mont9 Editor';
	require_once('[DOMAIN]/ckeditor/plugins/mong9-editor/includes/functions/content-filter.php');
	$html = Mong9_Html_Convert($html);
	//$html = '<div class="m9-content">Web documents saved with Mont9 Editor</div>'; // Format returned

?>

content-filter.php filters the main content.
Mong9_Html_Convert() function uses the HTMLPurifier PHP library filter.
This library helps remove malicious code.