KCFinder do TinyMce

KCFinder do TinyMce

adimoo

2013-03-01 15:48

Witam,

mała sugestia do wstawiania zdjęć w treść - umożliwia to darmowy dodatek KCFinder do np. TinyMCE. U mnie instaluję do 5.2 ale i przy 4.x i 6.x nie powinno być problemów.

Instalacja jest bardzo prosta (choć nastręczyła mi problemów trochę ;)), wrzucam tutaj 'swoją' wersję, edycja poszczególnych toolbarów na stronie Tiny MCE.

Ściągamy paczkę :
https://dl.dropbox.com/u/88205084/Adi/web/tinymce.7z

rozpakowujemy i wgrywamy całość (podmieniamy) z :

plugins/tinymce

następnie otwieramy pliczek:

templates/admin/edit.tpl

i podmieniamy :



<!-- BEGIN TINY_HEAD -->
<script language="javascript" type="text/javascript" src="$config[dir_plugins]tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        theme : "advanced",
        mode : "exact",
    entity_encoding : "raw",
        elements : "sDescriptionShort,sDescriptionFull,sContent",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,|,undo,redo",
        theme_advanced_buttons2 : "link,unlink,anchor,cleanup,help,code,hr,removeformat,visualaid,|,charmap",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        debug : false
    });
</script>
<!-- END TINY_HEAD -->

na następujący kod :



<!-- BEGIN TINY_HEAD -->
<script language="javascript" type="text/javascript" src="$config[dir_plugins]tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        file_browser_callback: 'openKCFinder',
        // General options
        theme : "advanced",
        language : "pl",
        mode : "exact",
        entity_encoding : "raw",
        elements : "sDescriptionShort,sDescriptionFull,sContent",
        theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,charmap,emotions,iespell,media,advhr,|,formatselect,fontselect,fontsizeselect,|,cut,copy,paste,pastetext",
        theme_advanced_buttons2 : "search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,code,|,forecolor,backcolor,|,hr,removeformat,visualaid,|,sub,sup,|,image, help,insertfile,insertimage",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        debug : false
        
    });
    
function openKCFinder(field_name, url, type, win) {
    tinyMCE.activeEditor.windowManager.open({
        file: '../../../kcfinder/browse.php?opener=tinymce&type=' + type,
        title: 'KCFinder',
        width: 700,
        height: 500,
        resizable: "yes",
        inline: true,
        close_previous: "no",
        popup_css: false
    }, {
        window: win,
        input: field_name
    });
    return false;
}

</script>
<!-- END TINY_HEAD -->

Jedyne co musimy zrobić to wskazać ścieżkę gdzie KCFinder ma utworzyć folder do upload'u zdjeć/plików. Można to zrobić w :

plugins/tinymce/jscripts/kcfinder/config.php w linijce :

'uploadURL' => "TwojaŚcieżka",

UWAGA : MOŻE NIE DZIAŁAĆ jeżeli nie macie podpiętego 'serwera' tj. nie działacie z adresu np. www.strona.com, a z jakiegoś miejsca np. www.sciezka.pl/cos/tam/cos/tam

Wtedy potrzeba się namęczyć ze ścieżką dostępu by "upload" wylądował tam gdzie chcecie. Oczywiście przy odrobinie pomysłu można to skierować na np. folder 'files' i mieć dostęp do wszystkich wgranych na serwer zdjęć.

Wrzucanie zdjęć uruchamiamy poprzez "image" z paska -> i 'drzewo folderów' koło nazwy pliku (foto).

https://dl.dropbox.com/u/88205084/Adi/web/kcfinder.jpg

» Quick.Cart v5.x

VRT

adimoo

2013-03-01 16:39

Ok, jeszcze raz - zrobiłem wersję z Pluginami i podpięciem pod FILES - powiedzmy to 'Advanced' ;)

Ściągamy paczkę :

https://dl.dropbox.com/u/88205084/Adi/web/tinymce_adv.7z

rozpakowujemy i wgrywamy całość (podmieniamy) z :



plugins/tinymce

w pliku



templates/admin/edit.tpl

zamieniamy kod :



<!-- BEGIN TINY_HEAD -->
<script language="javascript" type="text/javascript" src="$config[dir_plugins]tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        theme : "advanced",
        mode : "exact",
    entity_encoding : "raw",
        elements : "sDescriptionShort,sDescriptionFull,sContent",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,|,undo,redo",
        theme_advanced_buttons2 : "link,unlink,anchor,cleanup,help,code,hr,removeformat,visualaid,|,charmap",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        debug : false
    });
</script>
<!-- END TINY_HEAD -->

na następujący (znacznie więcej pluginów, resize wgranych zdjęć etc.)



<!-- BEGIN TINY_HEAD -->
<script language="javascript" type="text/javascript" src="$config[dir_plugins]tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        file_browser_callback: 'openKCFinder',
        // General options
        mode : "exact",
        elements : "sDescriptionShort,sDescriptionFull,sContent",
        theme : "advanced",
        language : "pl",
        entity_encoding : "raw",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
        
        theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,charmap,emotions,iespell,media,advhr,|,formatselect,fontselect,fontsizeselect,|,cut,copy,paste,pastetext",
        theme_advanced_buttons2 : "search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,code,|,forecolor,backcolor,|,hr,removeformat,visualaid,|,sub,sup,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,image, help,insertfile,insertimage",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
 
        
    });
    
function openKCFinder(field_name, url, type, win) {
    tinyMCE.activeEditor.windowManager.open({
        file: 'plugins/tinymce/jscripts/kcfinder/browse.php?opener=tinymce&type=' + type,
        title: 'KCFinder',
        width: 700,
        height: 500,
        resizable: "yes",
        inline: true,
        close_previous: "no",
        popup_css: false
    }, {
        window: win,
        input: field_name
    });
    return false;
}

</script>
<!-- END TINY_HEAD -->

NASTĘPNIE W



database/config/general.php

zamieniany folder do którego system ładuje pliki z :



$config['dir_files'] = 'files/';



$config['dir_files'] = 'files/image/';

Wszelkie pliki z folderu "FILES" należy przekopiować (razem z folderami miniatur) do "FILES/IMAGE/"

I mamy możliwość podpinania w treść wszelkich wgranych zdjęć.