Javascript 在jquery中动态添加tinymce编辑器脚本_Javascript_Jquery_Html_Tinymce

Javascript 在jquery中动态添加tinymce编辑器脚本

javascript jquery html tinymce

Javascript 在jquery中动态添加tinymce编辑器脚本,javascript,jquery,html,tinymce,Javascript,Jquery,Html,Tinymce,我有这个html页面 <html> <head> <title>jQuery add / remove textbox example</title> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <style type="text/css"> div{ padding:8px; } &l

我有这个html页面

<html>
<head>
<title>jQuery add / remove textbox example</title>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<style type="text/css">
    div{
        padding:8px;
    }
</style>

</head>

<body>

<h1>jQuery add / remove textbox example</h1>


<script type="text/javascript" src="tinymce\tinymce.min.js"></script>
<script type="text/javascript">

tinymce.init({
        selector: "textarea",
        force_p_newlines : false,


        plugins: [
                "advlist autolink autosave image link  lists charmap print preview hr anchor pagebreak spellchecker",
                "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                "table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
        ],

        toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect | cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media | inserttime preview ",
        toolbar2: "forecolor backcolor | table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft ",

        image_advtab: true,
        menubar: false,
        toolbar_items_size: 'small',

        style_formats: [
                {title: 'Bold text', inline: 'b'},
                {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
                {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
                {title: 'Example 1', inline: 'span', classes: 'example1'},
                {title: 'Example 2', inline: 'span', classes: 'example2'},
                {title: 'Table styles'},
                {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
        ],

        templates: [
                {title: 'Test template 1', content: 'Test 1'},
                {title: 'Test template 2', content: 'Test 2'}
        ]

});
</script>


<script type="text/javascript">

$(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {

    if(counter>4){
            alert("Only 4 textboxes allow");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
          '<textarea name="textbox' + counter + 
          '" id="textbox' + counter + '" value="" />');

    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
     });

     $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

        $("#TextBoxDiv" + counter).remove();

     });

     $("#getButtonValue").click(function () {

    var msg = '';
    for(i=1; i<counter; i++){
      msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
     });
  });
</script>
</head><body>

<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <label>Textbox #1 : </label><textarea id='textbox1' ></textarea>
    </div>
</div>
<input type='button' value='Add Button' id='addButton'/>
<input type='button' value='Remove Button' id='removeButton'/>
<input type='button' value='Get TextBox Value' id='getButtonValue'/>

</body>
</html>


jQuery添加/删除文本框示例
div{
填充：8px；
}
jQuery添加/删除文本框示例
tinymce.init({
选择器：“文本区域”，
force_p_新行：false，
插件：[
“advlist autolink autosave image link list charmap打印预览hr锚定页面中断拼写检查器”，
“searchreplace wordcount visualblocks visualchars代码全屏插入日期时间媒体非中断”，
“表格上下文菜单方向性表情模板文本颜色粘贴整页文本颜色”
],
工具栏1：“新建文档全页|粗体斜体下划线删除线|对齐左对齐中心对齐右对齐对齐对齐对齐|样式选择格式选择字体选择字体大小选择|剪切复制粘贴|搜索替换|粗体numlist |突出缩进块引号|撤消重做|链接取消链接锚定图像媒体|插入时间预览”，
工具栏2:“前景色背景色|表格| hr removeformat |下标上标| charmap表情符号|全屏打印| ltr rtl |拼写检查| visualchars visualblocks非中断模板分页恢复打印”，
图像\u advtab：正确，
梅努巴：错，
工具栏项目大小：“小”，
样式和格式：[
{标题：“粗体文本”，内联：“b'}，
{标题：'Red text'，内联：'span'，样式：{color:'#ff0000'}}，
{title:'Red header'，block:'h1'，style:{color:'#ff0000'}}，
{title:'example1'，inline:'span'，classes:'example1'}，
{title:'example2'，inline:'span'，classes:'example2'}，
{title:'表格样式'}，
{title:'Table row 1'，选择器：'tr'，类：'tablerow 1'}
],
模板：[
{标题：'测试模板1'，内容：'测试1'}，
{标题：'测试模板2'，内容：'测试2'}
]
});
$（文档）.ready（函数（）{
var计数器=2；
$（“#添加按钮”）。单击（函数（）{
如果（计数器>4）{
警报（“仅允许4个文本框”）；
返回false；
}   
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（'Textbox#'+计数器+'：'+
'');
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
$（“#移除按钮”）。单击（函数（）{
如果（计数器==1）{
警报（“不再需要删除文本框”）；
返回false；
}   
计数器--；
$（“#TextBoxDiv”+计数器）.remove（）；
});
$（“#getButtonValue”）。单击（函数（）{
var msg=''；
对于（i=1；ivar计数器=2
我想这是你的问题
我已经试过了，你可以查看我上面的链接
可能是重复的我不认为这是重复的。它与另一个不同one@Loktar这似乎不是一个复制品。移开旗子你这么说吗？我不这么认为