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
Related
In ASP.NET MVC I am using TinyMCE 4.7.8 (2018-02-26). I want to upload a Pdf/Doc/Excel file and add an anchor for it at editor HTML. I am able to upload the image and get back the uploaded url to add image at editor this works fine.
I am looking answer for two things a) Is link plugin is the correct way to upload the pdf and doc into system since I have not found any specific plugin for file handling in community edition! b) In my method filePicker I am creating dynamic html to handle the posted file, again it this approach is just a work around or there any way in TinyMCE to handle file type?
tinymce.init({
selector: ".TinyMCEEditor",
branding: false,
height: 500,
theme: "modern",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview | forecolor backcolor emoticons",
file_browser_callback_types: 'file image',
automatic_uploads: true,
images_upload_url: '/Content/UploadContentImg',
file_picker_types: 'file image',
file_picker_callback: function(callback, value, meta) {
debugger;
// Provide image and alt text for the image dialog
if (meta.filetype == 'image') {
imageFilePicker(callback, value, meta);
}
// Provide file and text for the link dialog
if (meta.filetype == 'file') {
filePicker(callback, value, meta);
//callback('mypage.html', { text: 'My text' });
}
// Provide alternative source and posted for the media dialog
if (meta.filetype == 'media') {
//callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' });
}
},
templates: [{
title: 'Test template 1',
content: 'Test 1'
},
{
title: 'Test template 2',
content: 'Test 2'
}
]
});
function imageFilePicker(callback, value, meta) {
};
function filePicker(callback, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
//input.setAttribute('accept', 'image/*');
input.click();
debugger;
};
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 can't get the keyup event fired. My code is:
tinymce.init({
selector: "textarea",
theme: "modern",
paste_as_text: true,
plugins: [
"advlist autolink lists charmap preview hr anchor pagebreak",
"visualblocks visualchars insertdatetime nonbreaking",
"directionality paste textcolor"
],
menubar:false,
statusbar:true,
toolbar: "bold italic underline | alignleft aligncenter alignright alignjustify | removeformat | forecolor backcolor | bullist numlist | hr | charmap",
setup : function(ed) {
ed.on('init', function() {
console.log('Perfectly works ');
});
ed.on('keyup', function(ed, evt) {
console.log('Never called ');
});
},
});
As explained in the code it perfectly executes the function associated to init event, I don't see any error in the console but when I hit keys in the editor the function associated to keyup is not calld.
Any idea?
In my testing the keyup function works fine in TinyMCE 4.1.8 - see this attached TinyMCE Fiddle:
http://fiddle.tinymce.com/JGfaab/2
Key up is processed each time in both Chrome and Safari when testing on a Mac.
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've install TinyMCE v4.1.9 text editor. so I found hyperlink and Image buttons ara missing, so I insert the plugins for both of them and they both appear but, they just appear only if I add one plugin (when I add Image --> appear | when I add hyperlink --> appear | when I add both, when the hyperlink is the last, link button appear and image disappear and if the image is the last, same thing, the image button appear and link disappear).
here are my codes:
tinymce.init({
selector: "textarea#core",
language : 'ar',
directionality : 'rtl',
plugins: "autoresize",
fontsize_formats: "14px",
content_css : "css/custom_content.min.css",
theme_advanced_font_sizes: "10px,12px,13px,14px,16px,18px,20px",
font_size_style_values : "10px,12px,13px,14px,16px,18px,20px",
plugins: "link",
plugins: "image",
theme: 'modern'
help please
this is the right answer
tinymce.init({
selector: "textarea#core",
theme: "modern",
language : 'ar',
directionality : 'rtl',
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"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
});