CODEWITHSUNDEEP
javascriptjqueryiframe
user4002542
user4002542

Reputation:

Make iframe like a input field?

I'm trying to recreated this plugin - http://xing.github.io/wysihtml5/

I want learn how they did it, but the code is a mess, so i'm writing my own.

This is what i already made - http://codepen.io/anon/pen/EjQprM

As you can see, i was able to initialize the plugin just with a data-editor="init", and create and append an iframe inside.. but.. how make this writable, like an input?

I'm breaking my brain thinking how to do that.

ANY help is very welcome!

Thanks

Code:

var Editor = Editor || {};

(function(Editor) {

  var Editor = function(editor) {
    this.editor = editor;
    this.editorWidth = editor.width() || '100%';
    this.editorHeight = editor.height() || '100px';

    this.init();
  };

  Editor.prototype.init = function() {
    this.basicStyles();
    this.createEditor();
  };

  Editor.prototype.basicStyles = function() {
    this.editor
      .css('border-width', '1px')
      .css('border-style', 'solid')
      .css('border-color', 'grey');

    this.editor
      .css('padding-top', '10px')
      .css('padding-right', '10px')
      .css('padding-bottom', '10px')
      .css('padding-right', '10px');
  };

  Editor.prototype.createEditor = function() {
    if (this.createIframe()) {
      this.createNecessaryTagsInsideHead();
      this.createNecessaryTagsInsideBody();
    }
  };

  Editor.prototype.createIframe = function() {
    this.iframe = $('<iframe>', {
      'data-editor': 'iframe',
      'frameborder': 0,
      'scrolling': 'no',
      'width': this.editorWidth,
      'height': this.editorHeight,
      'border': '1px solid red',
      'background': 'red'
    }).appendTo(this.editor);

    this.headInsideIframe = $(this.iframe.find('head'));
    this.bodyInsideIframe = $(this.iframe.find('body'));

    if (this.iframe) {
      return true;
    } else {
      return false; 
    }
  };

  Editor.prototype.createNecessaryTagsInsideHead = function() {
    this.headInsideIframe.append('<meta charset="UTF-8" />');

  };

  Editor.prototype.createNecessaryTagsInsideBody = function() {

  };



  window.onload = function() {
    var el = $('[data-editor]');

    var editor = new Editor(el);
  };

}(Editor));

Upvotes: 1

Views: 73

Answers (1)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

To get an editable DOM element, set the contenteditable attribute of the element to true.

So in your code, change

<div data-editor="init"></div>

to

<div data-editor="init" contenteditable="true"></div>

Then the user can edit the contents of the div!

Upvotes: 1

Related Questions