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');
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);
}
- wp_register_script( 'tinymce-min-js',
"//cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.1/tinymce.min.js");
wp_enqueue_script( 'tinymce-min-js' );
<textarea name="message"></textarea>
tinymce.init({
toolbar1: "code | preview | fullscreen | emotEventns | blockquote | cut copy paste | undo redo removeformat | save",
toolbar2: "table | image | link | charmap | hr | media | alignleft aligncenter alignright alignjustify | outdent indent",
toolbar3: "fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough | subscript superscript",
plugins: "code advlist fullscreen media preview table image link textcolor charmap emotEventns",
menubar: false,
width: 800,
height: 470,
resize: false,
fullpage: false,
selector: "textarea"
});
I have tried this but I am not getting editor .I want use editor for text area. Please try to solve this.
Thank you in advance
Try this code.
<script>
jQuery( document ).ready( function( $ ) {
tinymce.init({
toolbar1: "code | preview | fullscreen | emotEventns | blockquote | cut copy paste | undo redo removeformat | save",
toolbar2: "table | image | link | charmap | hr | media | alignleft aligncenter alignright alignjustify | outdent indent",
toolbar3: "fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough | subscript superscript",
//plugins: "code advlist fullscreen media preview table image link textcolor charmap emotEventns",
menubar: false,
width: 800,
height: 470,
resize: false,
fullpage: false,
selector: "textarea"
});
});
</script>
jQuery( document ).ready( function( $ ) {
tinymce.init({
toolbar1: "code | preview | fullscreen | emotEventns | blockquote | cut copy paste | undo redo removeformat | save",
toolbar2: "table | image | link | charmap | hr | media | alignleft aligncenter alignright alignjustify | outdent indent",
toolbar3: "fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough | subscript superscript",
//plugins: "code advlist fullscreen media preview table image link textcolor charmap emotEventns",
menubar: false,
width: 800,
height: 470,
resize: false,
fullpage: false,
selector: "textarea"
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.1/tinymce.min.js"></script>
<textarea></textarea>
<script>
</script>
Not sure where your trying to show the editor, but use the built in wp_editor function!
see here wp_editor
&
here tutsplus.com
$settings = array(
'wpautop' => false, // auto add p tags to paragraphs
'media_buttons' => false, // show or hide the media upload button
'textarea_rows' => 10, // how many rows you want in the text area
'teeny' => false // show or hide the compact editor view
);
$textAreaContent = 'get the data from database';
$editorID = 'id_of_the_editor';
wp_editor( $textAreaContent, $editorID, $settings );
this should produce a nice text editor like...
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'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>