Preciso colocar um textarea
onde a pessoa consiga editar o texto. Ex: escolher o tamanho da fonte, aplicar negrito, alterar a cor do texto, adicionar fotos junto com o texto (um parágrafo, 1 foto, mais um parágrafo, 2 fotos). Alguém pode me ajudar a ter uma luz de como começar a fazer?
-
1Existem diversos plugins pra isso, um deles é o CKEditor.– SamCommented 5/10/2017 às 23:10
-
Existem várias alternativas para isso. Já existe muita coisa pronta para uso e grautuita, basta procurar por: "WYSIWYG textarea editor". Para começar sugiro este plugin baseado em bootstrap: github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg Outras opções podem ser encontradas aqui: sitepoint.com/10-best-html-wysiwyg-plugins– Caiuby FreitasCommented 5/10/2017 às 23:13
Adicione um comentário
|
1 Resposta
A maneira mais facil de criar este tipo de text area é utilizando uma biblioteca, eu aconselharia utilizar o jquery
JQUERY
O jQuery é uma biblioteca de Javascript “leve”, fácil de utilizar no sentido “escrever menos, fazer mais”. Esta biblioteca foi desenvolvida por John Resig, um programador de Javascript. O site oficial do JQuery fica em www.jQuery.com
Resolvendo Problema
Dito isso, você precisará incluir a biblioteca:
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
Depois Crie o javascript responsavel por criar a o painel de edição:
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); // convert all text areas to rich text editor on that page
bkLib.onDomLoaded(function() {
new nicEditor().panelInstance('area1');
}); // convert text area with id area1 to rich text editor.
bkLib.onDomLoaded(function() {
new nicEditor({fullPanel : true}).panelInstance('area2');
}); // convert text area with id area2 to rich text editor with full panel.
</script>
Depois crie seu html:
<html>
<head>
<title>How to Create textarea into a rich content/text editor using jQuery</title>
<script type="text/javascript" src="nicEdit-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() {
new nicEditor({maxHeight : 200}).panelInstance('area');
new nicEditor({fullPanel : true,maxHeight : 200}).panelInstance('area1');
});
//]]>
</script>
</head>
<body>
<h4>How to Create textarea into a rich content/text editor using jQuery</h4>
<div id="sample">
<h4>Simple textarea</h4>
<textarea name="area" id="area" style="width:70%;height:200px;">
Some Initial Content was in this textarea
</textarea>
<h4>textarea with complete panel</h4>
<textarea name="area1" id="area1" style="width:70%;height:200px;">
Some Initial Content was in this textarea
</textarea>
</div>
</body>
</html>
Isso funcionará e criará seu painel de edição
-
2Acho interessante adicionar na sua resposta o link para a biblioteca que permite essas customizações, a NiceEdit Commented 6/10/2017 às 12:53
-
Não coloquei o link, pois ele pode quebrar e ela pode achar outra solução semelhante. Commented 6/10/2017 às 12:55