alternatives - ckeditor laravel

Botón de complementos personalizados de CKEditor

Question

He escrito un complemento personalizado para CKEditor: exitoso en todos los frentes, salvo uno actualmente: no puedo, por mi vida, descubrir cómo personalizar la imagen en el botón en la barra de herramientas del editor. Como soy un nuevo usuario, tendrás que hacer clic para ver la imagen adjunta; el cuadrado resaltado en la esquina superior izquierda debe tener una imagen bonita (como la mayoría de los otros elementos de la barra de herramientas).

Answer 1

Alguna información para otros intenta escribir complementos para CKEditor 3.0.

Empecé copiando la fuente desde plugins / flash y ahora tengo un botón con un logotipo de youtube ... este es un extracto de plugins / youtube / plugin.js

editor.ui.addButton( ''YouTube'',
{
label : editor.lang.common.youtube,
command : ''youtube'',
icon: this.path + ''images/youtube.gif''
});

También necesitarás editar tu archivo de idioma ... ej. Lang / en.js

Agregue su nombre de complemento a la sección "común" (esto aparece como una información sobre herramientas cuando pasa el cursor sobre el botón) y agregue un bloque completo para su complemento, con todas sus cadenas, como esta ....

// YouTube Dialog
youtube :
{
properties : ''YouTube Properties'',
propertiesTab : ''Properties'',
title : ''YouTube Properties'',
chkPlay : ''Auto Play'',
chkLoop : ''Loop'',
chkMenu : ''Enable YouTube Menu'',
chkFull : ''Allow Fullscreen'',
scale : ''Scale'',
scaleAll : ''Show all'',
scaleNoBorder : ''No Border'',
scaleFit : ''Exact Fit'',
access : ''Script Access'',
accessAlways : ''Always'',
accessSameDomain : ''Same domain'',
accessNever : ''Never'',
align : ''Align'',
alignLeft : ''Left'',
alignAbsBottom: ''Abs Bottom'',
alignAbsMiddle: ''Abs Middle'',
alignBaseline : ''Baseline'',
alignBottom : ''Bottom'',
alignMiddle : ''Middle'',
alignRight : ''Right'',
alignTextTop : ''Text Top'',
alignTop : ''Top'',
quality : ''Quality'',
qualityBest : ''Best'',
qualityHigh : ''High'',
qualityAutoHigh : ''Auto High'',
qualityMedium : ''Medium'',
qualityAutoLow : ''Auto Low'',
qualityLow : ''Low'',
windowModeWindow : ''Window'',
windowModeOpaque : ''Opaque'',
windowModeTransparent : ''Transparent'',
windowMode : ''Window mode'',
flashvars : ''Variables for YouTube'',
bgcolor : ''Background color'',
width : ''Width'',
height : ''Height'',
hSpace : ''HSpace'',
vSpace : ''VSpace'',
validateSrc : ''URL must not be empty.'',
validateWidth : ''Width must be a number.'',
validateHeight : ''Height must be a number.'',
validateHSpace : ''HSpace must be a number.'',
validateVSpace : ''VSpace must be a number.''
}

Answer 2

En cuanto a la fuente impresionante, pude lograr esto usando CSS:

span.cke_button_icon.cke_button__bold_icon {
position: relative !important;
background-image: none !important;
&:after {
font-family: FontAwesome;
position: absolute;
font-size: 16px;
content: "/f032";
}
}

Answer 3

Este artículo sobre la creación de plugins de CKEditor en el contexto de Drupal también puede ser útil http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal

Hay ejemplos de código y una guía paso a paso sobre cómo crear su propio complemento CKEditor con un botón personalizado.

Answer 4

Hay un tutorial bastante exhaustivo en el sitio web de documentación de CKEditor, consulte: CKEditor Plugin SDK - Introducción

En este momento cubre:

• Crear un comando de editor
• Crear el botón de la barra de herramientas con un ícono
• Explicación sobre cómo registrar el complemento en CKEditor
• Crear la ventana de diálogo del complemento con dos pestañas
• Agregar menú contextual
• Integración de Advanced Content Filter (ACF) (en una página separada )

Si está interesado en crear sus propios widgets, consulte también Widgets SDK Tutorial

Answer 5

He escrito un tutorial completo que cubre todos los aspectos del desarrollo de los complementos de CKeditor, incluidos botones, menús contextuales, cuadros de diálogo y más.

Answer 6

La respuesta es establecer la propiedad del icono de la configuración del botón de la siguiente manera:

 editor.ui.addButton(''your-plugin'', {
label: ''Your Plugin Label'',
command: ''YourPlugin'',
icon: this.path + ''images/your-plugin.jpg''
});

Su directorio de complementos debe tener un subdirectorio "images" donde su botón debería ir. En el fragmento de arriba, reemplace "your-plugin.jpg" con la imagen JPG, GIF o PNG para su botón.

Esta respuesta, por supuesto, asume que usted sabe cómo crear una imagen de botón usando algún editor de imágenes como Gimp, Photoshop, etc.

Answer 7

Para agregar su icono personalizado, necesita editar skins / moono / *. Css Para el editor en sí, necesita agregar la misma clase de CSS en los siguientes archivos

• editor.css
• editor_gecko.css (firefox)
• editor_ie.css
• editor_ie7.css
• editor_ie8.css
• editor_iequirks.css

El nombre de formato para una clase de botón CSS es .cke_button__ myCustomIcon _icon

Puede usar su propio archivo de imagen para el icono o editar el sprite /skins/moono/icons.png para agregar el suyo.

En tu plugin.js necesitas tener algo como

editor.ui.addButton(''myplugin'',
{
label: ''myplugin'',
command: FCKCommand_myplugin,
icon: ''myCustomIcon''
});

Answer 8

Pruebe este enlace también. Le dará un poco más de profundidad en la creación del complemento CKEditor.

http://www.sayopenweb.com/plugin-for-ckeditor/

Answer 9

estos son algunos complementos para CKEditor 3.x

Complementos de CKEditor

Highslide JS Plugin, LrcShow Plugin, FileIcon Plugin, InsertHtml Plugin, SyntaxHighlighter Plugin

Descargar: Complementos de CKEditor 3.x