tinyMCEの非同期によるプレビュー表示について

tinyMCEでtextareaに入力した値を、非同期で同じページに表示させたいです。
ajaxで表示させようと試しましたが、上手くいきません。
記入方法を教えていただきたいです。

javascript
1<!DOCTYPE html>
2<html>
3<head>
4	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
5	<script src="tinymce/js/tinymce/tinymce.min.js"></script>
6	<script>
7		tinymce.init({
8		mode : "specific_textareas",
9		editor_selector : "mceEditor" 
10	});
11	</script>
12	
13</head>
14<body>
15	<script>
16	$(function(){
17	$('#myTextArea').bind('keyup change', function(){
18	$('#preview_area').html($("#myTextArea").val());
19	});
20});
21	</script>
22	<h1>テキストを入力してください</h1>
23	<textarea id="myTextArea" class="mceEditor">TinyMCE Editor</textarea>
24	<div style="border:1px solid; width:200px; height:200px;" id="preview_area"></div>
25</body>
26</html>

spookybird

2018/09/25 13:22

うまくいかない、とは具体的にどうなりますか？

m.ts10806

2018/09/25 13:30

見たところ「Ajax」「非同期通信」は提示ソース内では行われていないように見受けられます。あくまで「リアルタイムプレビュー」となっていますが、どのように非同期通信を利用されたいのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

ajaxに惑わされましたが、やりたいことはこうですね。

html
1<script>
2  tinymce.init({
3    mode : "specific_textareas",
4    editor_selector : "mceEditor",
5    init_instance_callback: function (editor) {
6      editor.on('change', function (e) {
7      	$('#preview_area').html(editor.getContent());
8      });
9    }
10  });
11</script>