I can embed a YouTube-video by just putting the URL in the HTML-code with some space around it (see: http://codex.wordpress.org/Embeds), like:
<tr><td>
http://www.youtube.com/watch?v=xxxxxxxxx
</td></tr>
This works. But if I open the page with the visual editor and save it the code is deformated like:
<tr><td>http://www.youtube.com/watch?v=xxxxxxxxx</td></tr>
and a link is shown in the webpage instead of the (embedded) video. How can I prevent this?
Proper HTML note here - You should NOT be using blank lines for formatting anyway. The correct way to put in multiple blank lines would be
<div style="clear:both;"></div>
or
<br style="clear:both;" />
If you're using the GUI text editor, TinyMCE Advanced may help, as it supposedly has an option to kill that.
This is what I've found on the wordpress forum. Hope it helps.
Related
I'm redisplaying a Google Data Studio report on my wordpress site via the html embed box. For this particular report I don't want viewers to know the backend is data studio. I've tried readjusting the viewing size to be smaller than that of the report in hopes it would trim out the footer but have had no luck.
Below is the code placed in the html embed box:
<iframe width="2000" height="1600" src="https://datastudio.google.com/embed/reporting/12EqvlygNlYq0D2zpHyNFe3CbswPAC_fT/page/xV>>>>DLB" frameborder="none" style="border:none" allowfullscreen=""></iframe>
Does anyone know how I could remove the google data studio report footer/watermark from my website?
You can’t remove the data studio watermark without violating the Data Studio terms of service
You need to find the following line in HTML.
<div ng-if="reportViewCtrl.isReportEmbedding()">
when a page is loaded use JS to add the following attribute:
style="display:none"
All together will look as follows
<div ng-if="reportViewCtrl.isReportEmbedding()" style="display:none">
3 easy steps:
Disable with ajax/jquery/... the right click function to prevent them from being able to inspect the element embedded and get the url anyway
With CSS, load anything that you can use to overlay it on embedded datastudio footer.
That same element, make it transparent to avoid google penalties
In TinyMCE, when I edit HTML code (using code plugin) and delete closing tags it will automatically add them right after clicking OK.
For example a piece of code like
<table>
<tr>
<th>Foo</th>
</tr>
becomes
<table>
<tbody>
<tr>
<th>Foo</th>
</tr>
</tbody>
</table>
I find this unwanted in my usecase but I cannot figure out how to turn it off.
I've already seen this question and tried these options with no result:
forced_root_block: false,
verify_html: false,
verify_css_classes: false,
cleanup: false,
cleanup_on_startup: false,
fix_list_elements: false,
valid_children: '+body[style],head[style]',
valid_elements: '*[*]',
My TinyMCE version is 4.3.11.
TinyMCE is an awesome addition to the community, with that being said it was meant for users that do not regularly code in HTML. If the HTML tags are not auto generated and one of your users did not specify the html on the page, the page would not look correct. This is why TinyMCE has an auto clean on start to clean up HTML code.
Anyway to disable the auto html you need to disable the verify_html : false, on newer editions you might not be able to disable validation but you can define how TinyMCE will treat html tags. as some tags you will want to keep like the <h1>,<h2> ect.., here is a fiddle and the link to the forum post.
I hope this helps you
EDIT:
MAybe a code editor would suit you better. CodeMirror CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation.
The idea is to use a single input, Fullpage plugin, and HTML comments <!-- like this one --> as dividers.
TinyMCE preserves HTML comments, but they are not visible in editor. Only in Code view.
There are so many reasons why you might want to disable the auto closing of tags. For me its because I have to copy paste a ton of text content then mark it up. So I get this...
<p>
</p>Airstream hitching is a much longer and more complicated...
when I type the opening p tag next to the word Airstream.
I have resorted to typing all the closing tags first. Telling people the 8million reasons why this is somehow good for them is just lame. Who cares why they want to disable this? We don't all need WP and everything else to protect our code from ourselves.
I am using ckeditor in a drupal 7 site. I want to put iframe tag inside the editor.
Currently what happen when we put iframe in ckeditor.
<iframe src="http://www.lipsum.com/"></iframe>
It convert that iframe tag with a img tag with some special attribute and URL.
<img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22http%3A%2F%2Fwww.lipsum.com%2F%22%20class%3D%22placeholder-tool%20helpTool-placeholder%22%20scrolling%3D%22no%22%20frameborder%3D%220%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="http://testsite.com/sites/all/libraries/ckeditor/images/spacer.gif?t=C9A85WF" data-cke-real-element-type="iframe" data-cke-resizable="true">
Which I do not want. I want to make the ckeditor to print exact iframe tag there not the img tag like this.
<iframe src="http://www.lipsum.com/"></iframe>
So that If I want to perform a task in iframe so I can do that inside the editor.
Thank you in advance
Addition 2:
I need the iframe should work in editor itself. It should not convert iframe to img on node add or edit page also.
It should like this
Not like this
Finally, I have to make one line change in ckeditor.js at line number 8194:
return m.createFakeParserElement(p, 'cke_iframe', 'iframe', true);
To
return p;
So it is not creating FakeParser for iframe. And when I put a iframe in edit mode so I see the iframe exactly not the image in place of that.
It is a little hack I used for this functionality.
Thank you Darko for help on this.
Problem solution:
In current newest release of CKEditor (4.5.8) there is a minified file ckeditor.js. In order to have iframe enabled in edit mode you will have to change next line in that file:
return a.createFakeParserElement(b,"cke_iframe","iframe",!0)
into:
return (b)
Due to security reasons that option is by default disabled and this is the way how you can override it.
That is solution for this particular problem. Below are some of possible problem solutions if you have problems with iframe in CKEditor in drupal 7.
Addition:
Go on:
admin/config/content/formats/filtered_html (assuming you use that text format) and add <iframe> in Filter settings (in Allowed HTML tags).
When you post iframe in ckeditor now make sure you don't post it inside any other tag.
ex.:
<p some text <iframe src="http://www.lipsum.com/"></iframe> <br> </p>
that will not work.
<p>some text </p> <iframe src="http://www.lipsum.com/"></iframe>
that will work
Best way is to go on "source" mode in ckeditor and insert iframe there on place you want.
Addition 2:
From your comments i assume you trying all this on online ckeditor? You can't see final result there (node page view) because there is showed only edit view (which is temporary).
Ckeditor converts all your content based on settings (not just basic settings in texts format). For instance ckeditor converts some HTML reserved characters in they entity names or entity numbers because ckeditor itself using HTML to show you preview in edit mode.
ex:
<iframe src="http://www.lipsum.com/"></iframe>
is converted in:
<p><iframe src="http://www.lipsum.com/"></iframe></p>
You can see there that "<" is converted in "<" and ">" is converted in >. Browser need "< >" in source to properly load iframe. So solution is to using "source" option in ckeditor.
So i will repeat once more. Enter text, pictures and all content you need in ckeditor edit mode. When you want to add iframe you go on source mode and put it in content (in that way ckeditor will not convert HTML reserved characters, or maybe some else in your url).
Of course you can edit your iframe there and format size, border, scrolling etc...After saving your content you should see iframe properly loaded. In your case:
Addition 3:
Due to security reasons, to prevent users from breaking site layout and/or to avoid posting invalid HTML that possibility is disabled (like iframe working inside editor). If you are so determent to achieve that you can always go with old modules because in new ones that doesn't work.
In new library there is an option you can try:
admin/config/content/ckeditor
There you can edit Full profile and under ADVANCED CONTENT FILTER you can try disable Advanced content filter. Flush the cache after that. If that not working go with old modules.
Go disable module ckeditor
Install wysiwyg
Install old ckeditor library (just copy old library in /sites/all/libraries )
You need CKEditor 3.3.1 and older
Go on admin/config/content/wysiwyg and select that library
When you do this you should considering all the risks. Hope this post will be helpful for someone else too. Cheers.
I am having a big time issue with solving a problem. I have a placeholder called main for the content region of the page. I was building that region in the cms. Everything was going great until I attempted to add an embedded video contained in an iframe. When I save django cms completely removed the iframe and left an empty div. So I attempted to use prettyphoto light box to open the video by clicking on an image. The code I added to the page through the cms is:
<a rel='prettyPhoto[youtube]' href="https://www.youtube.com/embed/mqVZF_yb8C0?autoplay=1&start=1765&iframe=true" data-rel="prettyPhoto">Click Image</a>
When I saved, django cms completely removed the data-rel attribute from the link which is obviously needed for the js. So I went a step further and adapted the code of the data attribute to:
rel="prettyPhoto"
and the cms also removed that attribute! Also anytime I add an html5 tag like article of section it hates that too! What gives here? Am I doing something wrong? Any advice would be appreciated.
Aaron,
Thanks.
Please see the discussion at https://github.com/divio/django-cms/issues/1529. We use html5lib to clean the contents of the text plugin (this cannot be turned off for security reasons).
What you'll want to do is write a custom plugin (possibly one that can be embedded inside text plugins).
I am developing a wordpress theme based on Roots starter theme . However, I am facing a problem here. When I insert an image on the first line it does not appear, not even in the html mark-up (I checked page source to ensure that). However, when I insert the image from second line onward it shows up properly (also reflected in html mark-up as checked from page source).
I was wondering if that could be an issue with my theme or wordpress itself. I am using version 3.5.1 in the development environment.
Would highly appreciate any discussion on this.
Well you can try to insert the image manually from the begining in HTML code.Find the path of the image that you want to insert and put it on
<img src="" />
Most probably this issue lies with your theme. Try checking your functions.php file and see if there a filter which is related to JavaScript or the_content.