Skip to content

Instantly share code, notes, and snippets.

@mtvbrianking
Created September 29, 2016 11:36
Show Gist options
  • Save mtvbrianking/d128791f734b0e747d26768534c0a648 to your computer and use it in GitHub Desktop.
Save mtvbrianking/d128791f734b0e747d26768534c0a648 to your computer and use it in GitHub Desktop.
Dynamically add and remove Tinymce 4.x
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamically add and remove Tinymce 4</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css" media="all">
</head>
<body>
<div class="container">
<div class="col-sm-12">
<h1>Example: dynamically add and remove Tinymce 4</h1>
<textarea id="readme-id" class="readme-class" cols="100" rows="10">Duis rutrum, magna non lacinia tincidunt, risus lacus tempus ipsum, sit amet euismod justo metus ut metus. Donec feugiat urna non leo laoreet in tincidunt lectus gravida.</textarea>
<a href="#" id="toogle_editor" class="btn btn-sm btn-default col-md-offset-3 col-md-4"
style="font-size: 14px; font-weight: 700;">Toogle Editor</a><br/>
</div>
</div>
</body>
<script type="text/javascript" charset="utf8" src="jquery.min.js"></script>
<script src="tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
$(document ).ready(function() {
function applyMCE() {
tinyMCE.init({
mode : "none", // initialises for no dom element
//mode : "textareas", initialises for textareas
editor_selector : "readme-class"
});
}
function AddRemoveTinyMce(editorId) {
if(tinyMCE.get(editorId))
{
tinyMCE.EditorManager.execCommand('mceFocus', false, editorId);
tinyMCE.EditorManager.execCommand('mceRemoveEditor', true, editorId);
} else {
tinymce.EditorManager.execCommand('mceAddEditor', false, editorId);
}
}
//applyMCE();
$('a#toogle_editor').on('click', function(e) {
AddRemoveTinyMce('readme-id');
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment