[Tutorial] Campo descrito como "Zona de texto" com opção de lista de imagens

Informações:
Autor: Desconhecido
Funcionalidade: Todas as versões

---

Acesse:

Painel de Controle ☛ Visualização ☛ Imagens e Cores ☛ Cores ☛ Folha de Estilo CSS

E Adicione esse código:

Código:

.imgFA {
  height: 26px;
  cursor: pointer;
  transition: 2s;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -o-transition: 2s;
  -ms-transition: 2s;
}
.imgFA:hover {
   height: 35px;
}

Depois disto, acesse:

Painel de Controle ☛ Usuarios & Grupos ☛ Perfis ☛ Campo do perfil

E Crie um novo campo dessa forma:

Tipo: Zona de texto
Quem pode modificar o valor do seu conteúdo?: O próprio usuário
Largura máxima máximo: 15000 caracteres

Feito isto, vá em seu perfil e descubra o id do campo de perfil criado para seguir o próximo passo.

Após conseguir saber o id do campo de perfil,acesse:

Painel de Controle ☛ Modulos ☛ HTML & Javascript ☛ Gestão dos códigos Javascripts

E Crie um novo javascript com esse código:

Código:

if (/\??mode=editprofile$/.test(location.search)||/\/?u(\d+)$/.test(location.pathname)) {
    var multiImage = [];
    /**** CONTEUDO EDITAVEL***/

    var idCamp = 'profile_field_2_4'; //id do campo de perfil

    //multiImage[indide_de_las_imágenes] = 'URL_IMAGEN';
    multiImage[1] = 'http://i.imgur.com/H3LuC6o.png';
    multiImage[2] = 'http://i.imgur.com/7uWDYRm.png';
    multiImage[3] = 'http://i.imgur.com/QrrqbuP.png';
    multiImage[4] = 'http://i.imgur.com/pxLa8Il.png';
    multiImage[5] = 'http://i.imgur.com/dzqg2nV.png';

    var mensaje = 'A imagem foi adicionada à listagem múltipla.';
    var mensajeBorrar = 'Conteúdo salvo';

    /*** FIM CONTEUDO EDITAVEL ***/

    $(document).ready(function() {
        if (document.getElementById(idCamp) != null) {
            var content = '';
            for (i in multiImage) {
                content += '<img src="' + multiImage[i] + '"  onclick="javascript:document.getElementById(idCamp).value +=\'[img]' + multiImage[i] + '[/img]\';alert(mensaje);" class="imgFA" />';;
            }
            $("#" + idCamp).before(content);
            var verCampo = '<div onclick="javascript:document.getElementById(idCamp).style.display = \'block\';" style="cursor:pointer;">Mostrar contenido del campo</div><div onclick="javascript:if(document.getElementById(idCamp).value!=\'\'){document.getElementById(idCamp).value=\'\';alert(mensajeBorrar);}" style="cursor:pointer"><img src="http://2img.net/i/fa/admin/icones/supprimer.png"/>Salvar</div>';
            $("#" + idCamp).after(verCampo);
            document.getElementById(idCamp).style.display = "none";
        }
    });
}

Resultado: