Skip to content
This repository has been archived by the owner on Jul 27, 2023. It is now read-only.

custom plugins does not works with inline mode #119

Open
NabiKAZ opened this issue Dec 3, 2017 · 5 comments
Open

custom plugins does not works with inline mode #119

NabiKAZ opened this issue Dec 3, 2017 · 5 comments
Labels
under investigation

Comments

@NabiKAZ
Copy link
Contributor

NabiKAZ commented Dec 3, 2017 •
edited
Loading

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
Copy link
Member

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

@NabiKAZ
Copy link
Contributor Author

NabiKAZ commented Dec 17, 2017 •
edited
Loading

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
Copy link
Member

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

@NabiKAZ
Copy link
Contributor Author

NabiKAZ commented Dec 22, 2017

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:
image

@tonydspaniard
Copy link
Member

Thanks @NabiKAZ

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
under investigation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@NabiKAZ @tonydspaniard