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']
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 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'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'}
]
});
I have Symfony2 project with TinyMCE Bundle installed. When I tried to install justboil.me image uploader (http://justboil.me/) the plugin doesn't show in TinyMCE, I don't get any errors, everything else is working. Here's my config
stfalcon_tinymce:
tinymce_jquery: false # set to TRUE after fixing the issue with loading queue
language: %locale%
external_plugins:
justboil:
url: "asset[/js/tinymce-plugins/justboil/editor_plugin.js]"
theme:
simple:
plugins:
- "justboil 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 justboil"
toolbar2: "print preview media | forecolor backcolor emoticons | stfalcon | example"
image_advtab: true
advanced:
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"
toolbar2: "print preview media | forecolor backcolor emoticons | stfalcon | example"
image_advtab: true
bbcode:
toolbar1: "bold,italic,underline,undo,redo,link,unlink,removeformat,cleanup,code,preview"
What am I doing wrong? It's the first time I user TinyMCE Bundle and justboil.me.
you need to copy your justboil.me plugin to tinymce plugins folder.
rename justboil folder to jbimages
here is example how to include plugin and configure button in toolbar
plugins : "preview,jbimages",
toolbar: "jbimages | bold italic underline | fontsizeselect",
hope this helps you