我有一个 HTML页面.在该页面中,我试图添加一个所见即所得的编辑器.我决定使用 this one.我已经在我的应用程序中工作了.但是,我似乎无法按照我想要的方式得到它的风格.我相信问题是因为我正在使用 this theme.我真的希望能够将工具栏漂浮在控件的上方,在文本框标签的右侧.同时,我想保持纸张看起来而不是庞大的盒子.

在这一点上,我已经尝试了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');
  }
}

任何帮助是赞赏.这真的令人沮丧.

解决方法

编辑:

V2:

我创建了另一个版本,使得标签更改颜色,当夏季提示存在时,通常将在材料设计中.此外,我还添加了一些动画来跟进物质动议.

JSFIDDLE VERSION 2

CODE SNIPPET 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,0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,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并使用焦点选项:

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

javascript – 造型Wysiwyg编辑器的更多相关文章

  1. html+js 实现markdown编辑器效果

    这篇文章主要介绍了html+js 实现markdown编辑器效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  2. 从xcode ios中删除未使用的方法

    我正在使用带有目标c的xcode9.我想从类中删除未使用的变量和方法.我也使用这种方式,但xcode不警告未使用的方法等.如何找出?

  3. 将Emacs与Xcode 4一起使用?

    如果出于某种原因Apple疯狂并从Xcode中删除了这个功能,有没有办法从Emacs中编辑xcodeproj,以及构建和使用iPhone模拟器?

  4. 如何在Xcode 4.4.1中的Core Data Model编辑器中完全删除实体描述

    用户界面中只存在“添加实体”按钮.解决方法>突出显示要删除的实体.>按退格键(删除)键.

  5. 在XCode中禁用Word-Wrap

    我想在XCode中禁用Word-Wrap“功能”.可以这样做吗?

  6. Xcode数据模型编辑器不出现

    解决方法我遇到了一个类似的问题.问题是项目目录结构及其在XCode中的配置方式.更多细节:XCodeCant’EditCoreDataModel

  7. xcode4 – 如何关闭分割窗口/相邻编辑器 – Xcode 4

    我通过玩Xcode4中的菜单进行管理,在相邻编辑器中打开一个窗口.不幸的是,我无法找出如何关闭该窗口.你如何做到这一点?解决方法我通过转到’view>编辑>标准“,并将视图重置为标准的一个窗口视图.我还没弄清楚为什么新窗口右上角的x是灰色的.不是一个完美的解决方案,而是解决方案

  8. osx – Xcode 8扩展在编辑器菜单中不可见

    谢谢您的帮助.解决方法我想到了.默认情况下,项目未签名.单击项目并转到常规设置,然后在macOS应用程序和扩展程序目标上选择启用开发签名修复问题.

  9. 如何解决XCode滑动手势去上一个/下一个文件冻结编辑器?

    从今天早上起,我在小牛的XCode5中面临着一个非常烦人的bug:我用来从左到右用两根手指在MacBook触控板上滑动,以前往/下一个文件进入XCode编辑器.但是,现在,这样做完全冻结了编辑器,刚刚移动了像5像素的东西.之后,我必须关闭XCode并重新打开它,使编辑器重新工作.按下上一个/下一个按钮,因为它不会触发这个错误的动画.有没有人有这个问题或有任何线索来解决它?

  10. ios – 如何设置IBInspectable Int的最大限制

    我在Swift中使用IBInspectableInt来选择4种形状(0-3),但是在故事板编辑器中可以设置大于3且小于0的值,这会阻止IBDesignable系统工作.是否可以设置故事板编辑器中可以设置的值的最小和最大限制?解决方法没有办法限制用户在Storyboard中输入的内容.但是,您可以使用计算属性阻止存储无效值:然后你也可以使用枚举而不是常量来在内部表示不同的形状类型.

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部