How to use wordpress editor - wordpress

- 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...

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

Adding TinyMCE plugins to symfony controllers

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']

numlist and bullist add <br> on save TinyMCE

I'm on a project where I need to use TinyMCE for textarea in wordpress.
The problem is when I save my code, TinyMCE add <br> around tags like <ol> or <ul> and I don't know how to fix that
There is my code for tinyMCE and the result I have :
tinymce.init({ selector:'.tiny',
plugins: "lists, link, paste",
menubar: false,
branding: false,
paste_as_text: true,
toolbar: "formatselect | bold italic | numlist bullist | blockquote | alignleft aligncenter alignright | link | removeformat | indent | outdent | undo redo",
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
lists_indent_on_tab: false,
fix_list_elements : false,
forced_root_block : ''
});
The result
Apparently you need more informations so there is :
1) Before I saved the page :
Before
2) After the save :
After
I really don't know why it does this...
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
These three lines are causing this behavior.

Symfony2 + tinyMCE Bundle - JustBoil.me don't show

I have Symfony2 project with TinyMCE Bundle installed. When I tried to install justboil.me image uploader (http://justboil.me/) the plugin doesn't show in TinyMCE, I don't get any errors, everything else is working. Here's my config
stfalcon_tinymce:
tinymce_jquery: false # set to TRUE after fixing the issue with loading queue
language: %locale%
external_plugins:
justboil:
url: "asset[/js/tinymce-plugins/justboil/editor_plugin.js]"
theme:
simple:
plugins:
- "justboil 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 justboil"
toolbar2: "print preview media | forecolor backcolor emoticons | stfalcon | example"
image_advtab: true
advanced:
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"
toolbar2: "print preview media | forecolor backcolor emoticons | stfalcon | example"
image_advtab: true
bbcode:
toolbar1: "bold,italic,underline,undo,redo,link,unlink,removeformat,cleanup,code,preview"
What am I doing wrong? It's the first time I user TinyMCE Bundle and justboil.me.
you need to copy your justboil.me plugin to tinymce plugins folder.
rename justboil folder to jbimages
here is example how to include plugin and configure button in toolbar
plugins : "preview,jbimages",
toolbar: "jbimages | bold italic underline | fontsizeselect",
hope this helps you

Resources