Our product is used by many corporate and government bodies.
Many of them are only allowed use IE and have security policies applied to their IE which they are not allowed adjust.
One such setting is the disabling of downloading web fonts.
We have work around in place to check if the font can be downloaded.
If not, we replace all <i> on the page with <img>.
var haveFont = detectFontIcons();
//Iterate over each icon on the page and replace if necessary
if (!haveFont)
$('[class^="mce-i-"]').each( function(e) {
console.log("Found element = ", this);
// Replace all <i></i> with <img>
....
}
}
This works fine for all our custom Html.
The Problem:
For some reason it will not work for tinyMCE <i> tags.
I have adjusted the class prefeix to allow for the TinyMCE 'mce-i-'.
It finds no elements in the DOM with 'mce-i' even though I can see them using firebug.
I have even set a timeout on the call to do this check, incase it was an issue with the DOM not been fully rendered yet. No luck.
Questions:
1: Any ideas on why no TinyMCE elements are not been found?
2: How can I update tinyMCE to use images directly instead of web fonts?
Thanks
I can't take credit for this, but I found a font-free, custom skin that replaces the fonts with images. I added the skin, updated my init method and it appears to work as I'd hoped.
It can be found here:
- https://pollyshaw.wordpress.com/2014/02/03/a-font-free-skin-for-tinymce-version-4/
- https://bitbucket.org/pollyshaw1/tinymce-4-lightgray-no-fonts-skin
Related
I am building a website with the Modx CMS.
Now i want to have multiple content area's on one page.
My solution: create an extra TV, set the TV with form customisation to the content, so the tv is under the content.
I created a template looking like this:
[[$top]]
<h1>[[*pagetitle]]</h1>
[[*content]]
[[!myCustomSnippet]]
[[*Other Content]]
[[$bottom]]
After creating the TV, i've set it's region to modx-resource-content.
The result:
As you can see, the text is messing with the CKEditor.
Somebody any ideas how to fix this?
(Using version 2.3.1-pl)
If you are looking to get TVs appear under the content textarea, it is better to use MODX system setting to that. Please goto Settings, and search for tvs_below_content and set it to Yes.
By doing this, the TVs will appear under the content textarea on single page instead of having their own separate tab.
Hopefully this helps.
I have a TYPO3 which strips any <p> tags from content I create when the RTE editor is enabled for the field in question before it saves it in the DB. And it seems I cannot find a way to disable this behavior with a TypoScript. As soon as I disable the RTE editor I can save <p> tags and they get correctly rendered in the frontend. They also get correctly rendered in the frontend when I simply add them directly in the database in the tt_content table in the bodytext field.
When I switch to the edit source mode of the RTE I see all <p> tags in place. Before and after a save (also they never make it to the DB) so it looks like they get converted to (linux) line breaks or something and get converted back to <p> tags when the editor loads them in the backend. But those line breaks of course have no effect to in the frontend.
I thought this behavior would be controlled by RTE.default.proc but everything there looks good to me (p is already in the allowed tags and there is no clue why it could be stripped). I've also tried to disable the RTE.default.proc.entryHTMLparser_db and RTE.default.proc.exitHTMLparser_db as I wouldn't mind it if the HTML content as you see it in the edit source mode of the RTE (so with RTE still enabled!) would not be touched at all - in fact I would prefer it - but this had no effect. On the other hand when I add tags to the allowed tags which weren't there before (like <button>) this works so the things I try to add to RTE.default.proc aren't ignored in general.
So how can I stop TYPO3 from stripping my <p> tags from RTE content or touching it at all? I'd prefer a solution with TypoScript but meanwhile I would also be happy about an ugly hack in a sys extension as long as it works...
I'm not sure if this is a bug or not but the solution to my problem lies in p.rmTagIfNoAttrib = 1. At least in my TYPO3 version (v6.1.7 and nearly only built in extensions) I cannot find this setting in the preset TypoScript of the page or the RTE editor so I'm guessing it defaults to 0. In my logic 0 means false so I'd say the default would read as "remove tag if there is no attribute?: no!".
However TYPO3 seems to work after its own logic. Adding the following statement to the page TS sloves my problem and <p> tags are preserved:
RTE.default.proc {
entryHTMLparser_db {
tags {
p.rmTagIfNoAttrib = 1
}
}
}
The reasons for this behavior are explained in the TYPO3 manual:
Many of the transformations performed back and forth in the TYPO3 backend date back to when it was a challenge to incorporate a RTE in a browser. It was then sometimes needed to fall back an a simple <textarea> where rich text had to be presented in a simple enough way so that editors could work with it with no visual help.
Two questions and maybe they are caused by the same thing/setting.
Using TinyMCE with full corporate account. Many of the publishers are just pasting HTML into the HTML Source Editor... we are just getting this going the results are very mixed.
So if someone has a well coded page it works well - as far as we think.
But if you create a page with a couple of (or one) open div tag. Holy cow! The editor can throw divs everywhere - 30 extra on one page someone sent me. Why is the editor changing content? Can we keep this from happening? If a publisher makes an HTML mistake we would rather that the mistake shows - not be scrubbed.
Also I noticed myself when creating menus that if you put in anything inside a link tag (like a div, ul, li, dd, dt, dl, h1-6... pretty much any tag) other than a span, that the editor will either push the tag content outside of the link tag or it will change the tag to a span.
http://www.tinymce.com/wiki.php/Configuration:Cleanup/Output
Looks like the verify html is the new setting. Will report back after testing.
David - I would have marked yours as right if you answered. Looks like that works for 3.4 and below.
For version 3, use
verify_html : false
From here http://archive.tinymce.com/wiki.php/Configuration3x:verify_html
There's a module to do this in Drupal land, but I've been frustrated with the hacks that've been necessary in Wygwam. What is the best way to go about implementing this in such a way that you don't need to totally override the default image handling in ChannelImages/Wygwam?
Assets is a good suggestion, but I believe Devdemon's channel images might be a better fit for the workflow you're suggesting.
http://www.devdemon.com/channel_images/
Clients can add (and see) a caption and more and it's fully integrated with Wygwam and other editors. Devdemon's support is also excellent.
The Assets module from Pixel & Tonic allows you to double-click on the image (or any other file) and add metadata. You then have access to the metadata in your templates.
Check the screenshot: http://pixelandtonic.com/assets
You can also add metadata using the native File Manager. Click the edit icon from the File Manager and you'll see a few fields. You can use the File Entries tag to access it.
http://expressionengine.com/user_guide/modules/file/file_tag.html
I typically use Matrix with one column for the image, one column for the caption, and if a link is needed another column for the link. This of course works best if the image is in a fixed location within your template.
On possible way to accomplish this that I have used is to run some jQuery that looks for images within a certain area, and if they have alt attributes, rewrite the image tag within a tag with a tag inside.
so:
jQuery(document).ready(function() {
$('#page-content > .wrapper img').each(function(){
if($(this).attr('alt') !== undefined && $(this).attr('alt').length > 0){
if(!$(this).parent().hasClass('content-image')){
$(this).replaceWith("<figure class='content-image "+$(this).attr('class')+"'>"+$($('<div></div>').html($(this).clone().attr('class',''))).html()+"<figcaption>"+$(this).attr('alt')+"</figcaption></figure>");
}
}
});
});
will do just that. It's looking within a #page-content div for img tags with alt attributes. And then rewriting it as
<figure><img src='....' .... /><figcaption>This is the text that was in the alt attribute</figcaption></figure>
Soooo, that kinda works. The only caveat is that you had better not use any double-quotes within your alt text, or it will break thangs. Not the cleanest of solutions, but a solution, nonetheless.
I have a number of web views in my app in which I need to be careful about allowing further HTML links.
I disallow links in the delegate method shouldStartLoadWithRequest. This works fine, except for one thing. In the web view, the links are still highlighted in blue. So the user naturally thinks they are active links, but when selected, I disallow the link from the delegate method. This leads to confusion for the user.
Is there a way for me to disable the link color, so text does not show as blue when it contains a link within a UIWebView?
Try injecting Javascript into the UIWebView to change the appearance of the links.
Removing the href from all anchors should clear the formatting.
Here's some Javascript to get you started if you need it:
for(a in document.getElementsByTagName("a")) { a.href= ""; }
This will do it:
self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
For swift 3:
Try removing the types you don't want to show as link from webView.dataDetectorTypes
webView.dataDetectorTypes.remove(UIDataDetectorTypes.all)