Question

我正在尝试重新创建此插件 - http://xing.github.io/wysihtml5/

我想了解他们是如何做到的，但代码很乱，所以我自己编写。

这就是我已经做过的事情 - http://codepen.io/anon/pen/EjQprM

正如你所看到的，我能够使用data-editor =“init”初始化插件，并在里面创建并附加iframe ..但是..如何使这个可写，就像一个输入？

我正在思考如何做到这一点。

非常欢迎任何帮助！

由于

代码：

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));

Answer 1

要获取可编辑的DOM元素，请将元素的contenteditable属性设置为true。

所以在你的代码中，改变

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

到

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

然后用户可以编辑div的内容！

使iframe像输入字段一样？

1 个答案: