Comments (10)
I think the issue here is that you need to mark the <a>
tag as an image, e.g:
<a href="#" data-ce-tag="img">
<img src='http://placehold.it/350x150'>
</a>
As you want the <a>
tag to be treated as an image by the parser you need to mark it up in this way, if you create an image through the editor and add a link to it then save the page content you'll see this data
attribute appended to the link automatically.
from contenttools.
Here's how I'm doing it. Initially, the content is this:
<div data-editable data-name="main-content">
<p>
<a href='#'>
<img src='http://placehold.it/350x150'/>
</a>
</p>
</div>
Afterwards, I start the editor then it moves it out. I think the image shouldn't be moved out of the link and it should be handled. What's happening with the image inside the link?
I can't actually add images as of the moment. I tried it but nothing's happening, probably since I'm doing this in WordPress or that I'm not handling uploads yet. So I can't check the marked up html yet for images with a link.
Prior to editing, I also tried adding data-ce-tag="img"
to the a
tag but it still does the same. I also tried adding it to the p
tag but it just disappears.
from contenttools.
So you'd need to change your initial content to:
<div data-editable data-name="main-content">
<p>
<a href='#' data-ce-tag="img">
<img src='http://placehold.it/350x150'>
</a>
</p>
</div>
By default <a>
tags aren't converted to images as potentially (longer term) they might wrap other elements as well.
The image shouldn't be moved outside the link, oddly when I add your code to the sandbox/index.html
file in the demo (using Chrome) the <a>
tag is just converted into a static element and editing and saving doesn't move the image outside of it.
Can you test that this issue doesn't occur if you add the following code to the sandbox demo in the repo:
<!-- Static element containing an image -->
<a href="#">
<img src="image.png" alt="Example of bad variable names" />
</a>
<!-- Editable image with link -->
<a href="#" data-ce-tag="img">
<img src="image.png" alt="Example of bad variable names" />
</a>
If you get the same issue then it might well be an issue with a specific browser I need to look at so could you provide details.
from contenttools.
Still the same thing. In the sandbox, I added this (this is from the inspector):
<p>
<a href="#">
<img src="http://placehold.it/350x150" alt="Example of bad variable names">
</a>
</p>
<p>
<a href="#" data-ce-tag="img">
<img src="http://placehold.it/350x150" alt="Example of bad variable names">
</a>
</p>
After clicking the edit, I'm getting this:
<p class="ce-element ce-element--type-text">
<img alt="Example of bad variable names" src="http://placehold.it/350x150">
<a href="#"></a>
</p>
<p class="ce-element ce-element--type-text">
<img alt="Example of bad variable names" src="http://placehold.it/350x150">
<a data-ce-tag="img" href="#"></a>
</p>
I'm using Chrome in Mac OS X 10.11
from contenttools.
Ahhh... I understand now you're adding the image within an editable paragraph not as an editable image. You can't add images within paragraphs right now (well you can using HTML and they'll appear but you can't add them via the editor).
That does however look like a bug in the the way that the HTMLString library is optimizing, clearly the image should be retained inside the <a>
tag. Sorry for the confusion I'll mark it as a bug and have a look at resolving it.
from contenttools.
Yup, you cannot add them, I'm totally fine with that. I'm modifying the HTML for editing them then performing the necessary CT functions so that the editor can see the changes like you mentioned.
Thanks, hopefully we can fix it :)
from contenttools.
Yep - just tested the code in HTMLString Spec and it fails in the way you described, hopefully it's something easy :)
from contenttools.
@bfintal - OK I think that's resolved that.
from contenttools.
Wow that was fast. Thanks! Confirmed on my end 👍
from contenttools.
Awesome (fortunately an easy fix) - sent you a question on Gitter re your early question :)
from contenttools.
Related Issues (20)
- Save issue - saves fine, but won't allow a second "save" HOT 5
- Making CT compatible with CSP style-src set to 'self'
- Can't edit files that were included or read by php HOT 17
- Edit multiple paragraphs at once. HOT 2
- Is there a way to change the default tag output for normal html tags HOT 2
- Missing translation in /src/scripts/ui/dialogs/table.coffee
- Problem update image classes HOT 5
- Build files to use dynamic import in pure javascript HOT 1
- How to use assign ? HOT 2
- Hot to keep style attributes on save.
- Support for Sass >= 1.33 HOT 11
- npm install failed HOT 2
- Feature: Support drag & drop of images
- The image uploader HOT 2
- Inspector bar doesn't show embedded HTML elements when wrapped with paragraph HOT 1
- Line breaks not saving
- Add class to a link
- Lazy loading of images
- Source code edit? Insert <script> tag HOT 3
- The part in italics is not the right one HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from contenttools.