So, I use CKEDITOR in my application. I really like it, except one nasty thing - the toolbar disappears totally when I have some huge text and have to scroll down. So, when I scroll back there is no toolbar at all. I found a plugin
which is supposed to solve this problem. So, this is what I did - I added this plugin to my application like
<script type="text/javascript" src="/ckeditor/plugins/fixed/plugin.js"></script>
The script is loaded ok - I see it in the console. Then in the application itself I do this:
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'fixed'
};
var editor = CKEDITOR.replace( document.getElementById("code") , {
enterMode: CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,
autoParagraph: false,
height: height
});
But this plugin does not help - when I scroll down, he toolbar still disappears. So, I need some help. PS. I'm using CKEDITOR 4.
You don't have to manually add the js file itself, you just need to define the configuration properly.
Test this:
var editor = CKEDITOR.replace( document.getElementById("code") , {
enterMode: CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,
autoParagraph: false,
height: height ,
extraPlugins : 'fixed'
});
I have a page with jstree in it. It's loading the tree content from the server in JSON format.
$("#" + this.treeComponentID).jstree({
plugins: ["themes", "json_data", "ui", "types"],
themes: {
theme: "classic"
},
json_data: {
"ajax": {
"url": this.dataLoadURL
}
},
ui: {
select_limit: 1
}
});
Every 20s I call
$('#tree').jstree("refresh", -1);
to refresh the tree since the content might change on backend. This all works fine except I got a ~200ms flash of the component in Chrome. This is very annoying if you look on the page and it flashes every 20s.
So I was wondering whether there is some way to avoid this flash. What is even more strange is that IE8 doesn't flash. It just repaint the tree silently and smoothly.
I'm using the jsTree 1.0-rc3 which is presented on the jstree webpages in demos.
Any help will be much appreciated.
Instead of doing a refresh, would it help to do a redraw?
$('#tree').jstree("redraw");
I've successfully changed the default font inside the editor using the documentation here but that leaves me with a problem. The original default font no longer works in the font drop down list.
Original default: Verdana
New default: MyCustomFont
When I type into the editor I see my MyCustomFont font by default. If I try to change that to Verdana (original default) nothing happens. I can change it to any font family except Verdana. I noticed also that when I select MyCustomFont in the drop down list the content gets surrounded with a span with inline styles. This does not happen with the original default font (hence why nothing happens).
It seems to me like there's a key piece of documentation missing - how to tell the editor (the font feature in particular) that the font I've defined by default in the css is the default font.
I've Googled quite a bit but had no results. Everybody else seems to be settling for the documentation mentioned above. Am I the only one having this problem? If not, please help! :)
Please note, the answers to this question do not answer my question.
maybe too late but...
$('.tinymce').tinymce({
setup : function(ed) {
ed.onInit.add(function(ed) {
ed.execCommand("fontName", false, "Arial");
ed.execCommand("fontSize", false, "2");
});
}
});
EDIT
For TinyMCE 4, as #jason-tolliver and #georg states, the syntax is:
ed.on('init', function (ed) {
ed.target.editorCommands.execCommand("fontName", false, "Arial");
});
// Init TinyMCE
$('#content').tinymce({
setup : function(ed)
{
ed.on('init', function()
{
this.getDoc().body.style.fontSize = '12px';
this.getDoc().body.style.fontFamily = 'serif';
});
}
});
For those who init timymce with tinymce.init({ and cannot implement Radius Kuntoro answer directly.
My init looks like
tinymce.init({
selector: '#editor',
menubar: false,
plugins: ['bbcode'],
toolbar: 'undo redo | bold italic underline',
setup : function(ed)
{
ed.on('init', function()
{
this.getDoc().body.style.fontSize = '12';
this.getDoc().body.style.fontFamily = 'Arial';
});
},
});
For TinyMCE 4.6.3 this seems to be the way to go:
tinymce.init({
setup: function (ed) {
ed.on('init', function (e) {
ed.execCommand("fontName", false, "Verdana");
});
}
});
As refer to TinyMce website you can embed style sheet within your init function like this :
tinymce.init({
content_css : 'path/to/style/sheet',
body_class: 'define-class-name-without-dot-at-the-first'
});
It works and you do not need to setup anything.
check it out on tinyMCE webpage
Some of you will be working within the confines of the TinyMCE EditorManager, which offers two events: AddEditor and RemoveEditor. When a new instance of TinyMCE is being spawned and AddEditor is fired, the editor isn't actually initialized and so calling getDoc() will return null.
What you need to do is create an init listener within.
tinyMCE.EditorManager.on('AddEditor', function (event) {
... other code ...
event.editor.on('init', function() {
this.activeEditor.getDoc().body.style.fontSize = '12px';
this.activeEditor.getDoc().body.style.fontFamily = 'Times New Roman';
});
... other code ...
}
});
This is at least true as of version 4.3.8
I had difficulties with all solutions here in tinymce 4.x
I couldn't change neither fontsize nor fontname. After trying out a lot I found the solution.
First of all I can confirm Jareds answer, thank you for it! Those two commands will not work by default settings:
tinymce.EditorManager.execCommand("fontName", false, "12px");
tinymce.EditorManager.execCommand("fonSize", false, "Arial");
The default fontsize size is "pt", not "px." So either define displayed fontSize as "px" by [fontsize_formats][1] or just handover the desired size with "pt". With tinymce.EditorManager.execCommand tinymce is also not happy. You have to handover the whole font-family like 'arial, helvetica, sans-serif'. These commands worked on my site:
tinymce.EditorManager.execCommand("fontName", false, "12pt");
tinymce.EditorManager.execCommand("fonSize", false, "arial, helvetica, sans-serif");
None of the above solutions worked for me. So, somehow I managed to fix it using custom logic.
editor.on('change', function (e) {
let node = e.target.selection.getNode();
if (node.nodeName === 'P' || node.parentNode.nodeName === 'BODY') {
editor.dom.setStyle(node, 'font-size', "16px");
}
tinymce.triggerSave(); // to keep your textarea synced with above changes
});
This worked for me:
Look for functions.php in root of your themes directory inside /wp-content/themes/yourtheme/, open it up and add one line after php tag.
add_editor_style('custom-editor-style.css');
In the same directory, create a file called custom-editor-style.css with the following lines in it:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
* { font-family: 'Open Sans', sans-serif, Arial, Helvetica;}
Go ahead, clear your browser's cache and this is what you’ll see.
Refer link: https://blog.phi9.com/wordpress-editor-and-its-font/
I tried doing this way.
I use TinyMce 5 and inside the editor there is a body tag generated.
While initialising the editor I set the forced_root_block:'div', which means everytime something is being typed my root element will always be a div.
let tinyMceBody = tinymce.activeEditor.getBody();
let divs = $(tinyMceBody).children('div');
for(let i =0; i<divs.length; i++) {
divs[i].style.fontFamily = 'Nunito';
}
So I try catching all the root elements and set default styles to them.
When you edit something, tinymce surrounds whatever you have edited with a span block with a style attribute, so what ever you manually edit in the editor will be overrided. If you don't edit the text in editor then the default styling that we have attached on the parent element forced_root_block:'div' will be retained.
Try formulating a solution as per your custom req. using the above mentioned technique. Seems like the library doesn't have a prominent internal support for this. z
P.S:-
tinymce.activeEditor.dom.setStyles(tinymce.activeEditor.dom.select('div'), {'font-family' : 'Nunito'});
applies to all divs , but I wanted to apply only for the first level children of the body tag and not all divs( includes children of children). Otherwise this could be a solution too.
For tinymce 5 you can add fullpage plugin to plugins array then new key called
fullpage_default_font_family but i don't know if it works the same way for old versions or not.
This is the Answer. It work for me:
STEP # 1:
Look for functions.php in root of your themes directory inside /wp-content/themes/yourtheme/, open it up and add one line after php tag.
add_editor_style('custom-editor-style.css');
STEP # 2:
In the same directory, create a file called custom-editor-style.css with below lines in it
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
* { font-family: 'Open Sans', sans-serif, Arial, Helvetica;}
Go ahead, clear your browsers cache and this is what you’ll see.
Tony Ngo
Fist off, been lurking for years, hopefully this post will be helpful to more than just me.
So I have a jstree that is generated for my site using very a small amount of JavaScript. Ideally, I would like for the page to load and show the 2 top folders only.
However, currently the page displays all of the names of the folders, subfolders, files, etc. for about 0.5 seconds before switching to the proper view. There are probably about 200 items in the tree structure
I added a manual tree.bind which does a "close_all", and I also tried hiding the DIV that it eventually appears in. Even though I put the code to show the DIV after I create the tree, it still shows everything before hiding itself.
I am using jsTree 1.0-rc3
Anyone have any thoughts?
<script type="text/javascript">
(document).ready(function () {
var tree = $("#sharepointHierarchy");
tree.bind("loaded.jstree", function (event, data) {
tree.jstree("close_all");
});
$("#sharepointHierarchy").jstree({
'plugins' : [ "themes", "html_data", "types", "ui" ],
'core' : {/* core options go here */},
});
document.getElementById("sharepointHierarchy").style.display="block";
});
</script>
I was able to mask this issue by adding the following code to the end of the function(). It is fairly straight-forward and simply gives the table time to load before showing it.
setTimeout(function() {
$("#sharepointDiv").show();
},1200);
I hope this helps someone else also.
I have the following jQuery call that correctly creates and loads a DataTable on my page. This only works, however, when this script is part of the HTML file because my sAjaxSource URL is composed using a template substitution value: ${company.name}.
When I move this code to a separate .js file it still runs and creates the DataTable. Since the template substitution never runs on the include .js file, however, the sAjaxSource is not set and the table doesn't load properly.
What is the proper way of handling this? Do I have to include at least this javascript function in the HTML file itself?
function() {
$('#fund-contacts-table').dataTable( {bFilter: false,
bInfo: false,
bJQueryUI: true,
bPaginate: false,
bStateSave: false,
bSort: false,
bAutoWidth: false,
aoColumns: [ {"sTitle" : "Date", "sWidth" : "20%"}, {"sTitle" : "Our Team", "sWidth" : "20%"}, {"sTitle" : "Client Team", "sWidth" : "20%"}, {"sTitle" : "Note", "sWidth" : "40%"} ],
sAjaxSource: "/contact/${company.name}/"} );
});
I am imagining that the template substitution is done at the time of the HTML page being rendered. As long as you set this as a variable during the template rendering phase, you should be able to pass it into your DataTables initialization.
Before your external .js is loaded,
<script>
var contactSource = "/contact/${company.name}/";
</script>
And then in your initialization in your external js:
sAjaxSource: contactSource;
My best answer so far (but I'll leave the question open to see if someone can really solve it):
Instead of including my script file using <script src=. . . /> in my HTML, I'm including it this way:
<script>
<%include file="../js/fund_page.js" />
</script>
where %include is a Mako directive that reads the specified file, performs template processing on it, and includes it in the HTML file. It appears to be intended for HTML fragments, but works here too.
Unfortunately, that means that I'll lose the optimization to not download the script file if it hasn't changed. On the other hand, the reason this is an issue is that the script file does change from page to page, so that may not be a major loss.