文章/答案/技术大牛

发布

问Wysiwyg编辑风格
EN

Stack Overflow用户

提问于 2016-08-02 16:50:07

回答 2查看 1.5K关注 0票数 8

我有一个HTML页面。在这一页中，我试图添加一个WYSIWYG编辑器。我决定使用这一个。我让它在我的应用程序中工作。然而，我似乎无法按照我想要的方式来设计它。我相信问题是因为我在使用这个主题。我非常希望能够将toolbar floating放在控件的上方，文本框标签的右边。同时，我想保持纸张的外观而不是笨重的盒子。

在这一点上，我已经尝试了这把小提琴中的内容。不过，造型都是错的。主要代码如下所示：

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

任何帮助都是非常感谢的。这真是令人沮丧。

javascript

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-08-05 16:28:07

编辑：

V2：

我创造了另一个版本，使标签改变颜色时，夏季笔记是存在的，因为它通常会在材料设计。此外，我还添加了一些动画，以跟进物质运动。

JSFIDDLE版本2

代码片段V2:

$(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");
    }
  });
});

.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;
}

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

解决方案：

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

$("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并使用focus选项：

$(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

代码片段：

$(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();
    }
  });
});

.mytoolbar {
  position: relative;
  top: -30px;
  z-index: 9;
}

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

票数 8

Stack Overflow用户

发布于 2016-08-05 02:08:35

这是我最大的问题是将工具栏与文本字段本身分开

Summernote有专门为这种情况量身定制的空气模式。

首先，你应该知道这个窍门被分成两个简单的部分。

第一部分：

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

第二部分

当高亮显示任何文本时，这将重置工具栏css，因此此解决方案这里解决了它，但需要修改summernote源代码。

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

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

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38726290

复制

相似问题

问Wysiwyg编辑风格
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Wysiwyg编辑风格EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Wysiwyg编辑风格
EN