Question

我想在我的项目中只获取TinyMce中body元素的内容，然后将该部分注入另一个页面。当我将我的textarea提交给我的控制器时，tinymce的内容确实有，并且有html标签。

如何摆脱它们？ TinyMce里面有没有内置的功能来做这个？

这是我的代码：

    <script type="text/javascript">
        /*tinymce definition*/
        tinymce.init({
            selector: "textarea.tinymce",
            theme: "modern",
            height: 10,
            plugins: [
                 "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker example fullpage",
                 "searchreplace visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                 "save table contextmenu directionality emoticons template paste textcolor wordcount"
           ],
           content_css: "css/content.css",
           toolbar: "insertfile undo redo | styleselect | save | table | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons charmap code | hr paste pagebreak searchreplace spellchecker template visualblocks insertdatetime", 
           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'}
            ]
         });
    </script>

并在我的html页面中：

    <div class="page-content">
        <form action="somewhere" method="post" role="form">
            Title:<br/> <input type="text" name="title" style="width:100%"/><br/> <br /> Your Text:<br/>
            <textarea name="content" class="tinymce" cols="30" rows="10" ></textarea>
            <br /> <br /> <input type="submit" name="submit" />
        </form>
    </div>

Answer 1

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

从脚本中删除fullpage插件

Answer 2

这可能更简单：

b = "<body>";
be = "</body>";
t = tinyMCE.activeEditor.getContent();
t = t.substring((t.indexOf(b) + b.length), (t.indexOf(be)-1)) //need substring() (including comment b/c can't make edit under 6 chars)

然后可以在发送之前将“t”值主动放置在tinymce编辑器的“textarea”值（而不是setContent（））中。

希望有所帮助..

Answer 3

以下是获取正文内容和字符数的解决方案

JS FIDDLE DEMO

tinymce.init({
    selector: "textarea",
    toolbar: "mybutton",
    setup: function(editor) {
        editor.addButton('mybutton', {
            icon: 'image',
            onclick: function(e) {
                console.log(e.target);
                console.log(editor.getContent());
               var utf8length = 0;
               var string = editor.getContent();
                 for (var n = 0; n < string.length; n++) {
        var c = string.charCodeAt(n);
        if (c < 128) {
            utf8length++;
        }
        else if((c > 127) && (c < 2048)) {
            utf8length = utf8length+2;
        }
        else {
            utf8length = utf8length+3;
        }
    }
    console.log(utf8length);
    var str = editor.getContent();
      var m = encodeURIComponent(str).match(/%[89ABab]/g);
   console.log(editor.getContent());
    console.log(str.length + (m ? m.length : 0));


                  }
        });
    }});

删除TinyMCE中的html，head，body标签

3 个答案: