Help me get Alt text for the image when using my createFromHtml template

CKEDITOR.on('dialogDefinition', function(ev) { var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; var editor = ev.editor; if (dialogName == 'image') { dialogDefinition.onOk = function(e) { var imageSrcUrl = e.sender.originalElement.$.src; var imgHtml = CKEDITOR.dom.element.createFromHtml("<div class='img'><a href="+ imageSrcUrl + "><img class='img-responsive' src=" + imageSrcUrl + " alt='' /></a></div>"); editor.insertElement(imgHtml); }; } });

When loading an image, I prescribe ALT, but the editor does not save it. I understand that you need to get it like imageSrcUrl, but I can not understand how. Tried to register txtAlt, does not help.

Thank.

  • In the code before the line var imageSrcUrl = e.sender.originalElement.$.src; put console.log(e.sender.originalElement.$); and look at the browser console. Maybe among the properties of the displayed object will be seen the right. - Visman pm

2 answers 2

In your way, each image comes with a link to itself. And if you need to place an image with a link to the page of the site? Or a small image (icon) that does not need the img-responsive class?

There is another way to achieve the same goal. I use it in my projects. It is configured in several steps:

Step 1. Switchable image style

Surely you're using the stylescombo addon. Here he is:

enter image description here

The list of styles can (and should) be changed via config.stylesSet . Moreover, styles can be created not only inline or paragraph, but also unique to objects of different types. Including - for images. Here is the code we need for the image:

 config.stylesSet = [ { name: 'Само-ссылка', type: 'widget', widget: 'image', attributes: { "class": 'img-with-link' } } ]

Now that you have selected an image in the stylescombo you can turn the Self-reference item on and off in stylescombo . This will add img-with-link to your image. And we will work with this class already in viewing mode.

Step 2. Unobtrusively adding self-reference

Your post is saved and we see it on the page. The image has an img-with-link class. Now we can unobtrusively load the js-script, find in it all the images with such a class, and do with them what we want. I do this:

 $(document).ready(function() { var images = $('.img-with-link'); if (images.length) { images.each(function() { $(this).wrap("<a href='" + $(this).attr('src') + "' target='_blank'></a>"); }); } });

Each image I unobtrusively wrap a link to the image itself with target="_blank" so that the link opens in a new tab. If desired, you can also connect the js-lightbox or js-gallery here. Or add the img-responsive class to the image itself (although I recommend simply styling all the images inside the post just like the img-responsive class).

  • Thank you for such a detailed response. Very useful in the future. Now I understand how to make my own styles. On the topic, partially solved the problem of obtaining ALT. I get it by ID, but only the first word from the Alt text is saved. var txtAlt = document.getElementById('cke_641_textInput').value; I can't figure out how to get the whole text, not just the first word up to the space - kate

Solution of the problem:

 var txtAlt = document.getElementById('cke_641_textInput').value.replace(/ /g, '\xa0');

Alt output:

 alt=" + txtAlt + "