Aceエディターでの実行結果を、ブラウザに表示できません。

実現したいこと

Aceエディターの実行結果を、
同じブラウザに表示したいんですけども、
どなたかやり方を教えてくれませんか...？

イメージとしては、
画面左側の余白に「Ｈｅｌｌｏ」と
表示したいです。

発生している問題・エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Ace Editor sample</title>
  <link rel="stylesheet" href="index2.css">
</head>
<body>
  <div class="size" id="editor" style="height: 300px"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script>

  <script>
    var editor = ace.edit("editor");
    editor.$blockScrolling = Infinity;
    editor.setOptions({
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true
    });
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
  </script>
</body>
</html>

以下CSSです
.size{
  width: 300px;
}

int32_t

2022/05/17 05:00

> Aceエディターの実行結果をエディタで編集しているテキストをJavaScriptとして実行したその結果、という解釈でいいでしょうか? 編集しているテキストをJavaScriptとして実行する方法はわかりますか？

motii

2022/05/17 05:54

Q.エディタで編集しているテキストをJavaScriptとして実行したその結果、という解釈でいいでしょうか? A.はい。黒い部分に打ち込んだコードをJSで実行したいです Q.編集しているテキストをJavaScriptとして実行する方法はわかりますか？ A.わからないです。　言語問わず実行の方法がわからない状態です。

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

回答1件

3つほどやることがあると思います。

エディタから編集中のテキストを取得する
https://ace.c9.io/#nav=howto を参照。
そのテキストをコードとして実行する
eval() か、document.createElement('script') などで実行します。セキュリティ上あぶなっかしいので、他人にはこのページを触らせない前提が必要です。誰でも使えるようにするには別の方法が必要です。
console.log() がページ上に出るように工夫する
前ステップを実行する間は console.log() を差し替えます。