On my website I wanna show syntax highlighted code to readers. I am using Tinymce for editing purposes. I am using Mezzanine CMS and I dunno much about TinyMCE. The problem is when I select preformat for wrapping my code snippet, TinyMCE wraps it with <pre> tags but highlight.js only highlightjs <pre><code> my-code-snippet </code></pre> tags i.e. It will only highlight code that is wrapped by pre as well as code tags.
My current tinymce_setup.js file is like this.
function CustomFileBrowser(field_name, url, type, win) {
tinyMCE.activeEditor.windowManager.open({
file: window.__filebrowser_url + '?pop=2&type=' + type,
width: 820, // Your dimensions may differ - toy around with them!
height: 500,
resizable: "yes",
scrollbars: "yes",
inline: "yes", // This parameter only has an effect if you use the inlinepopups plugin!
close_previous: "no"
}, {
window: win,
input: field_name,
editor_id: tinyMCE.selectedInstance.editorId
});
return false;
}
if (typeof tinyMCE != 'undefined') {
tinyMCE.init({
// main settings
mode : "specific_textareas",
editor_selector : "mceEditor",
theme: "advanced",
language: "en",
dialog_type: "window",
editor_deselector : "mceNoEditor",
// general settings
width: '700',
height: '350',
indentation : '10px',
fix_list_elements : true,
remove_script_host : true,
accessibility_warnings : false,
object_resizing: false,
//cleanup: false, // SETTING THIS TO FALSE WILL BREAK EMBEDDING YOUTUBE VIDEOS
forced_root_block: "p",
remove_trailing_nbsp: true,
external_link_list_url: '/displayable_links.js',
relative_urls: false,
convert_urls: false,
// callbackss
file_browser_callback: "CustomFileBrowser",
// theme_advanced
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "",
theme_advanced_buttons1: "bold,italic,|,link,unlink,|,image,|,media,charmap,|,code,|,table,|,bullist,numlist,blockquote,|,undo,redo,|,formatselect,|,search,replace,|,fullscreen,",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_path: false,
theme_advanced_blockformats: "p,h1,h2,h3,h4,pre",
theme_advanced_styles: "[all] clearfix=clearfix;[p] small=small;[img] Image left-aligned=img_left;[img] Image left-aligned (nospace)=img_left_nospacetop;[img] Image right-aligned=img_right;[img] Image right-aligned (nospace)=img_right_nospacetop;[img] Image Block=img_block;[img] Image Block (nospace)=img_block_nospacetop;[div] column span-2=column span-2;[div] column span-4=column span-4;[div] column span-8=column span-8",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
theme_advanced_resizing_use_cookie : true,
theme_advanced_styles: "Image left-aligned=img_left;Image left-aligned (nospace)=img_left_nospacetop;Image right-aligned=img_right;Image right-aligned (nospace)=img_right_nospacetop;Image Block=img_block",
advlink_styles: "intern=internal;extern=external",
// plugins
plugins: "inlinepopups,contextmenu,tabfocus,searchreplace,fullscreen,advimage,advlink,paste,media,table",
advimage_update_dimensions_onchange: true,
// remove MS Word's inline styles when copying and pasting.
paste_remove_spans: true,
paste_auto_cleanup_on_paste : true,
paste_remove_styles: true,
paste_remove_styles_if_webkit: true,
paste_strip_class_attributes: true,
// don't strip anything since this is handled by bleach
valid_elements: "+*[*]",
valid_children: "+button[a]"
});
}
What changes should I make in my tinymce setup so that when I click on preformat I get <pre><code> </code></pre> tags ?
Found the answer in highlight.js docs. Over here http://highlightjs.org/usage/ under custom initialization I found it. Curently I have put
<script>$(document).ready(function() {
$('pre').each(function(i, e) {hljs.highlightBlock(e)});
});</script>
just before the closing body tag. This will pickup the code found inside pre tags and highlight it.
Related
I am playing a little bit with the jqGrid setup and some things aren't clear to me like the proper usage of pager. The idea is to add some custom buttons to the top and bottom bars.
This is the code I have been playing with:
$("#order_logs").jqGrid({
url: 'api_order_logs',
datatype: "json",
colModel: $('#colmodel').data('values'),
width: 980,
height: 300,
pager: true,
toppager: true,
hoverrows: true,
shrinkToFit: true,
autowidth: true,
rownumbers: true,
viewrecords: true,
rowList: [25, 50, 100],
data: [],
rownumWidth: 100,
iconSet: "fontAwesome",
gridview: true,
sortable: {
options: {
items: ">th:not(:has(#jqgh_grid_cb,#jqgh_grid_rn,#jqgh_grid_actions),:hidden)"
}
},
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
cell: '',
repeatitems: false
},
cmTemplate: {autoResizable: true, editable: true},
autoResizing: {compact: true, resetWidthOrg: true},
autoresizeOnLoad: true,
forceClientSorting: true
}).jqGrid('navGrid', '#gridpager', {
edit: false,
add: false,
del: false,
search: false,
refresh: true,
refreshstate: "current",
cloneToTop: true
}).jqGrid('navButtonAdd', '#gridpager', {
caption: 'Export',
title: 'Export',
buttonicon: 'fa fa-download',
onClickButton: function () {
// #todo
}
}).jqGrid('navButtonAdd', '#gridpager', {
caption: 'Email',
title: 'Email',
buttonicon: 'fa fa-envelope-o',
onClickButton: function () {
// #todo
}
}).jqGrid('navButtonAdd', '#gridpager', {
caption: 'Print',
title: 'Print',
buttonicon: 'fa fa-print',
onClickButton: function () {
// #todo
}
});
With the usage of pager: true the grid display as follow:
Meaning no custom buttons at top nor bottom.
With the usage of pager: #gridpager the grid display as follow:
Meaning only custom buttons on the bottom bar but not on the top one.
Certainly I am missing something but I can't find what that is. I've been checking some docs here, here and last here but still not clear to me how to deal with this in the right way.
In addition to this if you notice I am trying to use the fontAwesome iconset but images are missing, should I add the CSS file on my templates?
PS: I am using the latest version of jqGrid-free
It's very easy. Which sense is repeating the same value '#gridpager' as jqGrid option, as the parameter of navGrid and navButtonAdd?
jqGrid can contain maximal two pagers: bottom pager and top pager. The top pager can be created by usage of the option toppager: true. You don't use the option toppager: true. Then the only legal value of the first parameter of navGrid and navButtonAdd will be '#gridpager'. Correct?
Now, one can use getGridParam method to get any option of jqGrid after the grid is created. For example one can get the value of pager parameter using
var pagerIdSelector = $("#order_logs").jqGrid("getGridParam", "pager");
Free jqGrid allows to use
}).jqGrid('navGrid', { ... });
instead of
}).jqGrid('navGrid', '#gridpager', { ... });
It tests the type of the first parameter. If the type of the first parameter isn't "string" then it uses $(this).jqGrid("getGridParam", "pager") to get the value.
Now we can remind about the possibility to use toppager: true to create top pager. In the case jqGrid creates an empty <div> for the top pager, it generates, it assigns unique id for the <div>. Finally jqGrid changes the value of toppager parameter from true to the value like #order_logs_toppager, there the first part of the id (order_logs) is the id of the grid. Free jqGrid allows to use true as the value of pager parameter. In the case one can simplify the HTML and remove unneeded empty div
<div id="gridpager"><div>
If one uses both pager: true and toppager: true options and uses navGrid or navButtonAdd without pager parameters then jqGrid places the buttons on both pagers. If you need to place some buttons only on one pager then you can use the code like below. If place some buttons on both pagers and then place another buttons on specific pagers:
var $grid = $("#order_logs");
$grid.jqGrid({
...
pager: true,
toppager: true,
...
});
// create nav bar and place Refresh button on both pagers
$grid.jqGrid('navGrid', {
edit: false,
add: false,
del: false,
search: false,
refreshstate: "current",
});
var bottomPagerIdSelector = $grid.jqGrid("getGridParam", "pager"),
topPagerIdSelector = $grid.jqGrid("getGridParam", "toppager");
// place Export button only on bottom pager
// and Email button only on top pager
$grid.jqGrid('navButtonAdd', bottomPagerIdSelector, {
caption: 'Export',
title: 'Export',
buttonicon: 'fa fa-download',
onClickButton: function () {
// #todo
}
}).jqGrid('navButtonAdd', topPagerIdSelector, {
caption: 'Email',
title: 'Email',
buttonicon: 'fa fa-envelope-o',
onClickButton: function () {
// #todo
}
});
The final remarks. You use forceClientSorting: true option, which works only in combination with loadonce: true. jqGrid can sort all the data only it it has all data.
The value of sortable parameter is wrong. The selectors like jqgh_grid_cb contains "grid" in the middle, which should be the id of the grid. In your case it could be "order_logs" instead of "grid" (jqgh_grid_cb shoule be replaced to jqgh_order_logs_cb).
I have a grid that when the page is changed the scrollbar is still at the bottom of the grid. Is there a property in the jqgrid for it to automatically scroll back to the top of the grid.
Here are the properties for my grid:
options = {
datatype: 'local',
colModel: [],
colNames: [],
height: 'auto',
autowidth: true,
forceFit: true,
shrinkToFit: typeof(settings.shrink) != "undefined" ? false : true,
gridview: true,
recordpos: 'left',
scroll: false,
viewrecords: true,
hoverrows: false,
loadonce: true,
toppager: 'pager',
pagerpos: 'right',
pginput: false
}
After some more reasearch I found the answer. JQGrid also has a pagerOptions.onPaging event which allows you to execute code when changing pages.
Here is the fix I used.
pagerOptions.onPaging = function () {
window.scrollTo(0, $("#header").height());
};
When the page changes it scrolls the page up until the header.
I have to set the editor height to 40px, please look to this problem, i tried many times. is there any minimum height for tinymce iframe?
I got a solution to this problem
tinymce.init({
selector: "textarea",
plugins: ["paste autoresize"],
icon: false, menubar: false, statusbar: false, toolbar: false, autoresize_bottom_margin: 2, object_resizing: false,
paste_as_text: true, force_br_newlines: false, forced_root_block: false, autoresize_min_height: 40, autoresize_max_height: 300})
it achieved by setting forced_root_block: false
There's not a minimum. Find in code height and define it like this -> height : 40
I am currently struggling to get a FancyBox popup to work with a few embedded tinyMCE text areas. I have looked all over the internet, including pretty much every post on here and remain unsuccessful.
The FancyBox will load correctly and display the multiple tinyMCE text areas (the button toolbars all display correctly). The problem is that it will not actually display any text in the textboxes, and the actual text box is not editable.
My tinyMCE init code is:
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "Cause",
// Theme options - button# indicated the row# only
theme_advanced_buttons1: "bold,italic,underline,strikethrough,separator,bullist,numlist,separator,outdent,indent,separator,undo,redo",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,separator,code,separator,radspell",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "none"
});
And my call to FancyBox is:
$('#PopupAdd').fancybox({
titlePosition: 'none',
autoscale: false,
showCloseButton: false,
centerOnScroll: false,
onComplete: function () {
tinyMCE.execCommand('mceAddControl',true,'Cause');
},
onCleanup: function () {
tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause');
}
});
I have tried nearly every variation of the above code I can think of. If anyone has any new ideas as to how to approach this, it would be greatly appreciated!
Update:
My HTML is:
<lcmp:LittleButton ID="AddStatusButton" Tooltip="Add a new Status." OnClick="addStatusPopup(); return false;" />
Which creates a button that when clicked calls
function addStatusPopup()
{
$('#PopupAdd').trigger('click');
}
I had exactly the same problem. What worked for me was to run the tinyMce.init after the FancyBox opened.
I don't see how your loading the embedded text areas (inline, ajax, iframe?) but try adding a "type"
$('#PopupAdd').fancybox({
titlePosition: 'none',
type: 'iframe' // Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
autoscale: false,
showCloseButton: false,
centerOnScroll: false,
onComplete: function () {
tinyMCE.execCommand('mceAddControl',true,'Cause');
},
onCleanup: function () {
tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause');
}
});
Not seeing a fiddle or example makes it difficult but one could do a manual call like this:
$("#PopupAdd").click(function() {
$.fancybox({
href: '#PopupAdd',
type: 'inline',
titlePosition: 'none',
autoscale: false,
showCloseButton: false,
centerOnScroll: false,
onComplete: function () {
tinyMCE.execCommand('mceAddControl',true,'Cause');
},
onCleanup: function () {
tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause');
}
});
});
All the above code looks complicated to me, keep things simple and use this tutorial - WordPress TinyMCE Editor Tips | How to Add Custom Buttons, Styles, Dropdowns & Pop-ups. All the working code examples are there to download and customise as well.
https://www.gavick.com/blog/wordpress-tinymce-custom-buttons/
The snippet below will add a "popup" to your tinyMCE editor .
'
(function() {
tinymce.PluginManager.add('gavickpro_tc_button', function( editor, url ) {
editor.addButton( 'gavickpro_tc_button', {
title: 'My test button',
type: 'menubutton',
icon: 'icon gavickpro-own-icon',
menu: [
{
text: 'Custom Headline',
onclick: function() {
editor.windowManager.open( {
title: 'Insert h3 tag',
body: [{
type: 'textbox',
name: 'title',
label: 'Your title'
}],
onsubmit: function( e ) {
editor.insertContent( '<h3>' + e.data.title + '</h3>');
}
});
}
}'
i have this problem: in my site there are textareas with tinymce and i can see all textarea right, but when i open colorbox within textarea, this not inherit tinymce properties.
This is my code to open colorbox:
$("#edit_item"+val.iditem).colorbox({
href: $(this).attr('href'),
data: data,
onComplete: function(){ setup_tiny(); }
});
and this is my function 'setup_tiny':
function setup_tiny(){
tinyMCE.init({
mode : "exact",
elements : "description",
width : "40%",
height: "200",
// General options
theme: "advanced",
// Theme options
theme_advanced_buttons1: "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2: "bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,image,cleanup,help,code",
theme_advanced_buttons3: "hr,removeformat,separator,sub,sup,separator",
theme_advanced_buttons4: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_resizing: true
});
}
I have just tried this way, after load colorbox:
tinyMCE.execCommand('mceFocus', false, 'the_textareas_id_here');
tinyMCE.execCommand('mceRemoveControl', false, 'the_textareas_id_here');
but it doesn't work as well.
I have also tried to import tinymce plugin from this site 'http://mktgdept.com/jquery-tinymce-plugin' and also this not work.
How can I load tinymce inside colorbox?
Thanks
I've solved my issue using the following code:
function setup_tiny(textarea_name){
tinyMCE.init({
mode : "exact",
elements : textarea_name,
// General options
theme: "advanced",
// Theme options
theme_advanced_buttons1: "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2: "bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,image,cleanup,help,code",
theme_advanced_buttons3: "hr,removeformat,separator,sub,sup,separator",
theme_advanced_buttons4: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_resizing: true
});
}
$("#edit_item"+val.iditem).colorbox({
href: $(this).attr('href'),
data: data,
onComplete: function(){
setup_tiny("new_description");
}
});
In this way i invoke my function 'setup_tiny' with id textarea passed as argument.
Problem might be that your are calling
$("#edit_item"+val.iditem) on the hidden textarea element. Tinymce is not the textarea! It is a contenteditable iframe. You may try to do the following:
$(tinymce.get('description').getBody()).colorbox({
href: $(this).attr('href'),
data: data,
onComplete: function(){ setup_tiny(); }
});