I'm having these options to configure my marked object but the tables are not getting rendered with proper css.
{
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
xhtml: false,
smartypants: true,
langPrefix: 'hljs language-',
highlight(code) {
return hljs.highlightAuto(code, ['html', 'javascript', 'java']).value;
},
}
Is there anything that I'm missing?
Is there a min.css file that I need to include in index.html to make this work and have proper css for tables?
The table is getting rendered as follows:
The corresponding markdown is:
| ID | Name| email |
|:----:|:----:|:----:|
| ... | ... | ... |
| ... | ... | ... |
| ... | ... | ... |
Including the below CSS will resolve the issue.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pixelbrackets/gfm-stylesheet/dist/gfm.min.css" />
But it may not be the best option for most of us as it has global styles which will affect your whole website.
To overcome this issue, consider using the appropriate CSS from here:
https://github.com/sindresorhus/github-markdown-css
https://cdnjs.com/libraries/github-markdown-css
It will allow you to apply styles only to the elements with the markdown-body class instead of affecting the whole website.
The problem got solved after including gfm.min.css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pixelbrackets/gfm-stylesheet/dist/gfm.min.css" />
Related
I'm using Microsoft's Fluent UI library to build a React application. For styling of my own components I switched to using their merge-styles library, mainly because it integrates nicely with Fluent UI theming and all of their components. (I'm still not a big fan of CSS-in-JS, mainly because hot reloading in plain CSS / SCSS is smoother, but that's another story).
I still have a lot of components using SCSS, that I want to refactor over time to also use merge-styles. This is no problem for my own components, but it is for third-party components, that are solely stylable via specific CSS classes (plain JavaScript components, wrapped by a thin React component). So in order to style these using merge-styles I would have to use something like mergeStyles, but with the possbility to force completely fixed CSS class names. I know it's possible to somehow define the shape of the class name, but not providing a completely fixed name, where no number for uniqueness is appended. Did someone ever try this and found a way to achieve this using merge-styles alone or writing a small helper for this case?
Finally came up with a somewhat hacky version myself, temporarily monkey patching Fluent UI's Stylesheet.getClassName:
export function mergeStyleSetsWithFixedNames<TStyleSet1>(
styleSet1: TStyleSet1 | false | null | undefined
): void;
export function mergeStyleSetsWithFixedNames<TStyleSet1, TStyleSet2>(
styleSet1: TStyleSet1 | false | null | undefined,
styleSet2: TStyleSet2 | false | null | undefined
): void;
export function mergeStyleSetsWithFixedNames<TStyleSet1, TStyleSet2, TStyleSet3>(
styleSet1: TStyleSet1 | false | null | undefined,
styleSet2: TStyleSet2 | false | null | undefined,
styleSet3: TStyleSet3 | false | null | undefined
): void;
export function mergeStyleSetsWithFixedNames<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4>(
styleSet1: TStyleSet1 | false | null | undefined,
styleSet2: TStyleSet2 | false | null | undefined,
styleSet3: TStyleSet3 | false | null | undefined,
styleSet4: TStyleSet4 | false | null | undefined
): void;
export function mergeStyleSetsWithFixedNames(
...styleSets: Array<IStyleSet | undefined | false | null>
): void {
const originalGetClassName = Stylesheet.getInstance().getClassName;
Stylesheet.getInstance().getClassName = (displayName: string): string => {
if (!displayName) {
throw new Error('displayName is not optional when making a fixed style registration');
}
// Taken from https://stackoverflow.com/a/449000/773339
if (!/^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$/.test(displayName)) {
throw new Error(`displayName ${displayName} has invalid characters`);
}
return displayName;
};
try {
mergeStyleSets(...styleSets);
} finally {
Stylesheet.getInstance().getClassName = originalGetClassName;
}
}
Example usage:
mergeStyleSetsWithFixedNames(
{ myClassName: { background: 'red' } },
{
myClassName: {
background: 'green',
':hover': { background: 'yellow' },
},
}
);
which will define these CSS rules in the document:
.myClassName { background: green; }
.myClassName:hover { background: yellow; }
I know that this is not really a clean solution, but it's working for me and I just wanted to share it with everyone. I'm still open to better solutions :-)
I have a vue app with symfony backend. I use tinyMCE to edit documents which are generated by mpdf. In mpdf twig content I want to add page footer on some pages, and somepages without footer so I creeated html tag to enable or disable this footer. My HTML of this custom tags looks like this:
<pagefooter
name="NotLastPageFooter"
content-left=""
content-center="{PAGENO}/{nbpg}"
content-right=""
footer-style="font-size:10px">
</pagefooter>
<pagefooter
name="lastPageFooter"
content-left=""
content-center="{PAGENO}/{nbpg}"
content-right=""
footer-style="font-size:10px">
</pagefooter>
<setpagefooter
name="lastPageFooter"
value="off"
/>
<setpagefooter
name="NotLastPageFooter"
value="on"
/>
Whenever I edit generated document via TinyMCE it deletes my html blocks provided by mpdf and edited documents have no page footer. Below my tinyMCE config:
<editor
#onKeyUp="onDocumentUpdate(document, index, $event)"
:value="editor"
entity_encoding="raw"
output-format="html"
:init="{
allow_conditional_comments: false,
allow_unsafe_link_target: true,
convert_fonts_to_spans : false,
keep_styles: true,
custom_elements: 'pagefooter,setpagefooter',
extended_valid_elements :'setpagefooter[name],setpagefooter[value],pagefooter[name],pagefooter[content-center],pagefooter[content-right],pagefooter[footer-style]',
height: 600,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor code',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help code',
}"
/>
I suspect you are not using extended_valid_elements correctly. You don't repeat the tag multiple times in the configuration. The documentation has working examples:
https://www.tiny.cloud/docs/configure/content-filtering/#extended_valid_elements
For example:
extended_valid_elements : 'img[class|src|border=0|alt|title]'
...or...
extended_valid_elements :'setpagefooter[name|value],pagefooter[name|content-center|content-right|footer-style]',
Note that you put all the attributes in one set of brackets. Here is an example that appears to work for your example content:
http://fiddle.tinymce.com/iehaab
I'm on a project where I need to use TinyMCE for textarea in wordpress.
The problem is when I save my code, TinyMCE add <br> around tags like <ol> or <ul> and I don't know how to fix that
There is my code for tinyMCE and the result I have :
tinymce.init({ selector:'.tiny',
plugins: "lists, link, paste",
menubar: false,
branding: false,
paste_as_text: true,
toolbar: "formatselect | bold italic | numlist bullist | blockquote | alignleft aligncenter alignright | link | removeformat | indent | outdent | undo redo",
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
lists_indent_on_tab: false,
fix_list_elements : false,
forced_root_block : ''
});
The result
Apparently you need more informations so there is :
1) Before I saved the page :
Before
2) After the save :
After
I really don't know why it does this...
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
These three lines are causing this behavior.
I just want to add an item to default tinymce config, something like this:
tinymce.init({
selector: "textarea",
plugins: "customimageupload",
toolbar: tinymce_default_toolbar + " customimageupload"
});
There is no way to set the toolbar based on the "default" toolbar. If you use the toolbar setting you need to explicitly mention all the items you want. From looking at the source code of the editor the default toolbar is:
var defaultToolbar = "undo redo | styleselect | bold italic | alignleft"
+ "aligncenter alignright alignjustify | "
+ "bullist numlist outdent indent | link image";
Do note that at least some of these options would need a plugin loaded before they appear (e.g. the list related buttons).
For future reference this information on the default toolbar is found in the following file: tinymce/themes/modern/theme.js
I'm trying to pass variable from tinyMCE to jbimages. What i have is:
tinymceInstance = tinymce.init({
selector: "textarea#desc",
theme: "modern",
skin: "light",
relative_urls: false,
width: 800,
height: 300,
relative_urls: false,
plugins: [
"link image preview hr anchor pagebreak ",
"searchreplace wordcount visualblocks visualchars code nonbreaking",
"directionality textcolor jbimages"
],
content_css: "css/content.css",
toolbar: "insertfile undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image jbimages | print preview media fullpage | forecolor | spellchecker",
myVariable: 12345
});
jbimages is a plugin to upload images. In config.php file in jbimages
I have the following code that is executed:
$config['img_path'] = '/images'; // Relative to domain name
$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path']; // Physical path. [Usually works fine like this]
How to retrieve variable myVariable from tinyMCE and use it in config.php. I tried a few things that I found on the web, but nothing seems to work.
Thanks in advance.
I think you will need to pass it trough a session variable using jQuery. Your tinymce runs on client side (your computer) while php runs on the server.
Take a look at this question and answers. You might find what your looking for there:
Setting session variable in php through jquery click event