assuming I have a string that contains (text image text text image text). The order in which the string contains an image or text link varies. I want to render the text and the image in the order that the string contains each one and that every time I switch between one of the two the view drops a line. in the case of this string it would return something like this:
View
Text
Image
Text
Text
Image
Text
View
The image in the string is a link which will be the source and the text is the text of the tag.
I'm using react-string-replace but in this way I only can use a image tag inside a text tag. The view will be a scroll view. Anyone can help me?
Related
We have a use case where a content editor wants to
right-align an image so text wraps around it and
set the image width so it will scale well in an article.
While the rich text editor allows us to select an image with a right-aligned format, there isn't an option for specifying the image width.
How can I customize the Wagtail "Choose a format" modal to add a new field for image width and use that in the rendered output? I hope to avoid creating additional image formats with possible permutations of image alignment/width since these are two separate properties.
Prior art
See the WordPress Gutenberg image settings UI below for prior art.
Docs: https://docs.wagtail.org/en/stable/advanced_topics/images/changing_rich_text_representation.html#changing-rich-text-representation
# image_formats.py
from wagtail.images.formats import Format, register_image_format
class SubclassedImageFormat(Format):
def image_to_html(self, image, alt_text, extra_attributes=None):
original_html = super().image_to_html(image, alt_text, extra_attributes)
return original_html.replace('class="', 'class="foo')
register_image_format(
SubclassedImageFormat('subclassed_format', 'Subclassed Format', classnames, filter_spec)
)
I am working on comparing files. So if something was added - I make it green, if deleted - red. And I do that on the server-side by adding a span tag and style attribute. Then I want to show it on the front side with some of React text editors by initializing an initial state with this file. The problem is that text editors cut style attributes, so my text is not with color. And I need to show a job of files comparator.
Thanks for any help :)
I am trying to display html by using angularjs sanitize module and ng-bind-html attribute on the element. It works fine if I have the attribute
on a div element.
<div ng-bind-html="htmlText" contenteditable="false"></div>
But I need the same text in a text area control. When I read about displaying html in text area, my understanding was that
text area does not support this. Is there a way I can convert the html to text before hand in controller and then use only ng-bind on text area? I have multiple long paragraphs and bullet points in html to display as formatted text.
Thanks for any suggestions.
//Does not display formatted html.
<textarea class="form-control" ng-bind-html="htmlText" contenteditable="false" rows="7"></textarea>
textarea only supports plain text. Since you are not allowing the text to be edited, I'd use the div that you started with. I suspect that you're trying to control the size and enable scroll bars when necessary on the div, and hoping to get that out of textarea. You'll be much better off just styling the div accordingly.
I am using Joomla 3.x and K2 extension. I'd like to hide the attached image of the item in intro text, and show another image instead in the content page (full page). (The image that shown in the main page replaced by another image in the article/content page). How can I do that?
In K2, you can associate an image with an item by uploading it to the Image tag for that item. You can also add images within the content of the item as well. To accomplish what you are trying to do it would probably be easiest to do this -
Configure the category view to display the image from the image tab
Configure the detail view to NOT display the image from the image tab
Use a template override for the category item view that strips out any images in the intro text
This way you will have the image tab image display in the category and the content image shown on the detail page.
Under the category, go to "Item view options" (on the right), and select "hide" for "image".
Make sure if your category inherits from another one, you make this change in the top category
Is it possible in ExtJS 4.0 to set a column header as a image, or custom rendered HTML?
The API for column text says:
text : String
The header text to be used as innerHTML (html tags are
accepted) to display in the Grid.
Which means you can pass in something like <span class="mySpan"></span> and define a css class that has a background image.
EDIT:
Here is an example:
http://jsfiddle.net/HSVj8/102/