Image issues with CKEditor

walldg88 · April 2014

I enabled the CKEditor so I can add extra buttons for tables and other styles for our client. Our client doesn't know HTML so having the WYSIWYG editor is a must. There seems to be an issue adding images to my pages using this editor.

If I upload and add the image on the editor view, it looks like it is added correctly. However, if I browse to the source view, the image vanishes (along with the entire img tag) and I get this error in the Firebug console:

TypeError: src is undefined in /assets/js/fuel/custom_fields.js?c= on line 197

Now, if I upload and add the image through the source view, the img tag is added correctly and it will also save correctly. However, if I now try to make any kind of edit to this page in the editor view, I will get the same error I listed above. I can still make any edits I want through the source editor though.

Is there something I can do to fix this?

admin · April 2014

Is this with the latest version? Also, what does the source code look like (so you by chance have "style" tags in your HTML)? And is this consistent across browsers?

walldg88 · April 2014

1. Is this with the latest version?
Yes, the latest version of both Fuel CMS and CKEditor

2. Also, what does the source code look like (so you by chance have "style" tags in your HTML)?

MANAGEMENT
--- Founder and Managing Member	--- Business Development

RESEARCH
---	---	---
---	---	---
---	---	---

SALES
---	---	---
---	---

All links and images were added using the editor in the source view.

3. And is this consistent across browsers?
I can reproduce this issue in both Firefox and Chrome. However, the console in Chrome gives this error:

"Uncaught TypeError: Cannot call method 'replace' of undefined" in the same file on the same line as the Firefox error

walldg88 · April 2014

It looks like my HTML blew up, but I can send it another way if you need it. However, there are no style tags in there...just hrefs, src and alt. Could the image src tag be messing things up?

admin · April 2014

You can use "code" tags to help format the HTML.

walldg88 · April 2014


<div class="ourstaff">
<table class="management">
    <tbody>
        <tr>
            <td>
                <h3>MANAGEMENT</h3>
            </td>
        </tr>
        <tr>
            <td><img src="/assets/images/staff/s_Adam_96x96.jpg" alt="" /><a 

href="{site_url('ourstaff/adam')}">---</a><br />
                <em>Founder and Managing Member</em></td>
            <td><img src="/assets/images/staff/s_Paul_96x96.jpg" alt="" /><a 

href="{site_url('ourstaff/paul')}">---</a><br />
                <em>Business Development</em></td>
        </tr>
        <tr></tr>
    </tbody>
</table>
<hr />
<table>
    <tbody>
        <tr>
            <td>
                <h3>RESEARCH</h3>
            </td>
        </tr>
        <tr>
            <td><a href="{site_url('ourstaff/anthony')}">---</a></td>
            <td><a href="{site_url('ourstaff/alexander')}">---</a></td>
            <td><a href="{site_url('ourstaff/judah')}">---</a></td>
        </tr>
        <tr>
            <td><a href="{site_url('ourstaff/justin')}">---</a></td>
            <td><a href="{site_url('ourstaff/biana')}">---</a></td>
            <td><a href="{site_url('ourstaff/ross')}">---</a></td>
        </tr>
        <tr>
            <td><a href="{site_url('ourstaff/scott')}">---</a></td>
            <td><a href="{site_url('ourstaff/robert')}">---</a></td>
            <td><a href="{site_url('ourstaff/matt')}">---</a></td>
        </tr>
        <tr></tr>
    </tbody>
</table>
<hr />
<table>
    <tbody>
        <tr>
            <td>
                <h3>SALES</h3>
            </td>
        </tr>
        <tr>
            <td><a href="{site_url('ourstaff/mary')}">---</a></td>
            <td><a href="{site_url('ourstaff/tanja')}">---</a></td>
            <td><a href="{site_url('ourstaff/meg')}">---</a></td>
        </tr>
        <tr>
            <td><a href="{site_url('ourstaff/richard')}">---</a></td>
            <td><a href="{site_url('ourstaff/rob')}">---</a></td>
            <td></td>
        </tr>
    </tbody>
</table>
</div>

admin · April 2014

Try replacing the image paths in your HTML to use the img_path function like so:
<img src="{img_path('staff/s_Adam_96x96.jpg')}" alt="" />

walldg88 · April 2014

I tried changing the path accordingly, but it didn't save anything after I clicked Save. The real problem is that I can't add an image at all using CKEditor. Since the image wouldn't save after following your suggestion, I decided to remove the images from the page entirely and re-add them. I selected the images in CKEditor and it all looked fine. However, after I save and the page reloads, the images are gone. If I click view source on the editor after adding an image, there is no image tag in there at all...it is already removed. If I inspect the CKEditor data using Firebug, I can see the image tag and everything seems fine. I don't understand why it seems like the image tags are being stripped out when I go to view editor source or save the data.

admin · April 2014

I'm having a tough time recreating the issue locally. What browser are you using? On line 198 in the fuel/modules/fuel/assets/js/fuel/custom_fields.js file there is a part of the wysiwyg function that swaps out the img_path function. There is also an unTranslateImgPath function that reverses it on line 292. I'm wondering if either of those are contributing to the problem (although they should only be affecting the href and not the whole image tag. Are you using the version of CKEditor that came with FUEL?

walldg88 · April 2014

I tried this on Firefox and Chrome. I actually did update the CKEditor to the latest version so it is not the one that came with FUEL. Is the one that came with FUEL modified in some way? I'll try switching it back and let you know how it goes.

walldg88 · April 2014

Looks like that fixed it. I completely forgot that I changed the editor to the latest version. Thanks for the help!

Howdy, Stranger!

Categories

Image issues with CKEditor

Comments

MANAGEMENT

RESEARCH

SALES