How to create a button in TinyMCE 4 that increments letter-spacing by 1px - tinymce-4

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>

Related

How can i add custom button to my tinyMCE in wordpress

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

Tinymce-angular: Editor Full screen issue

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

Uploading a file in TinyMCE

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;
};

TinyMCE - Did not get textbox value in code behind with ASP.NET

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

Yahoo.widget.Editor - How to configure font size of text

I am using the YUI Rich Text Editor (YAHOO.widget.Editor), and I got it working fine, except for one thing. I cannot figure out how to configure the font size of the text that I type in the editor box (input type="textarea"). I want that text to be 150%. I know that I need a CSS rule of the form:
some-YUI-related-selector {
font-size: 150%;
}
but I cannot figure out the identity of "some-YUI-related-selector".
I'd appreciate any help I can get.
Thanks, Jay
More information:
I want my web to display large fonts, so I used a CSS style for the div in question as follows:
div.newsform {
font-size:120%;
}
div.newsform input {
font-size:120%;
}
input#newsgoals {
font-size:150%;
}
The HTML page snippet in question is:
<div class="newsform">
<p>Some text</p>
<form>
<input type="text" name="sname" style="width:353px"/>
<input type="textarea" id="newsgoals" name="newsgoals" ></input><br/>
<input type="submit" value="Add" />
</form>
</div>
I bind the YUI Editor in a Javascript snippet at the bottom of the web page as follows:
<script>
var myNewSEditor = new YAHOO.widget.Editor('newsgoals', {
height: '300px',
width: '440px',
dompath: false,
animate: true,
css: YAHOO.widget.SimpleEditor.prototype._defaultCSS, // + 'html { font-size:130%; }',
// { css: YAHOO.widget.SimpleEditor.prototype._defaultCSS + 'ADD MYY CSS HERE' }
toolbar: {
titlebar: 'Write Your Goals Here',
buttons: [
{ group: 'textstyle', // label: 'Font Style',
buttons: [
{ type: 'push', label: 'Bold', value: 'bold' },
{ type: 'push', label: 'Italic', value: 'italic' },
{ type: 'push', label: 'Underline', value: 'underline' },
{ type: 'separator' },
{ type: 'select', label: 'Arial', value: 'fontname', disabled: true,
menu: [
{ text: 'Arial', checked: true },
{ text: 'Arial Black' },
{ text: 'Comic Sans MS' },
{ text: 'Courier New' },
{ text: 'Lucida Console' },
{ text: 'Tahoma' },
{ text: 'Times New Roman' },
{ text: 'Trebuchet MS' },
{ text: 'Verdana' }
]
},
{ type: 'spin', label: '22', value: 'fontsize', range: [ 9, 75 ], disabled: true },
{ type: 'separator' },
{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
{ type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true }
]
}
]
}
});
myNewSEditor.render();
</script>
The everything inside the div (class="newsform") renders the fonts at 120% large except the YUI Editor, which continues to render very small. If I used the web page without the YUI editor, the text area (input#newsgoals) renders properly at 150%.
I was able to configure colours and font sizes in the tool bar of the YUI Editor, but not in the text area box.
I even tried configuring the 'css:" attribute in the toolbar and then adding my CSS rule to _defaultCSS (as per the YUI Editor documents), but it didn't work.
Jay,
Dav Glass, the author of this component, provides great help to his users over at the YUI Library forums: http://yuilibrary.com/forum/
If you don't get an answer here, definitely try posting over there.
-Eric
Woohoo! Thanks Eric Miraglia. The pointer to Dav Glass' forum got me where I needed to go.
For some reason, I had found the css: configuration parameter which was correct, but I had done something else wrong and that caused it to fail. The correct answer is to put the following line where I have the css: when I call "new Yahoo.widget.Editor()" :
css: YAHOO.widget.SimpleEditor.prototype._defaultCSS + 'body { font-size:130%; background-color:red;color:white;}'
That was enough to get the font-size and editor background changed to what I want.

Resources