Menu icon Foundation
Using ckEditor in Panel in Foundation for App

Hello, everyone

I need to add a rich Text Editor to my application, and ckEditor seem to be the best I can find out. So, I juste add it to my app and no problem at all, but when I add it to a Panel, a default one, it give me an error :

TypeError: a.$.parentNode is null

 

I know this is not only a Foundation problem but can anyone at least help me understand what's going on ?

Here is my code :

<span>
  <div class="grid-frame">
    <zf-panel id="editorPanel">
      <textarea ng-model="currentPartie.txtComplet" name="editor" id="editor" rows="10" cols="80"></textarea>
    </zf-panel>
    <div ng-controller="rightBarController">
      <div ng-show="rightBarVisibility">
        <ul class="vertical primary menu-bar expand" id="rightBar">
          <li><a ui-sref="organigram"><img zf-iconic="" icon="person" size="medium" class="iconic-color-primary"></a></li><!-- Persos -->
          <li><a ui-sref="frises"><img zf-iconic="" icon="flag" size="medium" class="iconic-color-primary"></a></li><!-- Frises -->
          <li><a ui-sref="articles"><img zf-iconic="" icon="comment-square" size="medium" class="iconic-color-primary"></a></li><!-- Articles -->
          <li><a ui-sref="chapitres"><img zf-iconic="" icon="document" size="medium" class="iconic-color-primary"></a></li><!-- Chapitres -->
          <li><a><img zf-iconic="" icon="dashboard" size="medium" class="iconic-color-primary"></a></li><!-- projets -->
          <li><a ui-sref="about"><img zf-iconic="" icon="action" size="medium" class="iconic-color-primary"></a></li><!-- about-->
        </ul>
      </div>
    </div>
    <ui-view class="grid-block" style="margin-bottom: 50px"></ui-view>
  </div>
</span>

With juste the minimum javascript :

CKEDITOR.replace('editor');

ckeditorparrentErrorapplibrary

Hello, everyone

I need to add a rich Text Editor to my application, and ckEditor seem to be the best I can find out. So, I juste add it to my app and no problem at all, but when I add it to a Panel, a default one, it give me an error :

TypeError: a.$.parentNode is null

 

I know this is not only a Foundation problem but can anyone at least help me understand what's going on ?

Here is my code :

<span>
  <div class="grid-frame">
    <zf-panel id="editorPanel">
      <textarea ng-model="currentPartie.txtComplet" name="editor" id="editor" rows="10" cols="80"></textarea>
    </zf-panel>
    <div ng-controller="rightBarController">
      <div ng-show="rightBarVisibility">
        <ul class="vertical primary menu-bar expand" id="rightBar">
          <li><a ui-sref="organigram"><img zf-iconic="" icon="person" size="medium" class="iconic-color-primary"></a></li><!-- Persos -->
          <li><a ui-sref="frises"><img zf-iconic="" icon="flag" size="medium" class="iconic-color-primary"></a></li><!-- Frises -->
          <li><a ui-sref="articles"><img zf-iconic="" icon="comment-square" size="medium" class="iconic-color-primary"></a></li><!-- Articles -->
          <li><a ui-sref="chapitres"><img zf-iconic="" icon="document" size="medium" class="iconic-color-primary"></a></li><!-- Chapitres -->
          <li><a><img zf-iconic="" icon="dashboard" size="medium" class="iconic-color-primary"></a></li><!-- projets -->
          <li><a ui-sref="about"><img zf-iconic="" icon="action" size="medium" class="iconic-color-primary"></a></li><!-- about-->
        </ul>
      </div>
    </div>
    <ui-view class="grid-block" style="margin-bottom: 50px"></ui-view>
  </div>
</span>

With juste the minimum javascript :

CKEDITOR.replace('editor');
Jennifer Green about 3 years ago

 I don't know anything about editors for coding, but as a writer that often use text editors (and I have seen them a lot!) I'd suggest you browsing this review site where you can find some cool apps http://besttexteditor.com, maybe you should try one of them.

Jarryd Fillmore about 3 years ago

I'd like to know this too!