javascript - 入力テキストを操作するための arctext.js

Question

私はジェネレーターを構築しており、arctext.js プラグインを使用しています。( http://tympanus.net/Development/Arctext/ )

これが私の問題です。必要なテキストを入力できる入力フィールドがあります。その後に、フォント サイズ、文字間隔、テキスト アークのスライダーがあります。

arctext.js は、ページの読み込み時にそこにあるテキストではうまく機能しますが、入力されたテキストでは機能しません。入力されたテキストのコードは次のとおりです

/* top */
$(document).on('keyup', '#bead-top-text', function(e) {

    $('#bTop').html($(this).val().replace(/\n/g,'<br/>'));

});
$(document).on('change', '#bead-top-font', function(e) {

    $('#bTop').css({'font-family': ''+$(this).val()+'', 'font-weight': 'normal'});

});
$("#bead-top-font-size").slider({
  range: "min",
  value: 28,
  min: 10,
  max: 100,
  slide: function( event, ui ) {
    $('#bTop').css({'font-size': ui.value+'px'});
  }
});
$("#bead-top-letter-spacing").slider({
  range: "min",
  value: 0,
  min: 0,
  max: 100,
  slide: function( event, ui ) {
    $('#bTop').css({'letter-spacing': ui.value+'px'});
  }
});
$("#bead-top-arc").slider({
  range: "min",
  value: 0,
  min: 0,
  max: 1000,
  slide: function( event, ui ) {

    $('#bTop').arctext('set', {
                    radius      : ui.value, 
                    dir         : 1, 
                    animation   : {
                        speed   : 300
                    }
                });
  }
});

私は途方に暮れています。これを機能させる方法についてのアイデアはありますか? ジェネレーターはhttp://www.xbracelets.com/xgen/にあります。