yii2-ckeditor-widget custom plugins does not works with inline mode

The sample code in the How to add custom plugins section of manual, does not works. and no effective on tool bars.

<?php
 
use dosamigos\ckeditor\CKEditorInline;

// First we need to tell CKEDITOR variable where is our external plugin 
$this->registerJs("CKEDITOR.plugins.addExternal('pbckcode', '/pbckcode/plugin.js', '');");

// ... 
// Using the plugin
<?php CKEditorInline::begin(['preset' => 'custom', 'clientOptions' => [
    'extraPlugins' => 'pbckcode',
    'toolbarGroups' => [
        ['name' => 'undo'],
        ['name' => 'basicstyles', 'groups' => ['basicstyles', 'cleanup']],
        ['name' => 'colors'],
        ['name' => 'links', 'groups' => ['links', 'insert']],
        ['name' => 'others', 'groups' => ['others', 'about']],
        
        ['name' => 'pbckcode'] // <--- OUR NEW PLUGIN YAY!
    ]
]]) ?>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</p>
<?php CKEditorInline::end() ?>

I see this caused of contenteditable="true" in the div element, that added by this line of core: https://github.com/2amigos/yii2-ckeditor-widget/blob/master/src/CKEditorInline.php#L48

<div id="w1" contenteditable="true"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>

So I try to set it to false in core code. Then the tool bars changed but in new case the text will not be ediatble! I played with disableAutoInline and contenteditable parameters in different modes. Had no effect.

Dec 03 '17 18:12 NabiKAZ

Have you tried with the original plugin without the widget and see if that occurs also on the plugin itself?

Dec 06 '17 04:12 tonydspaniard

There are not problem with plugin, because there are problem with all params in inline mode, be like preset,... and no effective. For example test this simple code:

CKEditorInline::begin(['preset' => 'basic']);
echo "This text can be edited now :)";
CKEditorInline::end();

You can see the toolbar load with full instead basic!

Dec 17 '17 16:12 NabiKAZ

@NabiKAZ do you mind providing the resulting javascript code? Thanks.

Dec 18 '17 12:12 tonydspaniard

PHP:

<?php
use yii\bootstrap\ActiveForm;
use dosamigos\ckeditor\CKEditorInline;

$form = ActiveForm::begin();

CKEditorInline::begin(['preset' => 'basic']);
echo "This text can be edited now :)";
CKEditorInline::end();

ActiveForm::end();

HTML & JS:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-param" content="_csrf">
    <meta name="csrf-token" content="8-H0P9sS9J_S2UzuBv_GmWmUQCf1dapoEHxK-iHfg7jD0LxgtlvDxZzsAaBMrpTQDvE2dLkwzixHNwCKUbOuwA==">
    <title></title>
    <link href="/yii2-basic-test2/web/assets/d6d7fb7e/css/bootstrap.css" rel="stylesheet">
<link href="/yii2-basic-test2/web/css/site.css" rel="stylesheet"></head>
<body>

<div class="wrap">
    <nav id="w2" class="navbar-inverse navbar-fixed-top navbar"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w2-collapse"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button><a class="navbar-brand" href="/yii2-basic-test2/web/index.php">My Application</a></div><div id="w2-collapse" class="collapse navbar-collapse"><ul id="w3" class="navbar-nav navbar-right nav"><li><a href="/yii2-basic-test2/web/index.php?r=site%2Findex">Home</a></li>
<li><a href="/yii2-basic-test2/web/index.php?r=site%2Fabout">About</a></li>
<li><a href="/yii2-basic-test2/web/index.php?r=site%2Fcontact">Contact</a></li>
<li><a href="/yii2-basic-test2/web/index.php?r=site%2Flogin">Login</a></li></ul></div></div></nav>
    <div class="container">
                        
<form id="w0" action="/yii2-basic-test2/web/index.php?r=site%2Fckeditor" method="post">
<input type="hidden" name="_csrf" value="8-H0P9sS9J_S2UzuBv_GmWmUQCf1dapoEHxK-iHfg7jD0LxgtlvDxZzsAaBMrpTQDvE2dLkwzixHNwCKUbOuwA==">

<div id="w1" contenteditable="true">This text can be edited now :)</div>

</form>    </div>
</div>

<footer class="footer">
    <div class="container">
        <p class="pull-left">&copy; My Company 2017</p>

        <p class="pull-right">Powered by <a href="http://www.yiiframework.com/" rel="external">Yii Framework</a></p>
    </div>
</footer>

<script src="/yii2-basic-test2/web/assets/6dfb5f69/jquery.js"></script>
<script src="/yii2-basic-test2/web/assets/125de313/yii.js"></script>
<script src="/yii2-basic-test2/web/assets/76ae6807/ckeditor.js"></script>
<script src="/yii2-basic-test2/web/assets/76ae6807/adapters/jquery.js"></script>
<script src="/yii2-basic-test2/web/assets/125de313/yii.activeForm.js"></script>
<script src="/yii2-basic-test2/web/assets/d6d7fb7e/js/bootstrap.js"></script>
<script type="text/javascript">jQuery(function ($) {
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('w1', {"height":200,"toolbarGroups":[{"name":"undo"},{"name":"basicstyles","groups":["basicstyles","cleanup"]},{"name":"colors"},{"name":"links","groups":["links","insert"]},{"name":"others","groups":["others","about"]}],"removeButtons":"Subscript,Superscript,Flash,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe","removePlugins":"elementspath","resize_enabled":false});
jQuery('#w0').yiiActiveForm([], []);
});</script></body>
</html>

Output:

Dec 22 '17 03:12 NabiKAZ

Thanks @NabiKAZ

Currently not having time at all. Will have a look as soon as I am free.

Dec 31 '17 09:12 tonydspaniard

yii2-ckeditor-widget yii2-ckeditor-widget copied to clipboard

custom plugins does not works with inline mode

yii2-ckeditor-widget
yii2-ckeditor-widget copied to clipboard