I'd like Headings to have a pre-defined font. How can I do this?
Any help, much appreciated. 🙂
TinyMCE has a range of formatting options available, and the formatting includes elements like headings. The docs have some examples -> https://www.tiny.cloud/docs/configure/content-formatting/
tinymce.init({
selector: 'textarea',
formats: {
heading: { inline: 'h1', styles: { 'font-weight': 'bold', 'color': 'blue' } }
}
});
You can use CSS in the key: value format, I believe in a comma separated list. Check the section in the docs on block formats, and inline formats, since each one has different implications to the text in the editor.
!Important! UPDATE:
Using the above method will style the headings, but won't create an easy-to-use default font. Another and better way to manage this is to use the content_css option to setup a default style for those heading elements (docs).
The first solution above would mean if you had a style update, you would need to change every header individually. However, any style changes to the content_css option would change each heading tag instance.
Example
tinymce.init({
selector: 'textarea',
formats: {
content_css: "pathway/to/style.css",
}
});
Related
I can customize the default attribute of table using the following code:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "table",
menubar: "table",
toolbar: "table",
table_default_attributes: {
border: '1'
}
});
For this code table will be look like: <table border="1">. Now if I want to change this border value, I can. Pretty simple. But if I want to completely remove this attribute, how can I? Meaning I want a table without any attribute like: <table> only. Any idea?
You can use two TinyMCE configuration options to set the default styles and attributes that are placed on a table:
table_default_styles: {},
table_default_attributes: {},
Details on these can be found on the documentation page for the table plugin:
https://www.tiny.cloud/docs/plugins/table/#table_default_attributes
Here is an example (on TinyMCE Fiddle):
http://fiddle.tinymce.com/Fvgaab
I need to do the following whith TinyMCE:
extended_valid_elements: a[href|onclick=window.open(this.href,'_system','location=no');return false;]
When doing this the character "," causes me problems and does not appear the default "onclick".
You can't put full code in extended_valid_elements - per the documentation (https://www.tinymce.com/docs/configure/content-filtering/#extended_valid_elements) its expecting attributes and (optionally) their default text. The JavaScript is not allowed and is messing up the parsing algorithm.
In extended_valid_elements you can reference onclick but you can't put the actual JavaScript in there.
If all you want is to allow JavaScript in your href values the allow_script_urls setting may do what you need without modifying extended_valid_elements:
https://www.tinymce.com/docs/configure/url-handling/#allow_script_urls
I want to add a markdown editor for users to post their answers into my page. I've found TinyMCE but there is a problem with it: I don't know how to implement markdown editor with TinyMCE.
Is there anybody who has experience with this? Please show me how to setup a markdown editor with it.
It looks like the Text Pattern Plugin can do this:
This plugin matches special patterns in the text and applies formats or executed commands on these patterns.
…
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: 'textpattern',
textpattern_patterns: [
{start: '*', end: '*', format: 'italic'},
{start: '**', end: '**', format: 'bold'},
{start: '#', format: 'h1'},
{start: '##', format: 'h2'},
{start: '###', format: 'h3'},
{start: '####', format: 'h4'},
{start: '#####', format: 'h5'},
{start: '######', format: 'h6'},
{start: '1. ', cmd: 'InsertOrderedList'},
{start: '* ', cmd: 'InsertUnorderedList'},
{start: '- ', cmd: 'InsertUnorderedList'}
]
});
Note that the plugins key here fixes a typo in the upstream documentation, which uses plugin instead.
TinyMCE does not currently support a markdown mode with their editor, however I just recently was in the situation where I needed a markdown editor and wanted to use tinymce for it.
You will have to add a markdown package to your project. I recommend MarkdownIt, which I found from this list of recommendations. You can use any one of the recommendations from the link, just change the MarkdownIt usage with your markdown library in the code examples below.
I do not recommend Chris' approach because it's not very user friendly - the user needs the ability to save text with markdown in it and expect it to render the proper element when it is rendered. To have to press space or enter after each element to watch it change into a WYSIWYG style element is not user friendly. As such, if you take this approach you should actually remove the textpattern plugin and the textpattern_patterns configuration.
What you will want to do is to configure the setup function in your tiny config to listen to change events, and then pass the content through your markdown parser before returning the value to whatever needs it. You will also want to set menubar, toolbar, and statusbar to false.
var editorHandlerTimeout;
var MarkdownIt = require('markdown-it')
tinymce.init({
el: 'el',
menubar: false,
toolbar: false,
statusbar: false,
setup: function (editor) {
editor.on('paste change input undo redo', function() {
// the timeout is to throttle how often this runs while typing
clearTimeout(vm.editorHandlerTimeout);
vm.editorHandlerTimeout = setTimeout(function () {
var md = new MarkdownIt() // or any other markdown library
var contentFromEditor = editor.getContent()
//MarkdownIt adds its own paragraph tags, so strip the ones from tinymce
if (contentFromEditor.startsWith('<p>'))
contentFromEditor = contentFromEditor.substring(3)
if (contentFromEditor.endsWith('</p>'))
contentFromEditor = contentFromEditor.substring(0, contentFromEditor.length - 4)
var contentFromMdIt = md.render(contentFromEditor)
// markdown-it inserts the html encoded values for these (this might be a bug), so we will want to replace them since we will be rendering as html
contentFromMdIt = contentFromMdIt.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/&/g, '&')
// time to do something with your rendered markdown text
// im in vuejs, so I emit the result as 'input' which allows my markdown editor to work as a v-model
vm.$emit('input', contentFromMdIt)
})
})
})
})
Also, it is highly recommended to add a preview to your markdown editor, as the majority of users are unfamiliar with markdown. Make the preview feature simple and accessible, and just render their output as html so they can see what is happening.
Seems TinyMCE has a Markdown plugin for their editor now
https://github.com/vaidhyanathan93/Markdownfortinymce/blob/master/markdown/plugin.js
https://www.tiny.cloud/labs/markdown/
Tiny Markdown is a markdown syntax plugin for TinyMCE, providing
flexible rich text and markdown content creation options for authors,
and also provides robust, reliable markdown output for developer
projects.
By default TinyMCE (4) has a "Paragraph â–¼" dropdown, and if you click on it you get a list of formatting options ("Paragraph", "Heading 1", etc.).
I'd like to be able to do two things. First, I want to change the options and their names (eg. to "Normal" and "Heading"), and I found the block_formats option which does exactly that:
block_formats: 'Normal=p;Heading=h1'
However, I'm stuck on thing #2: adding classes to the generated elements. Instead of plain <h1> elements, when someone picks "Heading" I want to generate a <h1 class="heading">.
I thought maybe this would work:
block_formats: 'Normal=p;Heading=h1.heading'
... but it doesn't, and I haven't been able to find any other option that would let me do this. Then again, the TinyMCE documentation isn't always the easiest place to find answers, which is why I came here.
Does anyone know how I configure TinyMCE to have a "Paragraph â–¼" dropdown with customized names AND custom classes on the generated elements?
I never did find a way to do this, so what I wound up doing instead was remove the block format drop-down entirely and replace it with the (custom) format dropdown. In other words I:
removed the formatselect from the toolbar1 config (removing the un-configurable normal formatting dropdown)
added the custom format dropdown (styleselect) to the toolbar1 config
defined a style_formats config entry with my custom styles
The style_formats config looked like this:
style_formats: [
{
title: 'Header',
inline: 'span',
classes: 'someClass',
styles: {someStyle: '5px'}
},
], // next style would go here
There were only two downsides of this approach. First, the dropdown now says "Formats", and I don't seem to be able to configure that anywhere. However I do have a single formatting dropdown, with only the options I want, and those options add the desired classes to the formatted text, so the dropdown's name isn't a big deal.
The second issue was that TinyMCE uses an <iframe>, which prevents it from using our stylesheet. I could have written a stylesheet for TinyMCE and then appended it to the <iframe> (or used some TinyMCE mechanism, if there is one) ... but I'm lazy so I just used style: entries for each custom format to define the style.
I have a page with multiple textareas to be replaced with TinyMCE.
Some of the Textareas take arabic text, some english text. The textareas have the dir-attribute set correctly according to the input they should receive.
How can I set the directionality of the different Editors according to their textareas?
I can set the directionality for all instances like this:
$('textarea.advanced_editor').tinymce({
â‹®
plugins : "…,directionality,…",
directionality: "rtl",
â‹®
});
But how can I set different direction for each editor?
In this case you will need different tinymce configurations - one with directionality set to rtl the other with the default.
UPDATE:
This is possible. You need to call this using the correct editor id
tinymce.get('my_editor_id').getBody().dir ="rtl";
In the end I came up with this:
$('textarea.advanced_editor').tinymce({
â‹®
plugins : "…,directionality,…",
directionality: "ltr",
â‹®
setup: function (ed) {
ed.onInit.add(function(ed) {
var direction = $('[name="'+ed.id+'"]').attr('dir');
ed.getBody().dir = direction;
});
},
â‹®
});
I used the events-based solution like #Thariama supposed and referenced back to the dir-attribute, which I know to be always set correctly.
I edited toolbar of TinyMCE toolbar editor and there I gave both the options ltr and rtl over there to use.
Did like toolbar1: "ltr rtl | undo redo" in the function LoadTinyMCE()
So here user has both the options of writing as ltr and rtl comes as a toolbar. Did it in version 4.1.7.