2015-06-18 2 views
0

Я хочу загрузить редактор codemirror js в iframe, чтобы избежать переопределения стилей. Я прочитал документ https://codemirror.net/doc/manual.html#config, но это не ясно. Вот что я пробовал.Как загрузить редактор js-редактора codemirror в iframe?

HTML

<iframe id="code"></iframe> 

Js

var codemirror = CodeMirror(document.getElementById("code").contentWindow.document.body, { 
        mode: "javascript", 
        theme: "monokai" 
    }); 

Как я могу загрузить CodeMirror редактор в расслоение плотной в IFRAME?

+0

является код инициализации внутри обработчика событий нагрузки? Где codemirror.js? Что относительно таблицы стилей, это внутри iframe? 'не работает' не является правильной постановкой задачи – charlietfl

+0

@charlietfl codemirror.js и таблицы стилей включены в документ' parent'. – kannanrbk

+0

Таблица стилей должна быть добавлена ​​внутри iframe, и вам нужно убедиться, что iframe загрузился, прежде чем пытаться манипулировать ею. – charlietfl

ответ

0

Место под кодом в вашей разметке html.

<iframe src="https://codemirror.net/doc/manual.html#config"></iframe> 
+0

Прошу прощения, я считаю, что мой вопрос непонятен для вас. Я хочу использовать редактор codemirror js на моей веб-странице. – kannanrbk

0

Если вы хотите иметь CodeMirror в iframe, вам понадобятся два разных html-файла. См. Очень простой пример ниже. Пожалуйста, будьте немного более конкретными для дальнейших требований.

iframe.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <link rel=stylesheet href="http://codemirror.net/doc/docs.css"> 
    <link rel=stylesheet href="http://codemirror.net/lib/codemirror.css"> 
    <script src=http://codemirror.net/lib/codemirror.js></script> 
    <script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script> 
    <style type=text/css> 
     .CodeMirror {float: left; width: 100%; height: 100%; } 
    </style> 
</head> 
<body> 
    <div> 
    <textarea id=content name="content"></textarea> 
    </div> 
    <script> 
     var editor = CodeMirror.fromTextArea(document.getElementById('content'), { 
     mode: 'application/x-httpd-php', 
     lineNumbers: true 
     }); 
    </script> 
    </body> 
</html> 

main.html

<!DOCTYPE html> 
<html> 
<body> 
    <iframe src="iframe.html"></iframe> 
</body> 
</html> 
Смежные вопросы