TinyMCE v.3.4.2 ImageManager customizado

Geral, Javascript, Jquery | 18 May 2011

Tchê!!
eai rapeize, é o seguinte. utilizar o TinyMCE – Javascript WYSIWYG Editor é mó facíl,o ruim é customizar a parada.
bem pra resolver o problema de adicionar imagem no editor é simples.
vamos começar do início.
para adicionar uma imagem, veja a imagem abaixo para identificar os botões corretos.

vamos criar a página que irá conter o editor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<html>
<header>
<title>Implementado</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./tinymce/jscripts/tiny_mce/tiny_mce_src.js"></script>

<script type="text/javascript">

function fileBrowser(field_name, url, type, win) {
browserField = field_name;
browserWin = win;
window.open('http://localhost/listar_imagens.html' , 'browserWindow' , 'modal,width=600,height=400,scrollbars=yes');
}

$(function() {
tinyMCE.init({
relative_urls : false,
mode : "textareas",
theme : "advanced",
editor_selector :"mceEditor",
file_browser_callback : "fileBrowser"
});
})
</script>
</header>
<body>
<form method="post" action="">
<textarea name="content" style="width:100%" class="mceEditor"></textarea>
</form>
</body>
</html>

agora criar a pagina que irá listar as imagens
– listar_imagens.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<html>
<header>
<title>Implementado</title>
<script type="text/javascript">
function selecionarImagem(imagem) {
if (imagem == '') return false;
url = 'http://localhost/' + imagem;
field = window.top.opener.browserWin.document.forms[0].elements[window.top.opener.browserField];
field.value = url;
if (field.onchange != null) field.onchange();
window.top.close();
window.top.opener.browserWin.focus();
return false;
}
</script>
</header>
<body>
<table>
<tr>
<td>Imagem</td>
<td>Ação</td>
</tr>

<tr>
<td><img src="imagens/imagem.jpg"/></td>
<td><a href="javascript:;" onclick="selecionarImagem('imagem.jpg');return false;">Selecionar</a>
</tr>

</table>
</body>
</html>

simples não?
Comenta ai!!
Há Braços…..

Jquery problemas com $.load() + Internet Explorer Opá! essa feature do IE é incrível e penosa, pois...
Como implementar comet com php Buenas!!! hj vou falar sobre Comet (ajax reverse,Ajax Push,comet ou...

Related posts plugin by:Related posts plugin

Start earning money online in one hour visit:Ways to make money.

Tags: Adicioanr Imagem, ImageManager, TinyMCE

About the Author: Garcia

Meu nome é Luan Garcia. Trabalho desde 2008 como desenvolvedor, atuando nas áreas de modelagem, analise e integrações de e-commerces. Trabalho atualmente na empresa Reweb com desenvolvimento de produto e integrações. Fascinado por internet e soluções, criei este blog para compartilhar um pouco de conhecimente e receber sugestões sobre as soluções postadas aqui. Buenas...