I'm using docusaurus for our dev docs.
How to disable TOC?
Thanks.
Docosaurus has Markdown Frontmatter metadata fields for .md files where you will eventually make use of the hide_table_of_contents field and set it to true.
Your .md should look like:
---
hide_table_of_contents: true
---
# Markdown Features
My Document Markdown content
There does not seem to be a way to make the hide_table_of_contents setting default to true; you need to add it to the Front Matter for every document if you want to completely disable the ToC display.
Another approach to completely disable the ToC display would be to edit the css, adding:
.theme-doc-toc-desktop {
display: none;
}
I'm using tinyMCE in my angular2 app according to the guideline given here: https://www.tinymce.com/docs/integrations/angular2/
Now I would like as a drop target for ng2-dnd like this:
<textarea dnd-droppable (onDropSuccess)="itemDropped($event)" id="{{elementId}}"></textarea>
However, no event is fired. I suppose this has something to do with tinyMCE replacing the textarea with an iframe, but I'm not yet familiar enough with angular2 to understand how the following link could be applied here.
How to make tinymce textarea editor droppable?
Thanks in advance for any suggestions!
There are some issues that makes this not work.
Firstly, as mentioned, TinyMCE has its own elements including an iframe for rendering the actual editor. The iframe causes events in the editor not to bubble upwards.
Adding dnd-droppable to the texarea, which ends up being hidden, does not give any visible element to drop on.
Adding a div element around the textarea will give you a droppable area in the TinyMCE header, but unfortunately not in the editor. (due to the iframe).
However, using the TinyMCE built-in events, you can still use the editor as a drop-target. You also need to add the 'paste_data_images' attribute.
tinymce.init({
selector: '#' + this.elementId,
plugins: ['link', 'paste', 'table'],
skin_url: 'assets/skins/lightgray',
paste_data_images: true,
setup: editor => {
editor.on('drop', e => {
console.log(e);
});
}
});
Note that the drop event you receive is a standard drop-event which is not processed with dnd. I assume this is fine for your case, and if not you can turn to dnd documentation to process it further.
I am building a WYSIWYG page styling editor with jquery/javascript. I'm trying to provide a way to modify the :hover state of links so my users can change the color, size, weight, etc of links. I know how to apply styling to elements for their default state, but can't find any documentation on how to apply styling to an element :hover state.
Any help out there?
To currently apply anything I am doing the following:
$('#content a').css('color','#ffcc00');
I need to do something similar for a:hover. ie:
$('#content a:hover').css('color','#000');
If you want to make the change using javascript you can attach it to jQuery.hover().
Here's a full working example
$('a.link').hover(
function(){
$(this).css('color',$('input').val());
}
);
I built a WYSIWYG editor and I store the user defined settings in a db so instead of reloading the page after I save their change to the form I update the behavior with javascript.
you can use css like assert your element´s id is
"element1"
css :
#element1:hover {
background-color:pink;
}
I'm sorry if this question has been asked before, I've tried googling/looking on here/browsing the CKEditor forums and not come up with anything that I can seem to understand and implement (apologies, I'm not that great at this JavaScript stuff)
Basically, I want to add one custom option to the format dropdown list of CKEditor, it should create a span with a class like below:
<span class="custom-font"></span>
I've tried using the below in the "config.js" file, but it doesn't seem to work:
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div;span'
config.format_span = { element : 'span', attributes : { 'class' : 'cutsom-font' } };
Can anybody point me in the right direction here?
The "format" only deals with block level elements so you can't use that to add span tag around selected text. You need "style" to do that. To add to the default styles that CKEditor comes with add your style object in the styles.js. That's where the default styles are defined. Also, you need to add "name" attribute to the object.
{ name: 'Your custom style', element: 'span', attributes: {'class':'custom-font'} }
If you want to make a list of your own styles to replace defaults you can find details HERE.
According to the link you can also use your own .js file to define styles or use stylesheet to fetch css styles.
I am trying to set the content of a number of text editors on page load. I am not too familiar with TinyMCE and have inherited the code somewhat. Here is how I am initializing the editors -
tinyMCE.init({
// General options
mode: "exact",
elements: "txtContent1,txtContent2,txtContent3,txtContent4,txtContent5,txtContentRight1,txtContentRight2,txtContentRight3,txtContentRight4,txtContentRight5",
theme: "advanced",
plugins: "layer,table,save,advhr,advimage,advlink,insertdatetime,preview,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
// Theme options
theme_advanced_buttons1: "bold,italic,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,format,selectcut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,cleanup,help,code,",
theme_advanced_buttons2: "ComparativeFiguresTableButton",
//theme_advanced_buttons3: "ComparativeFiguresTableButton,tablecontrols,|,hr,|,sub,sup,|,print,|,ltr,rtl,|,fullscreen",
//theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
relative_urls: false,
document_base_url : "example.com",
remove_script_host: false,
setup: function(ed) {
// Add a custom button
ed.addButton('ComparativeFiguresTableButton', {
title: 'Comparative Figures Table',
image: 'images/icons/cumulativefiguresBtn.gif',
onclick: function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent('<p><strong>Comparative Figures</strong></p><table border="0" width="100%" cellspacing="0" cellpadding="0" style="font-size:12px; line-height:1.5em; font-family:Verdana, Arial, Helvetica, sans-serif;"><tbody><tr><td> </td><td><strong>Offered</strong></td><td><strong>Sold</strong></td><td><strong>Aggregate (€)</strong></td><td><strong>Average (€)</strong></td><td><strong>Median (€)</strong></td></tr><tr><td><strong>2009</strong></td><td>123</td><td>123</td><td>123,000</td><td>123,000</td><td>123,000</td></tr><tr><td><strong>2010</strong></td><td>123</td><td>123</td><td>123,000</td><td>123,000</td><td>123,000</td></tr></tbody></table><br clear="all" />');
}
});
}
Can anyone suggest the best way to set different html content for each editor on page load?
Thanks,
Tristan
From your config you have quite a few instances of TinyMCE on your page. In each, you have a button that allows the end user to insert some predefined content (a "Comparative Figures Table")
When you say you want to "set different html content for each editor on page load" I assume you mean you want to have each instance of TinyMCE load with the appropriate content (either some default or what you retrieved from your repository).
If that's the case then, as #russjman stated, each of the ID's in the elements config item refers to a TextArea/DIV on the page. All you need to do is put the appropriate content in those elements. Importantly, remember to HTML encode it.
For example
<textarea id="txtContent1">
<?php echo htmlentities("<p>This is the content from the first text area.</p>");?></textarea>
<textarea id="txtContent2">
<?php echo htmlentities("<p>This is the content from the second text area.</p><p><strong>Note</strong> This needed to be encoded using htmlentities in PHP</p>");?></textarea>
The other way to read your question is that you want the ComparativeFiguresTableButton to do something different in each instance of the editor. In this case you will need a different config for each element, each with a different value in the ed.selection.setContent() method
As #Thariama states, the best approach would be to create a simple plugin that adds a button and has a config parameter that is the content you want inserted when it's pressed.
Finally, if all you want to do is insert HTML fragments, then it may be worth checking out the template plugin.
I assume that you want set up TinyMCE for multiple textareas on the same page. The 'elements' variable should be doing what you are asking as long as they correspond to a textarea with an id.
<textarea id="txtContent1" ></textarea>
<textarea id="txtContent2" ></textarea>
Try creating your own plugin (it is pretty easy):
ed.onInit.add(function(ed){
ed.setContent('<p>my new content</p>');
}
Since every tinymce instance gets initialized using the same code - they all get the same content (right after the editor instance has loaded).
Alernative 1: I am not sure if the following init setting will work, but you might give it a try:
setup : function(ed) {
ed.setContent('<p>my new content</p>');
}
Alernative 2: Set the content of each textarea which gets transformated into a tinymce editor instance before tinymce.init gets called.