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
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 am working in a landing-page and newsletter manager for a blog. We are using symfony with tinymce bundle(stfalcon) for wysiwyg editor.
The customer wants to copy paste the full structure of a landing-page or newsletter from a template designer (or create with Mailchimp) directly into TinyMce, so according with the documentation, I should add the fullpage plugin in the config of symfony.
The problem is that we want to keep the layout we have designed for the blog and keep only the fullpage plugin active in landing Controller or Newsletter Controller.
I have found this tutorial, but is for symfony 1.4, and we are working actually in 2.8 (yes, I know we should update to 3.4 but is legacy code)
There is any way to load the Tinymce plugin on render the form?
Finally I have find the answer (I left here for documentation),
You can create as many themes in Symfony config.yml as you like, so first is duplicate the desired theme and add the plugins you need:
advanced:
convert_urls: false
file_browser_callback: 'elFinderBrowser'
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"
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | forecolor backcolor | stfalcon | example"
image_advtab: true
templates: "/admin/newsletter/templates/templatelist"
entity_encoding : "raw"
fullpage:
convert_urls: false
file_browser_callback: 'elFinderBrowser'
plugins:
- "advlist autolink lists link image charmap print preview hr anchor pagebreak"
- "searchreplace wordcount visualblocks visualchars code fullscreen fullpage"
- "insertdatetime media nonbreaking save table contextmenu directionality"
- "emoticons template paste textcolor"
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | forecolor backcolor | stfalcon | example"
image_advtab: true
templates: "/admin/newsletter/templates/templatelist"
entity_encoding : "raw"`
After that, in the controller, change the theme you are rendering tinymce with:
->add('content', 'textarea', [
'label' => 'Contenido',
'required' => false,
'attr' => ['class' => 'tinymce', 'data-theme' => 'fullpage']
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
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'
]
});
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