Отображать входные данные FCKeditor в формате HTML на той же странице, что и пользовательские типы?

В настоящее время я играю с FCKEditor и пытаюсь повторить, как переполнение стека показывает, как именно ваш пост будет выглядеть в HTML при вводе. Мой FCKEditor прекрасно работает, я просто не знаю, как получить доступ к данным редактора после его создания. Что я хочу сделать, это получить HTML-код из редактора, а затем положить его в <p id="inputText"></p>, Попытка получить к нему доступ с помощью jQuery с использованием $("#fckEdtr") не работает, и я ожидаю, потому что он создан на лету с помощью javascript. Мне известен метод IsDirty() в JavaScript API FCKeditor, я просто не видел убедительных примеров того, как получить текущий экземпляр редактора и использовать метод. Кто-нибудь может помочь? Мой код ниже:

<html>
<head>
<title>FCKeditor Test</title>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
    $(document).ready(function() {
          ...code to output editor data as user types
    }); 
</script>
</head>
<body>
<form>
<script type="text/javascript">
    var oFCKeditor = new FCKeditor('fckEdtr');
    oFCKeditor.BasePath = "./fckeditor/";
    oFCKeditor.ToolbarSet = 'Default';
    oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<p id="inputText">
</p>
</form>
</body>
</html>
Источник

2 ответа

Решение

Я только что нашел ответ на этот вопрос в другом вопросе о SO:

Как я могу включить предварительный просмотр FCKeditor на сайте ASP.Net?

Кроме того, когда я использую элемент div вместо элемента абзаца, это работает. Вот мой последний рабочий код для тех, кто может помочь:

<html>
<head>
<title>FCKeditor - Sample</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">         
    function FCKeditor_OnComplete( oFCKeditor )
    {  
         oFCKeditor.Events.AttachEvent( 'OnSelectionChange', function() {        
              document.getElementById("postText").innerHTML = 
                    oFCKeditor.GetHTML(true); 
         }) ;
    }
</script>
</head>
<body>
<form method="post" action="process.php">
<script type="text/javascript">
    var oFCKeditor = new FCKeditor('fckEdtr');
    oFCKeditor.BasePath = "./fckeditor/";
    oFCKeditor.ToolbarSet = 'Custom' ;
    oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<div id="postText">
</div>
</form>
</body>
</html>
Источник

Хорошо, что вы уже нашли ответ, но мне интересно, зачем вам окно предварительного просмотра, когда вы имеете дело с редактором WYSIWYG. Я предполагаю, что внешний вид, который вы получаете в редакторе, отличается от получаемого в результате из-за CSS, примененного к последнему. Если я не прав, не обращайте внимания на следующий совет.

В этом случае вы можете скопировать наиболее релевантные части вашего CSS в \fckeditor\editor\css\fck_editorarea.css, чтобы они были применены в окне редактора. Конечно, иногда вы хотите разницу. Например, спойлеры должны быть скрыты при публикации, но видимы в редакторе.

Источник
Другие вопросы по тегам