crear_plugin_para_tinymce_4

Creación de plugins en TinyMCE es bastante simple este tutorial intenta delinear algunos de los conceptos básicos de la creación de un plugin. Para más detalles consulte la documentación de la API y comprobar los plugins existentes que enviamos con el núcleo.

Estructura de archivos

Para crear un plugin que necesita para crear un directorio en el directorio de plugins TinyMCE. TinyMCE cargará el archivo plugin.js si utiliza el archivo tinymce.js en su página. Si utiliza el archivo de tinymce.min.js va a cargar el archivo plugin.min.js. Se recomienda utilizar el archivo tinymce.js mientras desarrolla luego tener un script de construcción minifying los plugin.js en plugin.min.js para su uso en producción.

Los scripts de creación que viene con el paquete dev de TinyMCE construirán de forma automática todos los plugins incluidos sus más personalizados.

Ejemplo de la estructura de archivo plugin

/tinymce/plugins/example/plugin.js
/tinymce/plugins/example/plugin.min.js

Este nuevo plugin de ejemplo ahora se puede cargar mediante la opción plugins tinymce.init.

tinymce.init({
    selector: 'textarea',
    plugins: 'example'
});

Usted también puede tener el plugin en cualquier lugar que desee cargar los plugin.js / plugin.min.js archivos directrly después de los tinymce.js / tinymce.min.js.

Ejemplo de cargar el complemento de otra url

<script  src = "/tinymce/js/tinymce.min.js" ></script> 
<script  src = "/scripts/my.tinymce.plugin.js" ></script> 
<script> 
tinymce . init ({..}); 
</script>

Ejemplo Plugin

He aquí un ejemplo el plugin que muestra cómo agregar un botón de barra de herramientas y menú sencillo. El botón abre un cuadro de diálogo que le permite escribir en un título que se inserta en el editor. El elemento de menú se abrirá el sitio tinymce en un diálogo.

tinymce. PluginManager. añadir ("ejemplo",  función (editor, url)  {// Añadir un botón que abre una ventana de 
    
    editor. addButton ('ejemplo',  
        {texto:  'botón de Mi', 
        icono:  falsa, 
        onclick:  función ( )  {// ventana Abrir 
            
            editor. WindowManager. abierta 
                ({titulo:  'Ejemplo Plugin ", 
                cuerpo:  
                     [{tipo:' cuadro de texto ',  nombre:' título ', la etiqueta:"  Título 
                "}], 
                onsubmit:  función (e)  {// Insertar contenido cuando la forma de la ventana se presenta 
                    
                    editor. insertContent ('Título:'  + e. de datos. 
                
            
        
    título);}});}}); 

    // Añade un elemento de menú para el menú de herramientas 
    Editor. addMenuItem (' ejemplo ',  
         {texto:' Ejemplo Plugin ", 
        el contexto:"  herramientas ", 
        onclick:  la función ()  {// Ventana abierta con una específica url 
            
            editor. WindowManager. abierta 
                ({titulo:  'TinyMCE site' , 
                url :  'http://www.tinymce.com' , 
                width :  800 , 
                height :  600 , 
                buttons :  [{ 
                    text :  'Close' , 
                    onclick :  'close' 
                }] 
            }); 
        } 
    }); 
});

Ejemplo init

Aquí hay un ejemplo de cómo utilizar el nuevo botón de la barra de herramientas.

tinymce. init 
    ({selector:  'textarea', 
    plugins:  'ejemplo', 
    la barra de herramientas:  
'ejemplo'});

Internacionalización

Si usted quiere tener traducciones personalizadas para su plugin es necesario crear un directorio "langs" en tu directorio de plugins. TinyMCE entonces intentará cargar archivos de idioma basado en el núcleo idioma especificado, por ejemplo, si el idioma es "sv_SE" intentará cargar "<su plugin> /langs/sv_SE.js".

Este archivo es similar a archivos .po que tiene la cadena de Inglés en el lado izquierdo y la cadena traducida en el lado derecho.

Ejemplo de una traducción al sueco por el título de diálogo

tinymce. addI18n ('sv_SE',  {"Ejemplo 
    plug-in":  "Exempel 
Plugin"});

Algunas veces usted no tiene todas las traducciones que el paquete TinyMCE completo tiene esto daría lugar a un error 404 mientras se carga el archivo no existente. Esto puede evitarse mediante la adición de esta línea a la parte superior de su archivo plugin.

Traducido de TinyMCE