본문 영역

Ckeditor4

Download

Mong9 Editor for CKEditor 4.

TIP Quick Setup Guide

Download on Mong9 Editor for CKEditor 4Github.
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 Ckeditor4 usage page.

Ckeditor4 Sample

Installation Guide

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

After extracting, a folder named ckeditor4-plugin-mong9-editor will 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 /adapters, /plugins, and /vendor as shown above, you're in Ckeditor4'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="./ckeditor/plugins/mong9-editor/source/js/mong9.js"></script>

<link rel="stylesheet" href="./ckeditor/plugins/mong9-editor/source/etc/bootstrap-icons/bootstrap-icons.min.css">
<link rel="stylesheet" href="./ckeditor/plugins/mong9-editor/source/css/mong9-base.css">
<link rel="stylesheet" href="./ckeditor/plugins/mong9-editor/source/css/mong9.css">
<link rel="stylesheet" href="./ckeditor/plugins/mong9-editor/source/css/mong9-m.css" media="all and (max-width: 768px)">
<link rel="stylesheet" href="./ckeditor/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 Ckeditor4 usage page.

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

<script>

	// 1. Language selection (if needed)
	//CKEDITOR.config.language = 'ko';

	// 2. Add editor
	CKEDITOR.replace("textarea_id"); // The ID of the textarea

	// 3. Mong9Editor : Allow HTML, etc
	CKEDITOR.config.allowedContent = {
		$1: {
			// Use the ability to specify elements as an object.
			elements: CKEDITOR.dtd,
			attributes: true,
			styles: true,
			classes: true
		}
	};

	// 4. Mong9Editor : Disallow <style>, <script>, on events(onload,onmouse..)
	CKEDITOR.config.disallowedContent = 'style;script; *[on*]';

</script>

This source is added when running Ckeditor4.

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 Mong9 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.