I am using the TinyMCE Editor, after some Googling it is apparent that the editor needs a root element, which by default is a paragraph.
So everything wrapped in a p tag <p></p>
However, I don't want my images to be wrapped in a paragraph as I want them to be a standalone item.
I know you can strip all p tags but can you be selective with the imagery?
There's currently no way to do this within TinyMCE. You could always strip the root <p> tag on content export.
Related
I want to write text on the right side of an image in GitHub .md file. I mean image should be displayed on the left side of the text (text including heading, list, para and links). I know I can do it using HTML or CSS using flex or so but is it possible to do it using GitHub markdown? And is it also possible for the text to be vertically aligned with respect to image size?
Markdown doesn't provide a set of rules or syntax for how the text is to be displayed, other than allowing HTML elements with CSS. That's because Markdown, like HTML, is a markup language, and presentation is supposed to be done outside of it at a separate level (usually CSS).
However, for a variety of reasons, including security, aesthetics, and accessibility, GitHub strips out all CSS when it's rendering HTML from a README or other text document, so there isn't a way to do what you want.
Unfortunately the accepted answer is wrong. It is possible.
Github-Markdown:
<img align="left" width="200" src="https://www.rd.com/wp-content/uploads/2018/02/25_Hilarious-Photos-that-Will-Get-You-Through-the-Week_280228817_Doty911.jpg" />
# Headline
Some text
Rendered result on Github:
For the sake of completeness:
See also this answer: GitHub Pages: How can I wrap text around an image?
I have added links to a list of sentences in my TYPO3 backend.
In the frontend, some of these sentences are rendered properly, with a link to them. However, some others are rendered as plain text, with the tag visible.
View of the text in the backend
View of the rendered text in the frontend
What caused the problem, and how can I correct it?
your description of the error is not good enough to give a good answer. please explain more in detail what you are doing: templates, configuration, ...
for the moment I guess: you use fluid-templates and have fluid-variables which contain the rendered content.
instead of outputting the content of a field directly (like {fieldname}), where the rendering is done by fluid you need to output the already rendered output without interfering of fluid (rtefieldname->f:format.raw()}) as for RTE-fields the content is already rendered in html. otherwise all specialchars are converted to show as given.
It might be that the <a> tags aren't closed properly.
Try checking the HTML code from the backend (by clicking the <> button in the backend). See if the </a> tag is where it should be, at the end of each sentences.
You need to find the difference between the lines that work and the lines that don't.
I am using tinyMCE in show block elements mode.
I have written custom plugin that inserts prepared html blocks (layout partials) in actual cursor position.
It's problematic to point a space between two divs.
If I have markup like that:
<div id="first"></div><div id="second"></div>
When I click beteween those divs I would land in first or second div, never between.
So I try to edit html source and result in markup whit br's:
<div id="first"></div><br/><div id="second"></div>
Now I can point between those divs, but it does not work with elements that I add dynamically via tinyMCE. If I add partial eg.
<div></div><br/>
clicking after that div is not posibble. But it's posibble when I edit source manually. Weird. Do you have any solution at this subject?
Tinymce takes care that the user is not able to click between div or p tags.
The reason for this is easy: If a user could click inbetween and he would type in a letter - then there would be another div or p created containing that letter. This is not the way rtes are designed to work. If you want to insert somthing between two divs you will need to use a special button or own plugin to take care of this, but placing the cursor where you won't it to be by hand won't work.
I have an element on my page which has no content. e.g
<p> </p>
When I try to edit this element in TinyMCE, it removes the element completely. I want this functionality and give users an option to edit this tag using tinyMCE but I am unable to figure out how.
Thanks
I'm using tiny mce for my project and want to validate the node inside the tiny mce. On click of a text element, let's say a paragraph with some id, I load editor for the element. But, sometimes if user replaces the whole content, the node and its HTML is lost. I want to retain this node and only the content is removed. The node can be a paragraph or heading or ul or ol.
EDIT :
I'm providing dummy text such as "Lorem epsum .....". User will be removing this dummy text and add his content.
EDIT2
I want to allow the user to change the content only and the surrounding HTML and styles should remain intact.
How can I accomplish this ?
This would check if node content is in editor, and if not will add it at the bottom.
var nodecontent;
if (!tinyMCE.activeEditor.getContent().match(/nodecontent/) {
tinyMCE.activeEditor.setContent(tinyMCE.activeEditor.getContent()+nodecontent);
}
You could make a new button in tinymce which gives you a pop-up asking for the ID or the title of a node. This button then puts a small piece of "code" in the tinymce textfield.
for example: ((id:10))
When loading a node, you can search if the current node has that "code" in it by a regular expression. If it has, load the content from the node with that ID from the database.
Hmmm, it will be very tricky to keep the surrounding html while the user is able to delete html elements in the editor. You would need to intercept each attempt where a user could delete your surrounding html (Copy/paste, delete, backspace, usage of the code-plugin, and so on...) and then handle it case for case.
Suggestion:
In case the surrounding html will never change you could give the user total control over the editor content through adding the surrounding html after the user submits/saves the editor content. To keep the style even without the surrounding html it might be sufficient to create a css class and apply it to the body element of the editors iframe. The body element is not deletable. I do not know if this is acceptable in your use-case (let us know).