造型Wysiwyg编辑器

时间：2016-08-02 16:50:07

标签： javascript css

我有一个HTML页面。在该页面中，我尝试添加WYSIWYG编辑器。我决定使用this one。我在我的应用程序中工作。但是，我似乎无法按照我想要的方式进行设计。我认为问题是因为我使用this theme。我真的希望能够在控件上方toolbar floating位于文本框标签的右侧。与此同时，我希望保持纸张外观而不是笨重的盒子。

此时，我已经尝试了this fiddle中的内容。造型完全错了。主要代码如下：

<div class="container">
<div class="form-group label-static is-empty">  
  <div class="row">
    <div class="col-xs-3"><label class="control-label" for="Description">Description</label>  </div>
    <div class="col-xs-9">
      <div id="toolbar" class="pull-right" style="vertical-align:top; margin-top:0; padding-top:0;">[toolbar]</div>
    </div>
  </div>
  <input class="form-control" rows="3" id="Description" name="Description" onfocus="setMode('rich');" onblur="setMode(null);"></div>
</div>

虽然我使用以下JavaScript：

$(function () {
  $.material.init();
});

function setMode(name) {
  if (name === 'rich') {
    $('#Description').summernote({ focus: true });  
  } else {
    $('#Description').summernote('destroy');
  }
}

感谢任何帮助。这真是令人沮丧。

2 个答案:

答案 0 :(得分：8)

修改

V2：

我创建了另一个版本，当summernote存在时，标签会改变颜色，就像在材料设计中一样。我还添加了一些动画来跟进物质运动。

<强> JSFIDDLE VERSION 2

CODE SNIPPET V2：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(function() {
    $.material.init();
  });

  var mySummernote = $("#Description"),
    labelStatic = $(".label-static");

  mySummernote
    .on("click", function() {
      setTimeout(function() {
        mySummernote.summernote({
          focus: true
        });
        $('.note-toolbar.panel-heading').appendTo('#toolbar');
        labelStatic.addClass("is-focused");
      }, 250);
    });

  $(document).mouseup(function(el) {
    var summernoteContainer = $("#summernote-container");

    if (!summernoteContainer.is(el.target) && summernoteContainer.has(el.target).length === 0) {
      mySummernote.summernote("destroy");
      $('.note-toolbar.panel-heading').remove();
      labelStatic.removeClass("is-focused");
    }
  });
});
＆＃13; 
.mytoolbar {
  position: relative;
  top: -30px;
  z-index: 9;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
#summernote-container .note-editor.note-frame.panel.panel-default {
  animation: fadeInDown .8s;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#summernote-container .note-toolbar.panel-heading {
  opacity: 0;
  animation: fadeIn .8s .8s both;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.min.js"></script>

<div class="container">
  <div class="form-group label-static is-empty" id="summernote-container">
    <div class="row">
      <div class="col-xs-2">
        <label class="control-label" for="Description">Description</label>
      </div>
      <div class="col-xs-10">
        <div id="toolbar" class="mytoolbar"></div>
      </div>
    </div>
    <input class="form-control" rows="3" id="Description" name="Description">
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

<强> SOLUTION：

首先，您需要在文档准备就绪时调用您的函数，使用：

$("document").ready(function(){
    //Your JS functions here
});

然后从内容中删除onfocus和onblur。

遵循SoC （关注点分离），我们将在JS文件中添加此逻辑，我们将使用on() jQuery方法。

在这种情况下，我们有以下逻辑：

$("#summernoteTrigger").on("click", function() {
    //When the user clicks the input stuff here
    //Separate Toolbar from Summernote and show it next to label
});

当用户点击输入时，我们将初始化Summernote并使用焦点选项：

$(this).summernote({
    focus: true
});

当初始化Summernote时，我们希望工具栏放在标签旁边，这样我们就可以将它附加到我们选择的容器中：

 $('.note-toolbar.panel-heading').appendTo('#toolbar');

如果用户停止对焦，我们要做的另一件事是销毁Summernote。为此，我们无法使用$('#summernoteTrigger').on('summernote.blur', function() {});，因为点击工具栏会触发此回调。相反，我们可以使用以下方法：

  $(document).mouseup(function(el) {
    var summernoteContainer = $("#summernote-container");

    if (!summernoteContainer.is(el.target) && summernoteContainer.has(el.target).length === 0) {
      //Add logic here if you want to save what the user typed
      $("#summernoteTrigger").summernote("destroy");
       $('.note-toolbar.panel-heading').remove();
    }
  });
});

最后，我们将所有内容放在一起并根据需要添加一些样式。

<强> JSFIDDLE

CODE SNIPPET

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(function() {
    $.material.init();
  });

  var mySummernote = $("#Description");

  mySummernote
    .on("click", function() {
      $(this).summernote({
        focus: true
      });
      $('.note-toolbar.panel-heading').appendTo('#toolbar');
    });

  $(document).mouseup(function(el) {
    var summernoteContainer = $("#summernote-container");

    if (!summernoteContainer.is(el.target) && summernoteContainer.has(el.target).length === 0) {
      mySummernote.summernote("destroy");
      $('.note-toolbar.panel-heading').remove();
    }
  });
});
＆＃13; 
.mytoolbar {
  position: relative;
  top: -30px;
  z-index: 9;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.min.js"></script>

<div class="container">
  <div class="form-group label-static is-empty" id="summernote-container">
    <div class="row">
      <div class="col-xs-2">
        <label class="control-label" for="Description">Description</label>
      </div>
      <div class="col-xs-10">
        <div id="toolbar" class="mytoolbar"></div>
      </div>
    </div>
    <input class="form-control" rows="3" id="Description" name="Description">
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：5)

  

这是我的大问题是从文本字段中分离工具栏   本身

Summernote有 Air mode ，专门针对这种情况量身定制。

首先，你应该知道这个技巧分为两个简单的部分。

第一部分：

Air模式仅适用于突出显示文本，因此您应该在焦点时触发此突出显示（如果需要），或者将css设置为display:block!important，当然您可以使用css控制其位置，但注意它有一个绝对的位置。

第二部分

当突出显示任何文本时，这将重置工具栏css，因此此解决方案 here 解决了该问题，但需要修改summernote源代码。

这是一个解释理论的 fiddle ，当我有时间的时候，我会完成一个完整的概念证明。

$(document).ready(function() {
      $.material.init();
      $('#description').summernote({
        height: 300,
        tabsize: 2,
        airMode: true
      });
    });

enter image description here enter image description here

相关问题
最新问题