I have found the answer which could help to add table cell as a valid html element of a body, but it doesn't help for some reason. The reason I need this is that I would like to use this particular content as a repeated data for another content, which contains table element.
Example of the initial content:
<td>{{IMAGE}}</td>
<td><span style="font-weight: bold;">{{SHORT_DESCRIPTION}}</span></td>
And the stripped content:
{{IMAGE}}<span style="font-weight: bold;">{{SHORT_DESCRIPTION}}</span>
What I have already tried:
valid_children: "+body[style], +body[td]",
valid_elements : '+*[*]'
Any help appreciated.
After spending couple hours and digging into core of TinyMce realized that the problem is not TinyMce. The table cell element cannot be direct child of a body as of html specs.
So because TinyMce wraps content into iframe, which is another HTML page on the current page, the <td>'s are stripped out.
Instead of doing suggested steps in comments I have added another textarea which is loaded without wrapping it with TinyMce. I think doing this way is better in my case as I have multiple textareas on a page and don't want to affect them all by manipulating with javascript.
Related
I am currently writing a generic table component that provides some basic functionality to all tables I want to display on my site. Each actual table will then use this generic table and yield headers and content into the generic table.
With the - at the time of writing - latest version of Riot JS, there still appears to be a problem when yielding content into a table.
More specifically, when I yield into a table, Riot puts this information into the main tag (minus the tr and td tags) but keeps the actual table empty.
https://jsfiddle.net/ytgv5o5k/1/
Is there a fix coming up or a workaround that I can use right now? Some sources mention the data-is qualifier, but I don't see how to use this if I would like to re-use a generic table component.
Thanks a lot!
This is a major pain point when using a framework that utilizes custom html tags. It actually has nothing to do with riot. What you're trying to do is not valid html, so the browser kicks the invalid tags out of the table.
See here: http://riotjs.com/guide/#riot-dom-caveats
If it makes sense in your application to break your table into separate tags, you should be able to handle it like this:
<table-container>
<table>
<tr data-is='table-row' each={ row in rows } row={ row }></tr>
</table>
</table-container>
You won't be able to yield anything into a table that isn't valid html. As far as I know, riot has no concept of processing html before placing it in the DOM, which is when your tags will be moved out of the table. The only possibility of using <yield/> is to place content into cells
<td>
<yield/>
</td>
I have a problem. I added CKeditor to my website.
Now i have a problem. If i add lines:
<script>
CKEDITOR.replace( 'tresc' );
</script>
In head section on my main page everything works, but if i go to contact or panel page unfortunetly editor doesn't work(name of the textarea is the same). If i add this lines at the end of body section in contant or panel works, but in the main page only one textarea working with editor, rest doesn't. Writing website on includes(my index is not changing and everything in content div is including from other files). Can some1 help me?
Please see: https://docs.ckeditor.com/#!/guide/dev_installation-section-adding-ckeditor-to-your-page
The replace method has to be used below textarea tag.
Your textarea tags need to have unique id and/or name attributes. So that each CKEditor instance knows to which textarea it is assigned. Unique element id's are also a requirement in HTML.
If your textarea tags can't have different names (they can't have same id's), please drop the names and assign fake class to each e.g. 'myeditor' and use replaceAll method: CKEDITOR.replaceAll('myeditor');.
I solve my problem.
I've added class and use another <script></script>. Now everything is working. Thanks j.swiderski for helping me. Best regards.
I have an html page with a TinyMCE editor in it.
In the editor I would like to edit HTML code that I get from external source.
Some of the HTML I want to edit are problematic, for example I had one code with an unclosed div. What happens in that case, is that the rest of the HTML (after the TinyMCE editing part) gets messed up - because the rest of the HTML is not parsed properly, and that's understood.
The question is how to solve this issue.
Approach 1 - Is to try and solve it on the server side. That's problematic, because I don't want to actually touch/modify that HTML source, the editing process that I need the Tinymce for is just for language changes by the editor. If I'd implement some HTML fixing mechanism on the server side, I might end up with automatic changes to the HTML I didn't plan to.
Approach 2 - If I had some tag in HTML - that would be great - and tag in which the html code in it does not effect the outside code. Do I have that kind of tag?
Approach 3 - Is to think of putting the HTML code inside an inline IFRAME. The problem here is that my control buttons for SUBMIT are outside of the IFRAME - and the TinyMCE is in the IFRAME, so how would I do the Javascript communication then?
Approach 4- Is to wrap the HTML code given to the tinyMCE with an tag, and then after editing, to strip it out. Would that sound like a decent solution? I couldn't actually succeed in wrapping the html in an iframe inside on the tinymce input.
What do you guys say?
I was wondering if there was a way to detect (or at least make a good assumption) whether text pasted into a textarea includes content copied from an HTML table?
I'm finding users of my website are pasting tabular data (from other websites) into their comments and I'm wanting to clean up the way my website displays those comments.
I'm using PHP, but I'm not too fussed if there's a way to do this with Javascript.
And bonus points if your suggestion can keep the table formatting :)
A pure textarea can't receive formatted content. If your users copy a table, div, or whatever HTML structure from other sites and paste into a textarea, you'll have access only to the pure visible text of the copied content, not the HTML code. Using a textarea, the only way to paste HTML code is if your user copy the code directly =).
An alternative is to use a WYSIWYG like Redactor or CKeditor, it can retain rich text and you'll be able to get the HTML that your users paste there.
Or you can simplify and use the attribute contenteditable with other tag (like a div) and test if there's a table using a Regex, this way:
<div id="yourDiv" contenteditable>Paste a table here!!</div>
var yourHTML = document.getElementById("yourDiv").innerHTML;
var thereIsATableHere = /<table[^>]*>(.*?)<\/table>/.test(yourHTML);
I'm building a blog-like portfolio. I want the content of the posts to be loaded only when they are viewed. To do that I tried to store the HTML code in a textarea in the meantime and place it in a div when the post is viewed. This works fine but for some reason the content is not recognized as HTML when placed in the div.
Can anyone tell me why?
You can find the testpage here: http://www.raapwerk.nl/login/portfolio
Thanks!
A textarea contains text, no HTML, so when you copy the contents it will be plain text you're copying. Is there any specific reason you use a textarea?
Otherwise you can just change it to a div and it will work, see this update to your fiddle
EDIT
Easier method, which doesn't load the content before it is displayed: just get the value of the textarea instead of the innerHtml, see this fiddle