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'}
]
});
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
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 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