Setting default font size in TinyMCE is failing - javascript

I am using TinyMCE and I want to set the default font-size to 12.
Here, I assigned a variable to the active TinyMCE editor, but it's not working...
HTML content:
<textarea id="text_message"></textarea>
JavaScript:
$("#text_message").tinymce({
// Location of TinyMCE script
script_url: '/static/app/a/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js'
});
var fontSize = 12;
tinyMCE.activeEditor.formatter.apply('fontSize',
{
value: fontSize
});

There's a couple of different event stages you should wait for:
The page is ready in some state. (tinyMCE.init() can also be used, depending on the situation.)
The editor has been initialized and is ready for you to being working on it.
The first can be accomplished using either:
$(document).ready()
Or:
$(window).load()
Both handle events related to the readiness of the page. $.ready() triggers when the DOM is available, $.load() in the case of window triggers when the page content has been loaded (such as inline img, script, and link sources). .ready() fires slightly before the other, but in many cases either will work.
Note, below I've got jQuery(function($){...}); which is a shortcut to $(document).ready(); and helps manage conflicts with other frameworks that use $ globally.
At the second stage you need to add an initialization event handler to your editor creation request, such as:
$.tinymce({ init_instance_callback: function(){ ... } });
In full:
$tiny.tinymce({
// ... other stuff here, comma-delineated
init_instance_callback: function(){
ac = tinyMCE.activeEditor;
ac.dom.setStyle(ac.getBody(), 'fontSize', fontSize);
}
// ... other stuff here, comma-delineated
});
Here is where you can set the display value for font-size (using the Javascript property of fontSize, since Javascript doesn't allow - in labels such as font-size). This waits for the editor you're adding to initialize and say "Hey, I'm here now". Once you get that notification of the vent firing, you can set the editor body (what ac.getBody() returns) to be font-size: 18px.
What this means is that the font-size will not be returned once you choose the save the editor content; it's above it in in the editor "body" (literally, the iframe's body element), in most cases (unless you choose the plugins : "fullpage" initialization option). So it's a "default", but does not get set explicitly within the content itself.
If you have Chrome or Firefox with Firebug add-on installed, watch the console on this fiddle:
http://jsfiddle.net/userdude/9PuUx/1/
Here is the working code demo and link to a fiddle demo (I use 18px to easily see the change):
jQuery(function a($){
var $tiny = $("#text_message"),
fontSize = '18px',
ac;
$tiny.tinymce({
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1 : "fontsizeselect,bold,underline,italic",
init_instance_callback: function(){
ac = tinyMCE.activeEditor;
ac.dom.setStyle(ac.getBody(), 'fontSize', fontSize);
}
});
});​
http://jsfiddle.net/userdude/9PuUx/
The tinyMCE documentation and API can be a bit confusing and lacking, and I'm not an expert in using it either, so I know there's perhaps four or five other ways to interpret what's going on and how to do this. Your mileage may vary. If you have an issue with the way I did this or it does not seem to do what you want or expect, just leave a comment and let me know.

Related

Electron: Prevent <style> tags in DOM from loading

Is there a way to remove all styling from an Electron webview before the page is shown?
So far, I can inject JS to remove all styling after the document is loaded:
document.addEventListener("DOMContentLoaded", function(){
document.querySelectorAll('link[rel="stylesheet"], style').forEach(elem => elem.disabled = true);
});
The problem here is that the styles will show for a brief moment (~1 second) before styling is removed.
I can also use the following in my Main class to remove all .css files prior to page load:
session.webRequest.onBeforeRequest({urls: ['https://*/*.css', 'http://*/*.css']}, function(details, callback) {
callback({cancel: true});
});
This, however, does not remove tags embedded in the DOM. For a better idea of what I'm trying to do, you can check out Firefox's "No Style" feature (View -> Page Style -> No Style).
Thanks in advance.
There are two ways I can think of to prevent this:
Give the webview a visibility:hidden style, and make it visible later.
Point to a forwarding proxy who will strip out inline as well as linked CSS
Number 1 sounds to me a quicker and more reliable solution, but I haven’t tried it out.
Let me know how it goes.

Why code in console is not work after filter interactions?

Recently, I have seen an amazing issue in a SPA web page. When I write a code using chrome developer console, it works once. When I change filter interactions, that code does not work.
Here is site link: https://www.butlins.com/latest-offers/prices.aspx?start=08/2017
My simple testing code is given below:
Thanks, it works but this code is work twice. Why?
function updateChanges(){
$("a#whatsOnLink").css({"position": "absolute" ,"margin-top": "110px", "margin-left": "-50px"});
$("p.latest-type").append("<p class='someText'><b>2 Adults and 2 Children</b></p>");
$("p.someText").css({"font-size": "12px","margin-top": "10px"});
$("p.latest-type").css({"font-size": "16px"});
$("a.button.bookingEngine.button-red").css({"margin-top": "-10px"});
$('.latest-offer-price').each(function(el){
var data = $(this).text().substring(1);
$(this).text('£'+(data*4));
});
}
$(document).ajaxSuccess(function(){
setTimeout(updateChanges,30)
});
updateChanges();
When I write code in console and press enter, append and calculation is made twice.
Furthermore, I change filter interactions, DOM element flashes with violate colour. I don't know why it is caused.
So, What is the reason for behaviour it ?
Why does DOM element flash with violate colour when filter interaction ?
Have any solution to fix it ?
Try inserting a new <style> tag instead. If it is really an SPA then the rule should stay there after the filters are applied. If the page does a full reload you would need to run new code after each new page loads
let rule ='a.button.bookingEngine.button-red{background-color: blue}'
$('head').append($('<style>', {text:rule}))
The css rules for that page have very specific selectors.
An alternative is to hook into their jQuery ajax and use ajaxSuccess global which will fire after any ajax request succeeds
function updateBtns(){
$("a.button.bookingEngine.button-red").css({"background-color": "blue"})
}
$(document).ajaxSuccess(function(){
setTimeout(updateBtns,30)
});
updateBtns()

Add class to dynamically generated HTML

I'm working to use custom checkbox styles with a checkbox which is dynamically generated by javascript for the Google Identity Toolkit. For example, we add this div:
<div id="gitkitWidgetDiv"></div>
And the Google Identity Toolkit script generates new html for that div.
I need to add a class to the HTML which is added by the javascript without any action by the user and I'm struggling to make it work. For example, here is my code:
$("#gitkitWidgetDiv").on('ready', ".gitkit-sign-in-options label", function() {
$(this).addClass('checkbox');
});
I've tried switching 'ready' for a few other options and also using the livequery plugin, but nothing is working for me. It works if I use an active event like 'click,' but I can't figure out how to do this when the page loads. Could someone please help? Thanks!
Modern browsers (including IE11) support mutation obervers. You can use one to monitor the parent node of the div that will be added. When the div has been added, just add the class.
Here's something I made which comes in handy in annoying cases like this where it's difficult to tell when the element you need has finished loading in: https://gist.github.com/DanWebb/8b688b31492632b38aea
so after including the function it'd be something like:
var interval = 500,
stopTime = 5000,
loaded = false;
setIntervalTimeout(function() {
if($('.dynanicElementClass').length && !loaded) {
$('.dynanicElementClass').addClass('checkbox');
loaded = true;
}
}, interval, stopTime);
It's not perfect and I'm sure there are better solutions out there but in most cases like this it does the job.

CKEditor widget: how do I attach css in onLoad

I'm writing a CKEditor widget. As I am trying to make it easily distributable, I want to make my css external. While this syntax works:
CKEDITOR.plugins.add('myplugin', {
requires: 'widget',
icons: 'myplugin',
init: function(editor) {
CKEDITOR.dialog.add('myplugin', this.path + 'dialogs/myplugin.js');
var self = this;
editor.on('contentDom', function() {
editor.document.appendStyleSheet(CKEDITOR.getUrl(self.path + 'css/style.css'));
});
}
});
I found that CKSource uses onLoad: function(editor){} in their image2 widget to attach css. This looks more canonical than my code. I'm getting editor = undefined though. What's the catch?
Update:
I'm using the framed option and I definitely want to stay DRY through .appendStyleSheet() to user-facing page as well as to the wysiwyg framed editor. However, I still have problem with init/beforeInit:function(editor), where editor does not seem to have document property populated at that very moment. When I do window.ed = editor though, then I can access the window.ed.document in the console once the page is ready. So, is there any kind of deferred promise going on there? Maybe I'm complicating things, but I definitely want to append a distributable stylesheet and remove it easily.
I found this working:
beforeInit: function(
var ccss = CKEDITOR.config.contentsCss;
if(typeof ccss == 'string'){
ccss = [ccss];
}
ccss.push('/css/style.css'); // <-- my css installed at website root
CKEDITOR.config.contentsCss = ccss;
console.log(CKEDITOR.config.contentsCss);
},
While the issue with isolated css stylesheet might sound over-complicated, I want to achieve an easily demoable state without the need to touch existing files.
Note that in the image2 plugin stylesheet is not added to editor instance, but using CKEDITOR.addCss:
CKEDITOR.plugins.add( 'image2', {
...
onLoad: function( editor ) {
CKEDITOR.addCss( ' ... ' );
}
} );
It is a mistake that the editor is specified as an argument - it always will be null.
If you want to add stylesheet manually using document.appendStyleSheet, then do it on init, or beforeInit, not on onLoad.
Altough, you should know that contentDom will be fired multiple times for one document, e.g. when setting data. So in your case stylesheet would be added many times. Therefore, if you want to add a stylesheet for the framed editor (the one using iframe), you can use config.contentsCss, and if you want to add it for inline editor, then you can freely call:
CKEDITOR.document.appendStyleSheet( ... );
In plugin's onLoad (will be called only once). So most likely you'll want to do both things, to handle inline and framed editors.

Modifying element from google.translate.TranslateElement results

I'm attempting to embed the very convenient Google Translate translate element into a webpage, which is super simple and works great, but I need to change the default text that displays in the resulting HTML:
Having worked with a number of Google APIsand js libraries, I figured this would be no problem as it would almost certainly be configurable, but having looked around for some time I can't find any reference to a property that let's you set this, and documentation in general seems to be pitiful. The basic code is:
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
var translator = new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
multilanguagePage: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Having dispaired of being able to set this as a property in the when I create the translator, I decided to hack it and use an onDOMNodeInserted listener to just change the resulting HTML once it had loaded into <div id="google_translate_element"></div>. I'm using jQuery here, so my code is:
$(document).ready(function(){
$('#google_translate_element').bind('DOMNodeInserted', function(event) {
$('.goog-te-menu-value span:first').html('Translate');
});
})
And here's where things get interesting. Chrome loads everything perfectly and does the innerHTML substitution beautifully. Internet Explorer (8) ignores the DOMNodeInserted listener altogether and the page loads as if the jQuery function was never called. Firefox (10) appears to load fine (but with no translate element at all) and then freezes, begins gobbling up memory, and crashes.
Any thoughts on how I can get this innerHTML substitution to work? If you're aware of a displayLabel : "Translate"-like property that is of course preferred, but barring that (and a really ugly setTimeout hack) is there any way I can get this to work?
You can do it using CSS, only it will not change the label when a language is selected.
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child{display: none;}
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before{content: 'Translate'}
Like you I can't find out how to customize the gadget via init params but it appears possible to write your own customized gadget in HTML then invoke g.translate functionality on it. See http://www.toronto.ca/ (page footer). I'm afraid you will have to do some more digging to see exactly how it's done.
This use of g.translate is also referenced here. Unfortunately the discussion is quite old now but hopefully still relevant.
I'm using this code which checks every 3ms if the translate module has been yet loaded into the page; if so, it then updates the text and clears the interval check after.
function cleartimer() {
setTimeout(function(){
window.clearInterval(myVar);
}, 1000);
}
function myTimer() {
if ($('.goog-te-menu-value > span:first-child').length) {
$('.goog-te-menu-value > span:first-child').html('Translate');
cleartimer();
}
}
var myVar = setInterval(function(){ myTimer() }, 300);

Categories