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

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

0 голосов
/ 06 мая 2009

В настоящее время я играю с 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 ]

1 голос
/ 08 мая 2009

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

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

1 голос
/ 06 мая 2009

Я только что нашел ответ на этот вопрос в другом вопросе о 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>
...