Ext.ux.form.TinyMCETextArea - a text area with integrated TinyMCE WYSIWYG Editor.

[Qtx]

Hi,

please tell me, which toolbar button do you mean exactly:

An ExtJS toolbar with a button that access the WYSIWYG like insertion of a place holder in my demo example

or

An TinyMCE toolbar with a button bound to a TinyMCE plugin

[HTK]

Okay like configuring my tinymce_textarea like this:

xtype: "tinymce_textarea",
            height: 400,
            fieldLabel: 'Content',
            tinyMCEConfig: {
                      plugins: [mycustom],
                      theme_advanced_buttons1: [mycustom]
            } 

I want to activate my own plugin with a configuration like this. Like I enable the standard plugins. I want to maybe show my own button or just extend one of the standard buttons like table creation with my own functionality + I don´t want to place my custom stuff under tinymce/plugins but anywhere else. I hope that makes it a bit clearer.

[Qtx]

ОK,

the creation of a plugin such as mine can be divided into the following steps:

Step 1
Derive your class from a class which you want to extend and provide the alias names for your plugin, e.g.

Ext.define('Ext.ux.form.TinyMCETextArea', {

  extend: 'Ext.form.field.TextArea',
  alias: ['widget.tinymce_textarea', 'widget.tinymce_field'],

Step 2

Define its special properties and set thier default values, e.g.

  /*
  This properties enables starting without WYSIWYG editor.
  The user can activate it later if he wants.
  */
  noWysiwyg: false,
  
  /*
  Config object for the TinyMCE configuration options
  */
  tinyMCEConfig: {},

Step 3

Define time point when you should initialize your plugin. It is difficult to find out the correct time point and it depends on the specific of you plugin. That means, on which event you should start initialization of your plugin.

Step 4

Implement an init function in your plugin and call it with passing the special parameters while initialization.

[richardhell]

¿is it posible to add upload imagen from TinyMCE and that show window manager images?

thanks

[123lal]

Hi Dear.

Am using this editor because the htmleditor is not fulfilling my requirement , with html editor we cant add/ insert an image in the text area , so that i used this tiny-MCE editor, now i got an error in the the editor while clicking the image button to load an image in to it the back ground also get blurred , and got some error message in the firebug console.

Please help me to solve it
here am attaching an image which i got from the fire bug

and my working environment

am using : ExtJS 4.0.7
Browser : Firefox 10.0.2
OS : Windows Xp

Ans Sencha Team , And Tiny MCe Developer i liked the Editor we used to post this reply ,

Thanks in advance
Lal

The erro image is :Tiny Mce 1.jpg

[Qtx]

Hi,

please try this demo example

http://www.point-constructor.com/tinyta_demo/

whether you receive this error or not.

It looks like some JS scripts fail to be included or blocked by a protection tool.

Regards

[123lal]

Thank You Dear

I tried the above link, it is working perfect.

And sorry i forgot to include line of code i used in mt view file . in side the container

i added this in side an item {},

xtype        : 'tinymce_textarea',
fieldStyle    : 'font-family: Courier New; font-size: 12px;',

noWysiwyg    : false,
tinyMCEConfig: tinyCfg2,

id            : 'german',
name        : 'german',
value        : 'German Text'

And defined variable

var tinyCfg2 = {
        // General options
        theme : "advanced",
        plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist",

        skin: "extjs",
    inlinepopups_skin: "extjs",
    
    // Original value is 23, hard coded.
    // with 23 the editor calculates the height wrong.
    // With these settings, you can do the fine tuning of the height
    // by the initialization.
    theme_advanced_row_height: 27,
    delta_height: 0,
    
        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",

        // Example content CSS (should be your site CSS)
        //content_css : "contents.css"
    };

The above declaration in the same view file,

One more I commented line 359 of TinyMCETextArea.js

      //if(elm.hasVisibleLabel() && (elm.labelAlign == 'left' || elm.labelAlign == 'right'))

i commented this line to avoid "elm.hasVisibleLabel is not a function" this error message ,

Thank you

[123lal]

Dear Qtx , I found the reason for the bug

i downloaded your example and tried in my machine

with your ext js core that is ext-all.js 4.1 the example works fine

but i replaced it with ext4.0.7 core file , i got error ,

What should i have to do to over come this error, i ilked the Editor very much.

Hope there will be a solution to solve this problem
Thank you Qtx ,
Take care

[Qtx]

I wrote above that you have commented some line in my code and it worked. I assume 4.1 has some functions that 4.0.7 does not have yet.

You have to rewrite the places where the problem occurs:

The code

if(elm.hasVisibleLabel() && (elm.labelAlign == 'left' || elm.labelAlign == 'right'))

is necessary only in special cases. You can comment it.

[Qtx]

New Version 2.4

ExtJS version updated from 4.1.0 to 4.2.0
TinyMCE version updated from 3.5.4.1 to 3.5.8