Programando PHP: CKEditor

Mostrando entradas con la etiqueta CKEditor. Mostrar todas las entradas

CKEditor: Especificar el width y el height del textarea


var editor = CKEDITOR.replace('entradilla',

      {

        width: "500px",

        height: "250px"



        });

CKEditor: elfinder

a) Descargar ckeditor
b) Descargar elfinder
modificar js/elfinder/elfinder.html:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>elFinder 2.0</title>

        <!-- jQuery and jQuery UI (REQUIRED) -->
        <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

        <!-- elFinder CSS (REQUIRED) -->
        <link rel="stylesheet" type="text/css" href="css/elfinder.min.css">
        <link rel="stylesheet" type="text/css" href="css/theme.css">

        <!-- elFinder JS (REQUIRED) -->
        <script src="js/elfinder.min.js"></script>

        <!-- elFinder translation (OPTIONAL) -->
        <script src="js/i18n/elfinder.es.js"></script>

        <!-- elFinder initialization (REQUIRED) -->
        <script type="text/javascript" charset="utf-8">
            function getUrlParam(paramName) {
                var reParam = new RegExp('(?:[\?&]|&amp;)' + paramName + '=([^&]+)', 'i') ;
                var match = window.location.search.match(reParam) ;
                
                return (match && match.length > 1) ? match[1] : '' ;
            }
                
            $().ready(function() {
                var funcNum = getUrlParam('CKEditorFuncNum');
                var mode = getUrlParam('mode');

                var elf = $('#elfinder').elfinder({
                    url : 'php/connector.php?mode=' + mode,  // connector URL (REQUIRED)
                    getFileCallback : function(file) {
                        // window.opener.CKEDITOR.tools.callFunction(funcNum, file);
                        window.opener.CKEDITOR.tools.callFunction(funcNum, "js/elfinder/files/"+file.name);
                        window.close();
                    },
                    resizable: false
                }).elfinder('instance');
            });
            
            
        </script>
    </head>
    <body>

        <!-- Element where elFinder will be created (REQUIRED) -->
        <div id="elfinder"></div>

    </body>
</html>

Modificar js/elfinder/php/connector.php:


<?php

error_reporting(0); // Set E_ALL for debuging

include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderConnector.class.php';
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinder.class.php';
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeDriver.class.php';
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeLocalFileSystem.class.php';
// Required for MySQL storage connector
// include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeMySQL.class.php';
// Required for FTP connector support
// include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeFTP.class.php';


/**
 * Simple function to demonstrate how to control file access using "accessControl" callback.
 * This method will disable accessing files/folders starting from  '.' (dot)
 *
 * @param  string  $attr  attribute name (read|write|locked|hidden)
 * @param  string  $path  file path relative to volume root directory started with directory separator
 * @return bool|null
 **/
function access($attr, $path, $data, $volume) {
    return strpos(basename($path), '.') === 0       // if file/folder begins with '.' (dot)
        ? !($attr == 'read' || $attr == 'write')    // set read+write to false, other (locked+hidden) set to true
        :  null;                                    // else elFinder decide it itself
}

$opts = array(
    // 'debug' => true,
    'roots' => array(
            array(
                'driver'        => 'LocalFileSystem',   // driver for accessing file system (REQUIRED)
                'path'          => '../files/',         // path to files (REQUIRED)
                'URL'           => dirname($_SERVER['PHP_SELF']) . '/../files/', // URL to files (REQUIRED)
                'accessControl' => 'access',           // disable and hide dot starting files (OPTIONAL)
                'attributes' => array(
                    array(
                        // 'pattern' => '/GALERIAS/', 
                        'read'    => true,
                        'write'   => false,
                        'locked'  => true
                    )
                )
            )
    )
);

$connector = new elFinderConnector(new elFinder($opts));
$connector->run();

El fichero que queremos usarlo (ej: mod_noticia.php):


CKEDITOR.replace( 'texto', {
        filebrowserBrowseUrl : 'js/elfinder/elfinder.html', // eg. 'includes/elFinder/elfinder.html'
        uiColor : '#9AB8F3'
    });

CKEditor: Operaciones

<textarea class="ckeditor" id="editor1" name="editor1"></textarea>

// ******* Obtener el valor que haya en el textarea ****


<script> 

valor = CKEDITOR.instances.editor1.getData();

</script>

// ******* Poner un valor que haya en el textarea *****


CKEDITOR.on("instanceReady", function(event) { // se ha cargado ya el CKEditor

            CKEDITOR.instances["editor1"].setData('hola mundo');

 });

CKEditor: Instalar el CkFinder en CkEditor

Descargar el CkEditor
Descargar el CkFinder

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/ckfinder/ckfinder.js"></script>
<script type="text/javascript" src="js/ckscript.js"></script>

<textarea class="ckeditor" name="mi_nombre" cols="79" rows="15"></textarea>
</body>
</html>

------------------------------------------------------
ckscript.js:
$(document).ready(function(){
    var editor = CKEDITOR.replace('editor1', {language: 'es'});
    CKFinder.setupCKEditor( editor, 'js/ckfinder/' ) ;
    var editor = CKEDITOR.replace('texto_mod', {language: 'es'});
    CKFinder.setupCKEditor( editor, 'js/ckfinder/' ) ;
})
------------------------------------------
Modificar ckfinder/config.php:
function CheckAuthentication() {
    return true;
}

$baseUrl = '/ckfinder/userfiles/';

Más información en:

http://www.seterwebdesign.com/node/50

http://stringinarray.wordpress.com/2011/08/08/integrar-ckeditor-y-ckfinder/

CKEditor: Añadir fuentes de google fonts a CKEditor

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>

<div id="editable" contenteditable="true">
Aqui el texto a modificar
</div>
<input type="button" value="pulsa" id="editor">

<script type="text/javascript">
$(document).ready(function(){
CKEDITOR.disableAutoInline = true;

// var editor = CKEDITOR.inline($("#editable")[0]);
$("#editor").on("click",function() {
CKEDITOR.inline($("#editable")[0]);
});

myFonts = ['Aclonica', 'Abel']; // añado las google fonts que se quiera usar
CKEDITOR.config.font_names = 'serif;sans serif;monospace;cursive;fantasy';

for(var i = 0; i<myFonts.length; i++){
CKEDITOR.config.font_names = CKEDITOR.config.font_names+';'+myFonts[i];
myFonts[i] = 'http://fonts.googleapis.com/css?family='+myFonts[i].replace(' ','+');
// alert(myFonts[i]);
$("head").append("<link rel='stylesheet' href='"+ myFonts[i] +"'>");
}
CKEDITOR.config.contentsCss = ['/ckeditor/contents.css'].concat(myFonts);
});
</script>
</body>
</html>

CKEditor: Añadir un CKEditor inline

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>

<div id="editable" contenteditable="true">
<textarea class="ckeditor" name="editor1">Aquí el texto a modificar</textarea>
</div>

<script>
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline(document.getElementById('editable'));
</script>
</body>
</html>

CKEditor: Como usarlo en PHP

ccc