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.
Related
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 run a site where users submit basic news articles. I want to add some formatting features for their submissions.
Is it possible to add custom formatting to text only using CSS?
For example, user can add:
**This should be bold**
And the text appears bold. Or user adds > at the beginning of the paragraph:
> This could be a lengthy paragraph
And the paragraph is aligned to the center.
Is such thing possible to do?
It's not possible using pure CSS.
You have to use Javascript or JQuery or process your custom tags in Server-Side and render them as html and css as you want.
No it is not. You will need javascript or php to replace ** with <b> for example. Otherwise your users would need to put in <b>Hello</b>
If you go to http://twitter.github.com/bootstrap/customize.html you can customize Twitter-Bootstrap's css & js files to only include what you need.
However, I don't really understand things like "Code and pre" and have no idea if I need it or not. Is there a resource that goes over the properties of each checkbox option so I have a better idea if I should include it or not?
I'm not sure if there is a resource for that, try downloading only the sections that you have concerns about and inspect them.
about CODE and PRE:
<code> vs <pre> vs <samp> for inline and block code snippets
So that check box is for specific styles for these text elements.
have no idea? you can download all component! http://twitter.github.com/bootstrap/assets/bootstrap.zip
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.
Can anyone recommend a module or other Drupal add-on that can be used to format code nicely like I see on a lot of blogs and websites? Ideally something that would integrate with CKeditor, but that's not critical, I can make do with HTML tags if need be. Thanks.
The two most popular Drupal modules seem to be Code Filter and GeSHi Filter for syntax highlighting. For getting GeSHi to work with CKeditor, check out the WYSIWYG - GeSHi bridge module.
Well, there's http://alexgorbatchev.com/SyntaxHighlighter/ which is javascript. It gets applied at view time.
To see your code highlighted in the actual editor, you're probably going to have to work a bit harder. If it were me, I'd start with http://ace.ajax.org/ , which is an editor that grew out of Mozilla's constantly-renamed in-browser IDE project.
Maybe it's to much but check this
http://drupal.org/project/grammar_parser_ui
Quick follow up: as per this post, the WYSIWYG-GeSHi bridge development has been put on hold because of some problems integrating GeSHi buttons into CKeditor's toolbar (they make all the other buttons disappear). I can confirm that this is the case.
However, if I use GeSHi tags in HTML source, they do format things correctly. The really key thing left out of the GeSHi module documentation is that you need to enable it as an input format in Drupal.
Next I'm going to try this method for integrating GeSHi formatting directly into CKeditor without using the WISYWIG module or any bridges. Thanks again for everyone's help.
There's the Prettify module that implements Google Code Prettify as JS library. It works out of the box but it appears to duplicate the pre tags, that is, one pre tag appears as container for the other one:
<pre class="prettyprint prettyprinted">
<pre class="prettyprint">
<code>
.myClass {
<br>
float: left;
<br>
}
</code>
</pre>
</pre>
That's only annoying because you can't really style the pre tag if there's two of them because all your styles are duplicated leading to double margins, padding, borders. etc.
Still, it works out of the box if you can deal with using the default styles provided with the module, and there are a number of them, i.e. Google Code, Stackoverflow etc.enter link description here