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;
};
Related
I want to add my shortcode button my tinyMCE editor
this is how my tinyMCE initiate
var tinymceSettings = {
selector: '.wfaq-rich-text',
height: 150,
theme: 'modern',
menubar: '',
statusbar: false,
branding: false,
plugins: 'link image media wordpress wpeditimage lists',
toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
image_advtab: false,
media_advtab: false,
image_dimensions: false,
media_dimensions: false,
};
if( $('.wfaq-rich-text').length && typeof tinymce != 'undefined' ){
tinymce.init(tinymceSettings);
}
I want to add my custom button which add shortcode [myshortcode att="30"] to my selected editor when it clicked
i make a plugin for TinyMCE
tinymce.create('tinymce.plugins.wfaq_plugin', {
init : function(ed, url) {
// Register command for when button is clicked
ed.addCommand('wfaq_insert_shortcode', function() {
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = ''+selected+'[linespace gap="30"]';
}else{
content = '[linespace gap="30"]';
}
tinymce.execCommand('mceInsertContent', false, content);
});
// Register buttons - trigger above command when clicked
ed.addButton('wfaq_button', {title : 'Insert shortcode', cmd : 'wfaq_insert_shortcode', image: false });
},
});
// Register our TinyMCE plugin
tinymce.PluginManager.add('wfaq_button', tinymce.plugins.wfaq_plugin);
My plugin is not initiate
I have solved this
var tinymceFaqSettings = {
selector: '.wfaq-rich-text',
height: 150,
theme: 'modern',
menubar: '',
statusbar: false,
branding: false,
plugins: 'link image media wordpress wpeditimage lists wfaq_plugin',
toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | wfaq_button',
image_advtab: false,
media_advtab: false,
image_dimensions: false,
media_dimensions: false,
setup: function (editor) {
editor.addButton('wfaq_button', {
text: 'Line Gap',
icon: false,
onclick: function () {
editor.insertContent('[linespace gap="20"]');
}
});
}
};
if( $('.wfaq-rich-text').length && typeof tinymce != 'undefined' ){
tinymce.init(tinymceFaqSettings);
}
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
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 tried the same approach used in the answer to How to create a button in TinyMCE 4 that increments font size but this doesn't seem to work for letter-spacing. Does anyone have a way to make this work?
Thanks
Replace every font-size by letter-spacing and it will work:
http://fiddle.tinymce.com/Z9eaab/6
<script type="text/javascript">
tinymce.PluginManager.add('example', function(editor, url) {
// Add a button that opens a window
editor.addButton('example', {
text: 'Increment font size',
icon: false,
onclick: function() {
var currentFontSize = new Number($(tinyMCE.activeEditor.selection.getNode())
.css('letter-spacing').replace('px','')); // <-------- here
currentFontSize = currentFontSize + 1;
tinymce.activeEditor.formatter.register('mycustomformat', {
inline : 'span',
styles : {'letter-spacing' : currentFontSize + 'px'}
}); // ^-------- here
tinymce.activeEditor.formatter.apply('mycustomformat');
}
});
// Adds a menu item to the tools menu
editor.addMenuItem('example', {
text: 'Example plugin',
context: 'tools',
onclick: function() {
// Open window with a specific url
editor.windowManager.open({
title: 'TinyMCE site',
url: 'http://www.tinymce.com',
width: 400,
height: 300,
buttons: [{
text: 'Close',
onclick: 'close'
}]
});
}
});
});
tinymce.init({
selector: "textarea",
plugins: "example",
toolbar: "example undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>