search

GetmeUK / ContentTools

A JS library for building WYSIWYG editors for HTML content.
http://getcontenttools.com
MIT License
3.97k stars 399 forks source link

Impossible to edit an image with a link upon it #514

Open nuggets opened 6 years ago

nuggets commented 6 years ago

Impossible to edit an image with a link upon it

Here are the steps:

• I add an image and then I add a link upon the image

• I save the changes

• I want to edit the link (the one set on the image)

• Impossible to edit the link or the image. When I clic on the image (to select the element) I am redirected trough the link

Code exemple:

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>ContentTools test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ContentTools/1.6.4/content-tools.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ContentTools/1.6.4/content-tools.min.css">
    <style>
        /* Alignment styles for images, videos and iframes in editable regions */
        /* Center (default) */
        [data-editable] iframe,
        [data-editable] image,
        [data-editable] [data-ce-tag=img],
        [data-editable] img,
        [data-editable] video {
            clear: both;
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
        }
        /* Left align */
        [data-editable] .align-left {
            clear: initial;
            float: left;
            margin-right: 0.5em;
        }
        /* Right align */
        [data-editable].align-right {
            clear: initial;
            float: right;
            margin-left: 0.5em;
        }
        /* Alignment styles for text in editable regions */
        [data-editable] .text-center {
            text-align: center;
        }
        [data-editable] .text-left {
            text-align: left;
        }
        [data-editable] .text-right {
            text-align: right;
        }
        /* Page styles */
        body {
            background: #111;
        }
        [data-editable] {
            max-width: 960px;
            margin: auto;
            background: #FFF;
        }
    </style>
</head>
<body>
<div data-editable>
    <a href="https://www.google.fr">
        <img src="pacman.png">
    </a>
</div>
<script>
    editor = ContentTools.EditorApp.get();
    editor.init('*[data-editable]', 'data-name');
</script>
</body>
</html>
anthonyjb commented 6 years ago

@nuggets sorry you're seeing this error I can't reproduce it in either my live projects or the sandbox demo and the steps you've provided (both are using the latest release of CT).

We're currently on release 1.6.10 and your example is showing 1.6.4 could you confirm if the problem still exists for you using the latest release please?

nuggets commented 6 years ago

Hi @anthonyjb,

Actually you can't see the bug via the sandbox demo because you need to save the image/link and then reload the page to get the infos saved back. I give you the steps again with small precisions added (and with an image) :

• I add an image and then I add a link upon the image

• I save the changes

• I reload the page (impossible to simulate it in the sandbox, the datas are not saved in a DB)

• I want to edit the link (the one set on the image) -> see and run the code below to simulate the step

• I launch the edition mode of ContentTools

• Impossible to edit the link or the image. When I clic on the image (to select the element) I am redirected trough the link

Thanks in advance for your feedbacks! 

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>ContentTools test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ContentTools/1.6.10/content-tools.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ContentTools/1.6.10/content-tools.min.css">
    <style>
        /* Alignment styles for images, videos and iframes in editable regions */
        /* Center (default) */
        [data-editable] iframe,
        [data-editable] image,
        [data-editable] [data-ce-tag=img],
        [data-editable] img,
        [data-editable] video {
            clear: both;
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
        }
        /* Left align */
        [data-editable] .align-left {
            clear: initial;
            float: left;
            margin-right: 0.5em;
        }
        /* Right align */
        [data-editable].align-right {
            clear: initial;
            float: right;
            margin-left: 0.5em;
        }
        /* Alignment styles for text in editable regions */
        [data-editable] .text-center {
            text-align: center;
        }
        [data-editable] .text-left {
            text-align: left;
        }
        [data-editable] .text-right {
            text-align: right;
        }
        /* Page styles */
        body {
            background: #111;
        }
        [data-editable] {
            max-width: 960px;
            margin: auto;
            background: #FFF;
        }
        .
    </style>
</head>
<body>
<div data-editable>
    <a href="https://www.google.fr">
        <img src="https://remijean.fr/asc/pacman.png">
    </a>
</div>
<script>
    editor = ContentTools.EditorApp.get();
    editor.init('*[data-editable]', 'data-name');
</script>
</body>
</html>

PS : the problem persist with the 1.6.1 version

anthonyjb commented 6 years ago

@nuggets so I'm saving content to a database on a number of sites at the moment and not experiencing this issue on 1.6.10, which points to the issue being with the way the data is being stored and/or retrieved from the database and inserted back into the page.

When you set an image as a link the following data attribute should be applied to the link element data-ce-tag="img" and indeed when I test this on the sandbox and on live sites it does get added. So on saving your HTML should look like this:

<div data-editable>
    <a href="https://www.google.fr" data-ce-tag="img">
        <img src="https://remijean.fr/asc/pacman.png">
    </a>
</div>

And if you modify your example to contain this data attribute everything works as expected. Is it possible that your store/retrieve process is stripping this attribute from the image? Could you print out what you receive as part of the save command and double check if this attribute is present?

nuggets commented 6 years ago

@anthonyjb thanks very much for you answer! Actually we have a filter in our code that remove the tags wich are not in our "whitelist" so the data-ce-tag="img" was removed just before the saving. Thanks again for your support, problem solved! ;)