title: How to move the cursor outside of a span element after inserting it?
body: <p>I've created a custom plugin that lets me insert icons from an icon font inside my document. I have it set up so that it creates a span element with the icon of my choice inside of it.</p>
  <p>It does work, but once I insert the icon, the cursor is inside the span element, which causes issues if I immediately try typing afterwards. I can just clear formatting, but it is a bit annoying, so I'd like to know if I can tell my plugin to automatically shift the cursor outside of the span I've just inserted so that I can continue to type freely. It'd be great if I could also &quot;lock&quot; the span so that I can't click inside of it by accident.</p>
  <p>Here's what my code looks like:</p>
  <pre class="lang-js prettyprint-override"><code>CKEDITOR.dialog.add( 'iconDialog', function ( editor ) {
      return {
          title: 'Add icon',
          minWidth: 400,
          minHeight: 200,
  
          contents: [
              {
                  id: 'tab',
                  label: 'Add a new icon',
                  elements: [
                      {
                          type: 'text',
                          id: 'iconId',
                          label: 'Paste the icon here',
                          validate: CKEDITOR.dialog.validate.notEmpty( &quot;Icon name can't be empty.&quot; )
                      }
                  ]
              }
          ],
          onOk: function() {
              var dialog = this;
              var id = dialog.getValueOf('tab', 'iconId');
              editor.insertHtml( '&lt;span class=&quot;inv-icon&quot;&gt;' + id.toString() + '&lt;/span&gt;' );
          }
      };
  });
  </code></pre>