Jquery live preview-el kapcsolatban teszem fel kérdésem. Valaki segítene?
A kód így néz ki jelenleg.
<script type="text/javascript" src=" [link]
<script type="text/javascript" src="../jquery.livepreview.js"></script>
<script type="text/javascript">
$(function() {
$('textarea.source').livePreview({
previewElement: $('div.preview'),
allowedTags: ['b' , 'i', 'center', 'u', 'li', 'br', 'color'],
interval: 20
});
});
</script>
Azt szeretném, hogy bbkód formában ([b], [i], [center], stb..) jelenítse meg a previewer, mert jelenleg csak a html tag-eket olvassa.
Előre is köszönöm a segítséget!
válasza:A BBkód működjön csak.
A textarea-ban bbkódok vannak megadva, és azt szeretném, hogy alatta folyamatosan lehessen látni, hogy hogyan is fog kinézni a tartalom formázva. (ahogy a menüpontban is meg fog jelenni)
válasza:szia!
Felelősséget nem vállalok érte!
Gyorsan kipróbáltam :) nekem megy. Ha nem megy neked,vagy hibásan működik akkor szólj.
A livepreview.js fájlt kell átírnod erre:
/*
* LivePreview jQuery Plugin v1.0
*
* Copyright (c) 2009 Phil Haack, [link]
* 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, "&");
};
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);
Isten vagy, működik!!!
Annyit esetleg még lehetne, hogy működjön a [size=5] és a color=red tag is? :)
válasza:Szia!
Elegendő, hogyha csak erre a kettő fajtára működik?
válasza: válasza:/*
* LivePreview jQuery Plugin v1.0
*
* Copyright (c) 2009 Phil Haack, [link]
* Licensed under the MIT license.
*/
(function($) {
$.fn.livePreview = function(options) {
var opts = $.extend({}, $.fn.livePreview.defaults, options);
var previewMaxIndex = opts.previewElement.length - 1;
opts.allowedTags = opts.allowedTags.concat(opts.allowedTagsWithEquals);
var allowedTagsRegExp = new RegExp("\\[(/?(((" + opts.allowedTagsWithEquals.join("|") + ")=[a-zA-Z0-9]+)|(" + 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, "&");
};
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(opts.colorRegExp, '<span style="color:$4">$6</span>');
previewString = previewString.replace(opts.sizeRegExp, '<span style="font-size:$4">$6</span>');
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"),
colorRegExp: new RegExp("(\\[)(color)(=)([a-zA-Z0-9]+)(\\])(.*?)(\\[/color\\])", "g"),
sizeRegExp:new RegExp("(\\[)(size)(=)([0-9]+)(\\])(.*?)(\\[/size\\])", "g"),
allowedTags: ['a', 'b', 'strong', 'blockquote', 'p', 'i', 'em', 'u', 'strike', 'super', 'sub', 'code'],
interval: 80
};
})(jQuery);
Írd meg hogy megy e :P
válasza:milyen böngészőben futtatod? Nekem chrome-ban megy.
[size=14]béla[color=red]béla[/color][/size][br]
[color=green]sanyi[size=20]sanyi[/size][/color]
nekem erre a példára működik.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!