In TinyMCE 3x we used have setting something like below:
theme_advanced_buttons1:
theme_advanced_buttons2:
etc ..
This can be used in tinymce.init to group icons.
how can I do the same in tinymce 4? Is there a way to manually change/add grouping through tinymce.init?
Thanks
In TinyMCE 4 you can pass an array to the toolbar configuration setting to allow for multiple rows of toolbar buttons.
https://www.tinymce.com/docs/configure/editor-appearance/#toolbar
https://www.tinymce.com/docs/configure/editor-appearance/#usingmultipletoolbars
For example:
tinymce.init({
selector: 'textarea',
toolbar: [
'undo redo | styleselect | bold italic | link image',
'alignleft aligncenter alignright'
]
});
Related
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 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 have a help button in TinyMCE 4. When I click on the button nothing happens. In 3.1.2 I would get /iw/tinymce/jscripts/tiny_mce/themes/advanced/about.htm coming up.
I guess I did not find the proper documentation on how to implement this button in version 4. I tried to find in the TinyMCE docs and in threads here. Does anyone see what I am doing wrong in my Fiddle?
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc'
],
toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons | codesample | help',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
],
setup: function (editor) {
editor.on('load', function(e){
console.log('start debugging');
});
}
});
I have a TinyMCE 4.5 widget in my fiddle
This function was removed from TinyMCE 4 - the fact that adding the button to the toolbar still makes a button show up is likely an oversight/defect in TinyMCE 4.x.
In my brief testing the help button has been non-functional in all releases of TinyMCE 4 back to 4.0.
If you want that button to function I would open a request on the TinyMCE GitHub:
https://github.com/tinymce/tinymce/issues
I can't seem to set the default configuration for stfalcon's tinymce bundle. I followed the instructions given here to no avail.
This is what I have in my config.yml:
stfalcon_tinymce:
theme:
advanced:
plugins:
- "advlist autolink lists link image charmap print preview anchor"
- "searchreplace visualblocks code fullscreen"
- "insertdatetime media table contextmenu paste"
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
image_advtab: true
and instead of having the toolbar and plugins displayed for the textarea, I have nothing. Somehow, configuring it as I've done messes with tinymce's initialization. Does someone know where my mistake is?
Update
Looking at Firefox's debugger tool, it seems like the bit of code:
var settings = (typeof options.theme[theme] != 'undefined')
? options.theme[theme]
: options.theme['simple'];
settings.external_plugins = settings.external_plugins || {};
in init.standard.js is what causes the problem. settings is undefined in settings.external_plugins = settings.external_plugins || {};. I don't know what causes this. Initializing tinymce "manually" works though. I encounter no problem if instead of using the twig command, I simply put this on the html page:
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
Well, after tinkering with init.standard.js, I've found the solution. Apparently, you have to pass a data-theme attribute to the textarea you want to tinymceize that corresponds to the theme you intend to have a default configuration for in config.yml. Otherwise, init.standard.js doesn't match your configuration seetings to its settings variable.
In my case, the theme configured was advanced so I just did this in my form builder:
$builder
// ...
->add('text', 'textarea', array(
'attr' => array(
'class' => 'tinymce',
'data-theme' => 'advanced'
)
))
// ...
That did the trick.
Here's brief checklist what you have to do:
∙ copy the resources to your web folder php app/console assets:install
∙ add this {{ tinymce_init() }} at the bottom of your page (in javascripts section)
∙ add tinymce selector to your form attributes:
<?php
$builder->add('yourtext', 'textarea', array(
'attr' => array(
'class' => 'tinymce',
)
));
∙ and configure the tinymce selector in your conf:
# app/config/config.yml
stfalcon_tinymce:
#...
selector: ".tinymce"
Try to check out whether you've done it.
Update
Also take a look at web browser console and fix the problems if any.
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