具有javascript效果的Jquery实时预览

Question

我正在做一个页面，你可以写一个句子，它显示在右边设计得很好。我使用Jquery实时预览。

但我的设计似乎只能在编写和重新加载页面之后才能加载自己。知道如何让设计直接生成吗？

到目前为止这是我的页面 (查看效果:编写一些内容并再次加载页面)

检查这个这里的小提琴(普加赫更新)

这是我的javascript

            $(function() {
                $('textarea.source').livePreview({
                    previewElement: $('p#demo'),
                    allowedTags: ['p', 'strong', 'br', 'em', 'strike'],
                    interval: 20
                });
            });



window.onload = function wordsinblocks(self) {
    var demo = document.getElementById("demo"),
        initialText = demo.textContent,
        wordTags = initialText.split(" ").map(function(word){
          return '<span class="word">' + word + '</span>';
        });

    demo.innerHTML = wordTags.join('');
    self.disabled = true;
    fitWords();
    window.addEventListener('resize', fitWords);
}

function fitWords(){
  var demo = document.getElementById("demo"),
      width = demo.offsetWidth,
      sizes = [7.69230769230769,23.07692307692307,46.15384615384614, 100],
      calculated = sizes.map(function(size){return width*size/100}),
      node, 
      i, 
      nodeWidth,
      match,
      index;


    for (i=0;i<demo.childNodes.length;i++){
      node = demo.childNodes[i];
      node.classList.remove('size-1','size-2','size-3','size-4');

      nodeWidth = node.clientWidth;
      match = calculated.filter(function(grid){
        return grid >= nodeWidth;
      })[0];
      index = calculated.indexOf(match);


      node.classList.add( 'size-' + (index+1));
    }
}

Answer 1

您只在wordsinblocks()上运行window.pageload函数，但是在更新文本时必须运行它们。只需分离函数并在reloadPreview上调用它。

(function($) {
    $.fn.livePreview = function(options) {
            // [...]
            textarea.reloadPreview = function() {
                // [...]
                wordsinblocks(self);
            };
            // [...]
        });
    };

   // [...]

})(jQuery);

function wordsinblocks(self) {
  var demo = document.getElementById("demo"),
      initialText = demo.textContent,
      wordTags = initialText.split(" ").map(function(word) {
        return '<span class="word">' + word + '</span>';
      });

  demo.innerHTML = wordTags.join('');
  self.disabled = true;
  fitWords();
  window.addEventListener('resize', fitWords);
}

// [...]
window.onload = wordsinblocks(self);
// [...]

工作小提琴：https://jsfiddle.net/z0u6gtbL/3/

Answer 2

工作小提琴。

我相信http://www.o-y-o.fr/simon/writer/src/jquery.livepreview.js是一个相互参照的词。

您可以像下面这样将jquery.livepreview.js直接添加到您的js中，或者使用本地/CDN引用。

​

/*
 * LivePreview jQuery Plugin v1.0
 *
 * Copyright (c) 2009 Phil Haack, http://haacked.com/
 * Licensed under the MIT license.
 */

(function($) {
  $.fn.livePreview = function(options) {
    var opts = $.extend({}, $.fn.livePreview.defaults, options);
    var previewMaxIndex = opts.previewElement.length - 1;

    var allowedTagsRegExp = new RegExp("<(/?(" + opts.allowedTags.join("|") + ")(\\s+.*?)?)>", "g");

    return this.each(function(i) {
      var textarea = $(this);
      var preview = $(opts.previewElement[Math.min(i, previewMaxIndex)]);

      textarea.handleKeyUp = function() {
        textarea.unbind('keyup', textarea.handleKeyUp);
        if (!preview.updatingPreview) {
          preview.updatingPreview = true;
          window.setTimeout(function() {
            textarea.reloadPreview()
          }, opts.interval);
        }
        return false;
      };

      textarea.htmlUnencode = function(s) {
        return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
      };

      textarea.reloadPreview = function() {
        var previewString = this.val();
        if (previewString.length > 0) {
          previewString = this.htmlUnencode(previewString);
          previewString = previewString.replace(opts.paraRegExp, "<p>$1</p><p>$2</p>");
          previewString = previewString.replace(opts.lineBreakRegExp, "$1<br />$2");
          previewString = previewString.replace(allowedTagsRegExp, "<$1>");
        }

        try {
          // Workaround for a bug in jquery 1.3.2 which is fixed in 1.4
          preview[0].innerHTML = previewString;
        } catch (e) {
          alert("Sorry, but inserting a block element within is not allowed here.");
        }

        preview.updatingPreview = false;
        this.bind('keyup', this.handleKeyUp);
      };

      textarea.reloadPreview();
    });

  };

  $.fn.livePreview.defaults = {
    paraRegExp: new RegExp("(.*)\n\n([^#*\n\n].*)", "g"),
    lineBreakRegExp: new RegExp("(.*)\n([^#*\n].*)", "g"),
    allowedTags: ['a', 'b', 'strong', 'blockquote', 'p', 'i', 'em', 'u', 'strike', 'super', 'sub', 'code'],
    interval: 80
  };

})(jQuery);


/*  Do you coding below this line  */



$(function() {
  $('textarea.source').livePreview({
    previewElement: $('p#demo'),
    allowedTags: ['p', 'strong', 'br', 'em', 'strike'],
    interval: 20
  });
});



window.onload = function wordsinblocks(self) {
  var demo = document.getElementById("demo"),
    initialText = demo.textContent,
    wordTags = initialText.split(" ").map(function(word) {
      return '<span class="word">' + word + '</span>';
    });

  demo.innerHTML = wordTags.join('');
  self.disabled = true;
  fitWords();
  window.addEventListener('resize', fitWords);
}

function fitWords() {
  var demo = document.getElementById("demo"),
    width = demo.offsetWidth,
    sizes = [7.69230769230769, 23.07692307692307, 46.15384615384614, 100],
    calculated = sizes.map(function(size) {
      return width * size / 100
    }),
    node,
    i,
    nodeWidth,
    match,
    index;


  for (i = 0; i < demo.childNodes.length; i++) {
    node = demo.childNodes[i];
    node.classList.remove('size-1', 'size-2', 'size-3', 'size-4');

    nodeWidth = node.clientWidth;
    match = calculated.filter(function(grid) {
      return grid >= nodeWidth;
    })[0];
    index = calculated.indexOf(match);


    node.classList.add('size-' + (index + 1));
  }
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
textarea {
  font-size: 2.9vw;
  font-family: "helvetica";
  resize: none;
  border: none;
}
body {
  margin: 0;
  padding: 0;
  font-size: 2.9vw;
  font-family: "helvetica";
}
h1 {
  font-family: Georgia, Times New Roman, Serif;
}
#main {
  width: 100%;
  margin: auto;
  display: table;
  float: left;
}
label {
  display: block;
  margin-top: 10px;
  margin-bottom: 4px;
}
.alltop {
  display: table;
  float: left;
  width: 100%;
  height: 2.9vw;
}
.agauche {
  display: table-cell;
  float: left;
  background-color: orange;
  width: 50%;
  height: 2.9vw;
}
.adroite {
  display: table-cell;
  float: left;
  background-color: black;
  color: orange;
  width: 50%;
  height: 2.9vw;
}
.saisi {
  width: 50%;
  display: table-cell;
  float: left;
}
.preview {
  width: 50%;
  display: table-cell;
  float: left;
  padding-top: 2.9vw;
}
.source {
  width: 100%;
  height: calc(100vh - 2.9vw);
  padding-top: 2.9vw;
}
/* Code Syntax Styles */

.csharpcode,
.csharpcode pre {
  font-size: small;
  color: black;
  font-family: Consolas, "Courier New", Courier, Monospace;
  background-color: #fff;
}
.csharpcode pre {
  margin: 0;
}
.csharpcode .rem {
  color: #008000;
}
.csharpcode .kwrd {
  color: #00f;
}
.csharpcode .str {
  color: #006080;
}
.csharpcode .op {
  color: #0000c0;
}
.csharpcode .preproc {
  color: #c63;
}
.csharpcode .asp {
  background-color: #ff0;
}
.csharpcode .html {
  color: #800000;
}
.csharpcode .attr {
  color: #f00;
}
.csharpcode .alt {
  background-color: #f4f4f4;
  width: 100%;
  margin: 0;
}
.csharpcode .lnum {
  color: #606060;
}
#demo {
  display: block;
  padding: 0 0 0 1px;
  overflow: auto;
}
#demo .word {
  float: left;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 2.9vw;
  height: 10%;
  font-family: "helvetica";
  border: 1px solid black;
}
#demo .word:hover {
  background-color: blue;
  color: white;
}
#demo .size-1 {
  width: 7.69230769230769%;
}
#demo .size-2 {
  width: 23.07692307692307%;
}
#demo .size-3 {
  width: 46.15384615384614%;
}
#demo .size-4 {
  width: 100%
}

<script src="http://www.o-y-o.fr/simon/writer/src/jquery.livepreview.js"></script>
<script src="http://code.jquery.com/jquery-1.3.2.min.js"></script>

<div class="alltop">
  <div class="agauche">

    <p style="padding-left:5px;">Write</p>
  </div>
  <div class="adroite">
    <p style="padding-left:5px;">See</p>
  </div>
</div>





<div id="main">

  <div class="saisi">
    <textarea class="source"></textarea>
  </div>


  <div class="preview">
    <p id="demo"></p>
  </div>

</div>

​