In previous version of TinyMCE I was able to use valid_elements : "+*[*]" to enable using <meta> tags but in new version, it does not work anymore!
When I go to source code I cannot see the meta tags although they are embedded in html code. So, editing meta tags by source code editor is not possible!
I was in the same situation than you (TinyMCE 4 VS markups).
In fact my goal was to handle this video markup example : https://support.google.com/webmasters/answer/2413309?hl=en
I wanted TinyMCE to not touch anything ^^
In the "tinymce.init" function, just add :
extended_valid_elements : "div[*],meta[*],span[*]",
valid_children : "+body[meta],+div[h2|span|meta|object],+object[param|embed]",
And you'll be fine.
The "extended_valid_elements" option allows you to override the behaviour of specified markups. Like you'll read in the official documentation, you have to be careful to include all default values because you are currently overriding them.
Personally I didn't bother and allowed every attributes with [*]
That's not very clean, I would rather use this option :
extended_valid_elements : "#[itemscope|itemtype|itemprop|content],div,meta,span",
to properly authorize new attributes for those 3 markups but again you have to specify ALL default values (for example with just this line, the "id" attribute for div markups was cleaned...)
The "valid_children" option allows you to authorize curious embed markups regards to the official XHTML schemas : that's exactly what we want here. With this configuration, TinyMCE will not reorder unexpectedly your markups.
Hopes this helps !
Regards
There's lots of issues with tags like that in a contenteditable based editor, tinyMCE 4 has solved it by adding a new plugin that keeps the doctype, title, and meta tags in memory and dynamically adds it to the editor when viewing source and submitting the form. It's called fullpage. I also think that this plugin links any stylesheet that's added with the content_css setting.
Related
Does anyone know of a ready-made plugin that allows adding input, textarea, select etc. on tinymce?
The tinymce.dom.Selection API (https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/#select) allows you to select elements or set content in the TinyMCE editor. You can assign the API class to an action or an interaction element like a button or form, and any selected content will be replaced with the contents the API action passes in.
If that's not a good fit for what you need, is there an example of the type of adding input, a textarea, or a select you're looking for?
There are no official plugins that allow such interactive elements to be added. TinyMCE is a text editor that is built to create blog posts, articles, etc. By design, it is not a page builder. However, there may be some unofficial plugins on GitHub that may implement such features.
If you are going to insert forms and text areas that should not be edited or reconfigured afterward, you can use templates. They may come as any valid HTML. Thus, some fixed forms can be just saved as templates.
Another way is, of course, inserting HTML directly into the code.
According to this update, VS Code is supposed to auto close tags when the closing > of the opening tag is typed. Mine won't seem to do that (I'm on v1.19).
I also tried installing the package Jun Han made which is supposed to do this too, but it doesn't work. Is there a trick to getting this function to work?
Enabled extensions are:
I've also experienced inconsistencies with this feature.
Tag elements are now automatically closed when > of the opening tag is typed
This only seems to work when the file is detected as plain HTML or JS.
The matching closing tag is inserted when / of the closing tag is entered
This works for HTML and JavaScript, and for other formats that render HTML like Vue or Markdown.
There are some settings you can check if it's not working:
Make sure html.autoClosingTags is true
It should be true by default
Check your user, workspace, and folder settings (maybe one is overriding it)
If you still have the Auto Close Tag extension installed:
auto-close-tag.excludedTags
auto-close-tag.activationOnLanguage
If the detected language is not HTML or JavaScript, check that it is on this list
auto-close-tag.fullMode
The default is false, but setting to true makes it seem more consistent
I had the same problem. After reviewing the answer above, I noticed that VS Code auto-detected a different language than HTML, even though the file I was editing had the ".html" extension. After selecting HTML as the working language, the editor now auto-closes the tags.
I have an email sending web application and for text formatting I need to implement a WYSIWYG editor for email body. I have tried Tinymce and fckeditor but the major problem with these editors being that they output <div> and <span> tags with inline style. Most email clients like outlook and even gmail simply rip off any css and hence they are of no use.
I went ahead with TinyMCE and used the following configuration for font colors:
<script>
tinyMCE.init({
theme_advanced_buttons1_add : "forecolor,backcolor",
tinymce.init({selector:'textarea'});
});
</script>
As said above, I get <span style="font-color:#ff0000">Text here</span> when I try to add red color to a portion of text. This gets removed by both Gmail and outlook and what the receiver gets is black text. No fonts, no font colors. What mail clients understand is the old <font> tag.
My question: How can I tweak tinymce (or fckeditor) to output <font> tags instead of <span>? I could not find a useful solution in their documentation. It would also help if anyone can suggest any other email friendly text editors out there.
A similar question is here but without a solution: Create a html wysiwyg editor for editing email templates
I know this is an older post, but the current version of TinyMCE has a legacyoutput plugin that will do just that. Just initialize with this option:
tinymce.init({
plugins: "legacyoutput"
});
There's a sample in CKEditor's package that show how you can configure it to produce font tags instead of span tags.
You can find it in ckeditor/samples/plugins/htmlwriter/outputhtml.html.
Although, AFAIK and according to Guide to CSS support in emails you can freely use some basic styling, but it have to be inline styles.
PS. Recently I started a small project called styliner. This library accepts stylesheet plus HTML and it produces HTML with inline styles. It's not ready yet, but in simple cases it may be already useful.
I would suggest using php str_replace to replace all instances of 'span' with 'font'.
Simple example:
$output = $_POST['yourForm']; // or whatever variable the editor returns
$output = str_replace('span', 'font', $output); // $output now has all instances replaced
Because the editors are not designed for email, you'll have to run a bunch of functions on them (in addition to limiting their functionality) to output only email friendly html.
#Captain Hypertext's answer correctly answers #Zeeshan's question, but won't fix the primary issue.
As #John mentioned in a comment above, the cause of the issue why the OP #Zeeshan's code wouldn't work in email clients is due to using a CSS property that doesn't exist.
<span style="font-color:#ff0000">Text here</span>
The above will not be coloured in any email client (nor web browser), as the CSS property font-color is invalid (does not appear in any CSS specification).
<span style="color:#ff0000;">Text here</span>
The above will work in the majority of email clients and all web browsers as the CSS property color is valid (since CSSv1). This won't work if inside a link in older Outlook email clients though (2007 - 2012 iirc).
You could define that text styling has to be set as a tag in tinymce:
tinyMCE.init({
// Override internal formats
formats: {
bold : {inline : 'b' },
italic : {inline : 'i' },
underline : {inline : 'u'}
},
...
}
Plone 4.2.1.1
plone.tiles 1.2
plone.app.tiles 1.0.1
plone.app.blocks 1.0
plone.app.drafts 1.0a2
Products.TinyMCE 1.2.15
I have a Plone site with two rich text tiles on a page, created following Using tiles to provide more flexible Plone layouts.
The problem is that when editing the tiles, TinyMCE will not load.
In Firebug on the Net tab I see a whole slew of 404s that look like this:
http://example.com/en/front-page/##edit-tile//plugins/pagebreak/editor_plugin.js
By comparison, I know that the correct URLs should look like this:
http://example.com/portal_javascripts/MyTheme/plugins/xhtmlxtras/editor_plugin.js
When I set my portal_javascripts in Development Mode, it works, but when I turn Development Mode off, that's when I see this problem.
So apparently it's due to some kind of javascript conflict, but I don't know where to look for it.
I really need to solve this problem, so any help would be greatly appreciated!
Additional information:
When portal_javascripts has development mode turned off, the condition in this line is never true: https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L47
That's because the tiny_mce.js file is merged with other files and the name is randomized, and so looking it up by name will always fail. Consequently, the baseURL property of the tinymce object will not be set in init.
Instead, baseURL ends up being set here:
https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L8397
This is where the URL http://example.com/my-page/##edit-tile/ is used for baseURL.
I verified this by turning off merging and caching in portal_javascripts, but leaving development mode off. Then it works, because it finds tiny_mce.js by name.
Also, I found that when it fails, all of TinyMCE's plugins are added as explicit <script> elements in the head of the iframe (with the ##edit-tile URLs, which can't be loaded). By contrast, when it works, all the plugins are loaded here:
https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L8458
IOW, they are not added explicitly to the iframe as <script> elements.
(In case I wasn't clear, when I mention iframe, I'm talking about the tile's editing overlay, not TinyMCE's. There is an iframe inside an iframe....)
I'm trying to include simple code samples in the TinyMCE editor. It looks fine when I'm writing it and when it is saved in the MySQL database. But when loading it in the TinyMCE editor once again the HTML-tags seems to be executed, even though they are saved as HTML names and not the actual tags.
For example if I write
<b>test</b>
In the database this was exactly what was stored, but when loading it in the TinyMCE editor, it now looks like
<b>test</b>
And if this is saved and loaded one more time it turns into
test
So it seems like TinyMCE is executing the tags, even though they are not actual tags to begin with. Does anyone know why this is happening?
I have tried to add the pre-tag and code-tag around the code, but it seems to be ignored by TinyMCE. I've also tried to add
preformatted : true,
verify_html : false,
to the TinyMCE init-function.
Any help would be greatly appreciated.
Thanks.
From v3 documentation:
Removed in 3.4
This option enables or disables the built-in clean up functionality. TinyMCE is equipped with powerful clean up functionality that enables you to specify what elements and attributes are allowed and how HTML contents should be generated. This option is set to true by default, but if you want to disable it you may set it to false.
Notice: It's not recommended to disable this feature.
It might be worth mentioning that the browser usually messes with the HTML. The clean up not only fixes several problems with the browsers' parsed HTML document, like paths etc., it also makes sure it is a correct XHTML document, with all tags closed, the " at the right places, and things like that.
Example of usage of the cleanup option:
tinyMCE.init({
cleanup : true
});
I found out this is not a TinyMCE problem, this is just how textareas work. I used the PHP function htmlspecialchars() and everything is now working as intended.
<textarea><?=htmlspecialchars($content)?></textarea>