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);
}
Related
I'm using <editor *ngIf="defaultContent" [(ngModel)]='defaultContent' [init]='editorConfig'>
https://github.com/tinymce/tinymce-angular
this is my configuration below -
export const editorConfig = {
skin_url: '/assets/skins/lightgray',
theme: 'modern',
content_css: targetElt.getAttribute('href'),
height: 300,
branding: false,
// content_security_policy: 'script-src \'self\' \'unsafe-inline\'; connect-src \'self\'; img-src \'self\';' +
// 'style-src \'self\' \'unsafe-inline\';',
plugins: 'textcolor anchor link lists wordcount fullscreen hr code table', // template
hidden_input: false,
menubar: false,
toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify |' +
'numlist bullist outdent indent | paste | section | row | info | fullscreen | template | removeformat |' +
'undo redo | code | table',
templates: [
{
title: 'Some title 1', description: 'Some desc 1', content: '<div class="col-sm-12"><div class="row widget-sd">' +
'<div class="sd-img col-sm-3"><img src="https://image.flaticon.com/icons/svg/321/321718.svg"></div>' +
'<div class="col-sm-9"></div></div></div>'
}
],
table_default_attributes: {
'border': '0'
},
table_default_styles: {
'border-collapsed': 'collapse',
'width': '100%'
},
table_responsive_width: true,
table_advtab: false
}
When i click on editor full screen and then i click on browser back screen and again visited the editor screen then screen goes freeze, no scrollbar is appearing on my theme.
I have removed the .mce-fullscreen class on ngOnDestroy.
document.body.className =
document.body.className.replace('mce-fullscreen', '');
$('html').removeClass('mce-fullscreen');
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 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 below simple code, when I tried to get textbox value, it always blank.
ASPX
<asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine" CssClass="editor"></asp:TextBox>
function SetEditor() {
tinymce.init({
selector: "textarea.editor",
theme: "modern",
height: 450,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor"
],
toolbar: "insertfile undo redo | styleselect | fontselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
style_formats: [
{ title: 'Bold text', inline: 'b' },
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
{ title: 'Example 1', inline: 'span', classes: 'example1' },
{ title: 'Example 2', inline: 'span', classes: 'example2' },
{ title: 'Table styles' },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
]
});
}
SetEditor();
ASPX.VB
Dim content as string = txtComment.Text 'It always blank
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>