custom plugins does not works with inline mode

NabiKAZ commented 6 years ago

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.

tonydspaniard commented 6 years ago

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

NabiKAZ commented 6 years ago

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!

tonydspaniard commented 6 years ago

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

NabiKAZ commented 6 years ago

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:

tonydspaniard commented 6 years ago

Thanks @NabiKAZ

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

2amigos / yii2-ckeditor-widget

custom plugins does not works with inline mode #119