как загрузить код с помощью codemirror

У меня есть файл PHP, который связан с codemirror, который прекрасно работает, но я хочу, чтобы каждая текстовая область загружала код из другого файла, используя PHP как index.php, main.css, main.jsи показать предварительный просмотр из всех этих файлов для объединения.

Мой вопрос заключается в том, как можно написать этот код внутри каждой текстовой области, чтобы связать другую страницу! Я пытался поставить <?php include('css/main.css'); ?> оператор внутри одной из текстовых областей для CSS и не работает.

Пожалуйста, смотрите см. Полные коды ..

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.css"> <link rel="stylesheet" href="css/style.css">

<div id="wrap">

<!-- Code Editors -->   <section id="code_editors">
<div id="html" class="code_box">
<h3>HTML</h3>
<textarea name="html"></textarea>
</div>

<div id="css" class="code_box">
<h3>CSS</h3>
<textarea name="css"></textarea>
</div>

<div id="js" class="code_box">
<h3>JavaScript</h3>
<textarea name="js"></textarea>
</div>

</section>

<!-- Sandboxing -->   <section id="output">
<iframe></iframe>   </section>    </div>

<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.js"></script>
<!-- For HTML/XML --> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/xml/xml.js">/script><script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/htmlmixed/htmlmixed.js"></script>
<!-- For CSS --> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/mode/css/css.js"></script>
<!-- For JS --> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/javascript/javascript.js"></script> <script src="js/js.js"></script>

Большое спасибо.