Page 15 of 15 FirstFirst ... 5131415
Results 141 to 149 of 149

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

  1. #141


    New version:

    Version: 5.0
    Release date: 22.09.2014
    ExtJS Version: 5.0.0
    TinyMCE Version: 4.1.15

    Note 1
    In the ExtJS 5.x, the border of the fields is designed not in the fields themselves, but in the wrappers. Thus, when the WYSIWYG editor is initialized, the border of the wrapper should be removed, because the WYSIWYG editor has own border. To remove border, the class tinymce-hide-border is used. Define this class in your CSS file as follows:

      border-width: 0px;
    Note 2
    Due to the bug in the ExtJS, the 'resize' event is not fired in some cases, if the form is resized. The 'resize' event is the key feature for the integration of the TinyMCE editor. I made the bug report, it was accepted as bug. Let's wait until it is fixed.

    View Example

    Download Sources and Demo

    Implementation Details and Reference

    GitHub Project

  2. #142


    New version: Version: 5.1
    Release date: 2014-09-27
    ExtJS Version: 5.0.0
    TinyMCE Version: 4.1.15

    The issue with the resize event was not a bug, it was a feature - liquid layouts. Now, the control is adjusted to this feature.

  3. #143
    Sencha Premium Member
    Join Date
    Jan 2014

    Default How to integrate

    I am hoping to use this plugin in my project but have a couple of questions... I haven't integrated many extensions or plugins in my projects so appreciate these questions are probably pretty basic.

    I have created my project and file structure using sencha Cmd and wonder where the 'proper' place would be to place all the files.

    My file structure looks like this roughly..

    /app <--- my models/views/controllers are here
    /TinyMCETextArea <--- is this a good place to keep this plugin???

    Then I assume I need to add the location to my classpath (??):


    Do I then add this location somehow to the Loader??? (in /sencha/App/app.js)

    Ext.Loader.setPath('Ext.ux', 'lib/TinyMCETextArea');

    Finally I guess the 'tinymce' folder needs to be copied to a relevant place in my deploy directory and the tinymce js included.

    ... I feel a bit lost in how this should be integrated properly in my project so any pointers would be very gratefully received...

  4. #144



    I can tell you, how I do. There is no strict requirements where to place the files.

    1) I put the folder "tinymce" in the root of the application folder. It is important that there many unnecessary files in thew download file of the tinymce. You should take the folder\tinymce\js\tinymce\

    2) I place the file TinyMCETextArea.js into the folder ux\form\. This is the correct location for it! Because, in the ux/form, also other specific form fields reside:


    The fully qualified name is 'Ext.ux.form.TinyMCETextArea', so you set up the Path Loader accordingly.

    3) You should include the tinymce.js explicit into your files. I am using a bootsrap.js file. This file does the smart loading. If it is in the localhost, it loads the bigger file with line breaks for possible debug purposes, in other cases, the sparse file is loaded (production variant).

     * Load the library located at the same path with this file
     * Will automatically load if any of these conditions is true:
     * - Current hostname is localhost
     * - Current hostname is an IP v4 address
     * - Current protocol is "file:"
     * Will load tinymce.js (minified) otherwise
    (function() {
        var scripts = document.getElementsByTagName('script'),
            localhostTests = [
                /\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(:\d{1,5})?\b/ // IP v4
            host = window.location.hostname,
            isDevelopment = null,
            queryString =,
            test, path, i, ln, scriptSrc, match;
        for (i = 0, ln = scripts.length; i < ln; i++) {
            scriptSrc = scripts[i].src;
            match = scriptSrc.match(/tinymce\/bootstrap\.js$/);
            if (match) {
                path = scriptSrc.substring(0, scriptSrc.length - match[0].length);
        if (queryString.match('(\\?|&)debug') !== null) {
            isDevelopment = true;
        else if (queryString.match('(\\?|&)nodebug') !== null) {
            isDevelopment = false;
        if (isDevelopment === null) {
            for (i = 0, ln = localhostTests.length; i < ln; i++) {
                test = localhostTests[i];
                if ( !== -1) {
                    isDevelopment = true;
        if (isDevelopment === null && window.location.protocol === 'file:') {
            isDevelopment = true;
        document.write('<script type="text/javascript" charset="UTF-8" src="' + 
            path + 'tinymce/tinymce' + (isDevelopment ? '.dev' : '') + '.js"></script>');


  5. #145
    Sencha User
    Join Date
    Mar 2013

    Default Error with TinyMCETextArea

    I am using Sencha Touch 2.4

    I followed the example and added the widget to my panel like so:

    height: 'auto',
    fieldLabel: 'Message',
    anchor: '100% 60%',
    xtype: 'tinymce_textarea',
    fieldStyle: 'font-family: Courier New; font-size: 12px;',

    noWysiwyg: false,
    tinyMCEConfig: myapp.controller.Utils.getTinyMCEConfig(),
    value: 'Some Text',
    itemId: 'bulletinMessage',
    id: 'bulletinMessage',
    name: 'bulletinMessage'

    and the options are:

    getTinyMCEConfig: function () {
    var tinyCfg = {
    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: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
    toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor",
    toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",

    content_css : "contents.css",

    menubar: true,
    toolbar_items_size: 'small'

    return tinyCfg;

    but the widget does not show up properly. It looks just like a regular textarea. The controls at the top are missing. Am I missing something?

  6. #146


    On the first look, all is OK. But, you wrote that you are using Sencha Touch 2.4.

    My control is for the ExtJS. I am not familiar with Sencha Touch, maybe that is the reason.

    Above, there are links to the online example and demo code for download. Study it and try to reproduce in you application.

  7. #147
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Katoomba, Blue Mountains, west of Sydney, Australia


    Hi Oleg.

    I customised my already customised version of your great extention to allow D&D onto the iframe for both external drops (eg files from the OS) and internal drops (eg a tree node)


  8. #148


    Has anyone had any success with tinymce_textarea and viewmodels in ExtJS5?

    I'm having problems with getting values from the viewmodel

        xtype: 'tinymce_textarea',
        fieldLabel: me.locale.labels.description,
        tinyMCEConfig: tinyConfig,
        bind: {
            rawValue: '{record.description}',
            hidden: '{!}',
            readOnly: '{!fieldsConfig.description.canEdit}'
        anchor: '100%',
        height: 200
    When I try

    I get all values except the TinyMce value


    If anyone is interested in the solution:

    It is important that you bind rawValue and not value. If you bind value, TinyMce starts inserting weird new-lines when you are typing.
    Last edited by onestep; 14 May 2015 at 4:54 AM. Reason: solution found

  9. #149
    Sencha User
    Join Date
    Dec 2016


    View example/ Download Sources and Demo links are not working

Page 15 of 15 FirstFirst ... 5131415

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts