Comment faire pour configurer des liens simples et image attacher dans ckeditor?

Je suis en utilisant django-ckeditor et j'ai quelques problèmes avec les liens et images.

Concernant Les Liens:

Dans cette interface, vous pouvez voir que ce n'est pas utilisable par les utilisateurs finaux, car il est trop complexe et peut conduire à des erreurs et des problèmes de sécurité, comme le bouton Browse Server littéralement permet à l'utilisateur de parcourir le contenu téléchargé. Ce que je veux, c'est quelque chose de très simple: il suffit d'une entrée de texte qui ajoute automatiquement http (si pas tapé par l'utilisateur) et qui ouvre le lien dans une nouvelle fenêtre aka cible _blank.

J'ai essayé de faire de l'édition config.js avec le code suivant. Cela a supprimé le Upload et Advanced onglets, retiré inutile widgets à partir de Info onglet et faites cible _blank par défaut. Mais le Target onglet est toujours présent et les utilisateurs peuvent le modifier, comme je l'ai apparemment ne peut pas supprimer cet onglet, ou bien la cible par défaut est ignoré, je suis coincé avec cette. Donc, comment puis-je définir la cible à _blank et retirer le Target onglet trop? Est-il un moyen de masquer cet onglet, mais pas le supprimer?

CKEDITOR.on('dialogDefinition', function(ev) {
    //Take the dialog name and its definition from the event data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    //Check if the definition is from the dialog we're
    //interested in (the 'link' dialog).
    if (dialogName == 'link') {
        //Remove the 'Target', 'Upload' and 'Advanced' tabs from the 'Link' dialog.
//       dialogDefinition.removeContents('target');
        dialogDefinition.removeContents('upload');
        dialogDefinition.removeContents('advanced');

        //Get a reference to the 'Link Info' tab.
        var infoTab = dialogDefinition.getContents('info');

        //Remove unnecessary widgets from the 'Link Info' tab.         
        infoTab.remove('linkType');
        infoTab.remove('protocol');
        infoTab.remove('browse');

        //Get a reference to the "Target" tab.
        var targetTab = dialogDefinition.getContents('target');
        //Set the default value for the URL field.
        var targetField = targetTab.get('linkTargetType');
        targetField['default'] = '_blank';
    }

});

Concernant les images:

Il est très semblable à la situation: plusieurs onglets avec trop d'options. Ce dont j'ai besoin est quelque chose d'aussi simple que la possibilité de joindre des images dans Stackoverflow. Est-il un plugin gratuit qui pourrait me permettre d'ajouter des images au moyen d'un lien et en les téléchargeant à partir de l'ordinateur (avec prévisualisation) à l'aide de la ckeditor?

Merci!

InformationsquelleAutor Caumons | 2013-06-10

Enfin je obtenir de simples boîtes de dialogue de: y compris les liens, attacher des images à partir d'un lien ou en les téléchargeant à partir de l'ordinateur et d'inclure des vidéos sur Youtube de façon simple. Pour ce faire, j'ai édité le fichier de configuration appelé config.js et ça ressemble à ça pour ma version de CKeditor 4.1.2:

CKEDITOR.editorConfig = function( config ) {
//Define changes to default configuration here.
//For the complete reference:
//http://docs.ckeditor.com/#!/api/CKEDITOR.config
//Comment the following line in DEBUG mode:
config.removePlugins = 'devtools';
//See the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
//Make dialogs simpler.
config.removeDialogTabs = 'image:advanced;image:Link;link:advanced;link:upload';
config.linkShowTargetTab = false;
//In CKEditor 4.1 or higher you need to disable ACF (Advanced Content Filter)
//to make Youtube plugin work:
config.allowedContent = true;
};
CKEDITOR.on('dialogDefinition', function(ev) {
//Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
//Check if the definition is from the dialog we're
//interested in (the 'link' dialog).
if (dialogName == 'link') {
//       Remove the 'Upload' and 'Advanced' tabs from the 'Link' dialog.
//       dialogDefinition.removeContents('upload');
//       dialogDefinition.removeContents('advanced');
//Get a reference to the 'Link Info' tab.
var infoTab = dialogDefinition.getContents('info');
//Remove unnecessary widgets from the 'Link Info' tab.
infoTab.remove('linkType');
infoTab.remove('protocol');
infoTab.remove('browse');
//Get a reference to the "Target" tab and set default to '_blank'
var targetTab = dialogDefinition.getContents('target');
var targetField = targetTab.get('linkTargetType');
targetField['default'] = '_blank';
} else if (dialogName == 'image') {
//       Remove the 'Link' and 'Advanced' tabs from the 'Image' dialog.
//       dialogDefinition.removeContents('Link');
//       dialogDefinition.removeContents('advanced');
//Get a reference to the 'Image Info' tab.
var infoTab = dialogDefinition.getContents('info');
//Remove unnecessary widgets/elements from the 'Image Info' tab.
infoTab.remove('browse');
infoTab.remove('txtHSpace');
infoTab.remove('txtVSpace');
infoTab.remove('txtBorder');
//infoTab.remove('cmbAlign');
}
});

Pour ce faire, j'ai lu beaucoup de documents, mais les meilleures pages qui ont inspiré moi sont les suivants:

J'espère que cela aide quelqu'un d'autre avec le même problème. Cheers!

À l'aide de la dernière version 4.4.3 lors de la dépose par exemple protocol de lien, il va bananes pour moi. Erreurs. Solution la plus simple était de faire config.removePlugins='link' et puis il suffit de construire un lien simple plugin de mon propre. Vraiment merdique plugin expédiés par CKEditor. Au moins nous donner un mode simple pour elle. Celui qui n'essaie pas de l'être "intelligent".
Écrit quelques mots à ce sujet ici: danielwertheim.se/2014/08/15/...

InformationsquelleAutor Caumons

Ici ya beaucoup de tweaks que j'ai fait pour CKEditor v3.6.1 pour le rendre utilisable (esp. dialogue d'image et de dialogue lien). Ils semblent travailler pour CKEditor 4.x ainsi, il suffit de prendre ce dont vous avez besoin pour votre config.js:

CKEDITOR.editorConfig = function( config ) {
//Define changes to default configuration here. For example:
config.language = 'de';
config.extraPlugins = 'colordialog';
//config.extraPlugins = 'matheeditor';
//config.uiColor = '#AADC6E';
//config.image_previewText = CKEDITOR.tools.repeat('Custom lorem ipsum text here', 8 );
//config.contentsLanguage = 'de';
config.linkShowAdvancedTab = false;
config.linkShowTargetTab = false; 
config.height = 350;
config.width = 680;
//change color palette
config.colorButton_colors = 'F00,11C11D,00F,B700B7,FF8C00,008080,808080,D3D3D3';
config.colorButton_enableMore = false;
//smaller editor-width for mobile devices
if (/iPhone|iPod/i.test(navigator.userAgent)) {
config.width = 300;
}
//for resizing the editor window
config.resize_minHeight = 350;
config.resize_maxHeight = 880;
config.resize_maxWidth = 910;
//remove all formatting from pasted text
config.forcePasteAsPlainText = true;
//remove font size, family, bg color from pasted text
config.pasteFromWordRemoveFontStyles = true;
//allow browser's spell checker
config.disableNativeSpellChecker = false;
//disable ckeditor context menu to allow native context menu (works on holding CTRL)
//open: http://stackoverflow.com/questions/2246631/how-to-disable-ckeditor-context-menu/12477378
//shortcuts for firefox and chrome (editor breaks if assigned in IE9)
//if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1 || navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
if ( !(/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ) {
config.keystrokes = [
//[ CKEDITOR.SHIFT + 45, 'pastefromword' ], //INS
[ CKEDITOR.CTRL + 76, 'link' ], //L
[ CKEDITOR.CTRL + CKEDITOR.ALT + 66, 'image' ], //B
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 77, 'specialchar' ], //M
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 188, 'subscript' ], //COMMA
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 109, 'subscript' ], //-
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 191, 'subscript' ], //#
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 190, 'superscript' ], //PERIOD
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 107, 'superscript' ], //+
[ CKEDITOR.CTRL + 66, 'bold' ], //B
[ CKEDITOR.CTRL + 73, 'italic' ], //I
[ CKEDITOR.CTRL + 85, 'underline' ], //U
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 70, 'bold' ], //F
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 75, 'italic' ], //K
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 85, 'underline' ], //U
];
}
};
CKEDITOR.on( 'dialogDefinition', function( ev ) {
//take the dialog name and its definition from the event data
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
//var dialog = CKEDITOR.dialog.getCurrent(); 
//alert( dialog.getName() );
//check if the definition is from the dialog we are interested in (the 'link' dialog).
if(dialogName == 'link') {
dialogDefinition.onShow = function () {
var dialog = CKEDITOR.dialog.getCurrent(); 
//dialog.hidePage( 'target' ); //via config 
//dialog.hidePage( 'advanced' ); //via config 
elem = dialog.getContentElement('info','anchorOptions');    
elem.getElement().hide();
elem = dialog.getContentElement('info','emailOptions'); 
elem.getElement().hide();
var elem = dialog.getContentElement('info','linkType'); 
elem.getElement().hide();
elem = dialog.getContentElement('info','protocol'); 
elem.disable();
};
}
else if(dialogName == 'image') {
//get a reference to the 'Link Info' tab.
var infoTab = dialogDefinition.getContents('info');
//remove unnecessary fields
infoTab.remove('ratioLock');
infoTab.remove('txtHeight');         
infoTab.remove('txtWidth');         
infoTab.remove('txtBorder');
infoTab.remove('txtHSpace');
infoTab.remove('txtVSpace');
infoTab.remove('cmbAlign');
//hide image preview (v2)
//field = infoTab.get( 'htmlPreview' );
//field.style = 'display:none';
//memo: dialogDefinition.onShow = ... throws JS error (C.preview not defined) 
dialogDefinition.onLoad = function () {
var dialog = CKEDITOR.dialog.getCurrent(); 
//hide image preview
var elem = dialog.getContentElement('info','htmlPreview');  
elem.getElement().hide();
//hide tabs and show only upload
dialog.hidePage('Link'); 
dialog.hidePage('advanced'); 
this.selectPage('Upload');
//hide url on start up, prevent user input external image URLs 
//goes in onShow of image.js: dialog.hidePage('info'); 
//hide ok button so that upload button can only be used
//goes in onShow of image.js: document.getElementById(this.getButton('ok').domId).style.display='none';
//on tab switching or automatic after upload
this.on('selectPage', function (e) {
//show okay button of ckeditor dialog
document.getElementById(this.getButton('ok').domId).style.display='inline';
//after upload the selectPage is fired, show Bild-Info then
dialog.showPage( 'info' ); 
});
};
}
else if(dialogName == 'table') {
dialogDefinition.removeContents('advanced');
}
});

InformationsquelleAutor Kai Noack

3

Concernant les liens

N'hésitez pas à retirer la "Cible" de l'onglet:
```
dialogDefinition.removeContents( 'target' );
```
Utiliser la puissance de dataProcessor à la place:
```
CKEDITOR.replace( 'editor1', {
on: {
instanceReady: function() {
this.dataProcessor.htmlFilter.addRules( {
elements: {
a: function( element ) {
element.attributes.target = '_blank';
}
}
});
}
}
} );
```
Cela va ajouter target="_blank" à tous <a> éléments dans l'éditeur de sortie. Voir docs pour en savoir plus.

Concernant les images

Il n'y a rien bien au-delà de CKFinder (commercial), KCFinder, PDW Navigateur de Fichiers et Jasfinder. Au moins je ne me souviens plus du tout.
- Merci @oleq pour votre réponse, mais finalement j'ai résolu d'une manière différente. Vous pouvez avoir un coup d'oeil à ma réponse, mais merci quand même! 🙂
InformationsquelleAutor oleq

Si vous utilisez django-ckeditor, vous pouvez tout simplement avoir la configuration suivante dans le settings.py fichier. Vous pouvez le configurer à vos besoins. Pas besoin de jouer avec JS.

CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'Custom',
'toolbar_Custom': [
['Bold', 'Italic', 'Underline', 'Strike'],
[
'NumberedList',
'BulletedList',
'Outdent',
'Indent',
'-',
'JustifyLeft',
'JustifyCenter',
'JustifyRight',
'JustifyBlock'
],
['Link', 'Unlink'],
['RemoveFormat', 'Source'],
],
'height': 300,
'width': 695,
'linkShowAdvancedTab': False,
'linkShowTargetTab': True,
},
}

Cela a fonctionné pour moi.

InformationsquelleAutor Milind

Vous devez vous connecter pour publier un commentaire.

Concernant les liens

Concernant les images