Exibir dados de entrada FCKeditor em formato HTML na mesma página, como tipos de usuário?

StackOverflow https://stackoverflow.com/questions/830579

  •  06-07-2019
  •  | 
  •  

Pergunta

Atualmente, estou brincando com o FCKEditor, e eu estou tentando replicar como shows de estouro de pilha exatamente como o seu post vai olhar em HTML enquanto você digita-lo. Meu FCKEditor cria muito bem, eu só não sei como proceder para acessar os dados do editor, uma vez que é criado. O que eu quero fazer é obter o html do editor e, em seguida, colocá-lo na <p id="inputText"></p>. Tentando acessá-lo com jQuery usando $ ( "# fckEdtr") não funciona, o que eu espero é porque ele é criado na mosca com javascript. Estou ciente do método IsDirty () no FCKeditor JavaScript API, eu não vi nenhum exemplos concretos de como obter a instância atual do editor e use o método. Alguém pode ajudar? Meu código está abaixo: 

<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>
Foi útil?

Solução

Eu só encontrei a resposta para isso em outra pergunta sobre SO:

Como posso permitir visualização ao vivo para FCKeditor em um site ASP.Net?

Além disso, quando eu uso um elemento div em vez de um elemento de parágrafo, ele funciona. Aqui está o meu código de trabalho final para qualquer um que poderia ajudar: 

<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>

Outras dicas

É bom que você encontrou a resposta já, mas eu me pergunto por que você precisa visualizar a janela quando você está lidando com o editor WYSIWYG. Meu palpite é que o olhar que você está recebendo no editor é diferente do olhar resultante porque de CSS aplicado a este último. Se eu estiver errado, desconsiderar os conselhos que se segue.

Se isto é o caso, você pode pensar de copiar partes mais relevantes do seu CSS para \ fckeditor \ editor \ css \ fck_editorarea.css de modo que eles são aplicados na janela do editor. Claro que, às vezes você quer a diferença. Por exemplo, spoilers deve ser escondido quando publicadas, mas visível no editor.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top