2amigos / yii2-tinymce-widget

TinyMCE WYSIWYG widget for Yii2
http://yiiwheels.com
Other
100 stars 48 forks source link

How to turn on Inline mode ? #30

Open impuulse opened 7 years ago

impuulse commented 7 years ago

Hello, it's my code:

`\dosamigos\tinymce\TinyMce::widget([
    'name' => 'test',
    'language' => 'ru',
    'clientOptions' => [
        'selector' => 'div.test',
        'inline' => true,
        'plugins' => [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste'
        ],
        'toolbar' => 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
    ]
]);
<div class = "test"></div>`

but only clean textarea

tonydspaniard commented 7 years ago

@impuulse please add a value and open your developer tools and tell me if there is any error on the console of your browser:


\dosamigos\tinymce\TinyMce::widget([
    'name' => 'test',
    'value' => 'THIS IS A TEST VALUE',
    'language' => 'ru',
    'clientOptions' => [
        'inline' => true,
        'plugins' => [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste'
        ],
        'toolbar' => 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
    ]
]);
zzeraw commented 6 years ago

Hi, @tonydspaniard. I have a similar problem. I can't use the widget in inline mode.

The following code causes such errors in the Chrome's console.

Code:

<?= \dosamigos\tinymce\TinyMce::widget([
    'name' => 'test',
    'value' => 'THIS IS A TEST VALUE',
    'language' => 'ru',
    'clientOptions' => [
        'inline' => true,
        'selector' => 'div.test',
        'plugins' => [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste'
        ],
        'toolbar' => 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
    ]
]); ?>
<div class="test"></div>

Message:

Could not initialize inline editor on invalid inline target element <textarea id=​"w0" name=​"test">​THIS IS A TEST VALUE​</textarea>​
    initError @ tinymce.js:32160
    (anonymous) @ tinymce.js:42087
    each @ tinymce.js:4134
    initEditors @ tinymce.js:42085
    executeHandlers @ tinymce.js:1694
    defaultNativeHandler @ tinymce.js:1721
    readyHandler @ tinymce.js:1617

Thanks.

tonydspaniard commented 6 years ago

The problem is that it tries to create the inline editor on a textArea. The widget requires to be modified to support inline. It must render a layer not a textarea input field.