removing html, head, body tag inside TinyMCE

Question

I want to get only the content of the body element in TinyMce in my project and then inject that part inside another page. when I submit my textarea to my controller the content of tinymce does have , and html tag.

how to get rid of them ? is there any built in functionality inside TinyMce for doing this ?

Here is my code:

    <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>

and in my html page :

    <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>

If you need to get the `body` tag take a look at https://stackoverflow.com/questions/6195615/get-contents-of-body-body-within-a-string — NoWar, Dec 25 '19 at 05:53
find **fullpage** inside of **plugins** : [.....] and remove. — pankaj, Nov 02 '20 at 19:08

score 58 · Accepted Answer · edited Mar 12 '15 at 13:40

58

    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"
    ],

remove the fullpage plugin from script

edited Mar 12 '15 at 13:40

Community

1
1

answered Oct 06 '13 at 13:15

Mehdi

3,795
3
36
65

1

My customer is complaining about it and I don't see the fullpage plugin here. This is all I use: plugins : "table,inlinepopups". Any tip? – Paulo Pedroso Jul 03 '14 at 17:36
@PauloPedroso if you see the plugins: [...] section, by removing the fullpage you will be able to get that . – Mehdi Nov 29 '14 at 19:13
Thank you Mehdi, if I recall, there are some kind of controls where you say you wanna add newline and by setting that to false I was able to get that done. Unfortunately the project is with another company already and I don't have access to the code to look at how I managed it. but I do remember there was no fullpage plugin in its section. – Paulo Pedroso Nov 29 '14 at 23:47
1

@PauloPedroso that's ok, maybe I can help you in some other new stuffs in the future ... anyways Good Luck – Mehdi Nov 30 '14 at 18:04
Thanks @mehdi! Worked like a charm. – hdotluna Oct 04 '17 at 04:06
Solve my probelm! – Evan Sep 10 '20 at 07:00

score 2 · Answer 2 · edited Jan 08 '19 at 16:11

2

This might be simpler:

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)

The "t" value can be then actively placed in the "textarea" value (not setContent()) of the tinymce editor, before sending.

Hope that helps..

edited Jan 08 '19 at 16:11

MikeT

2,530
25
36

answered Jul 08 '16 at 11:05

user6565001

21
1

this should be accepted answer. Presumably one has the fullpage plugin because one wants to include the functionality, removing it is like amputating a leg for an ingrown toenail. – MikeT Jan 08 '19 at 16:25

score 0 · Answer 3 · edited Jan 22 '15 at 20:35

Here is the solutions for getting body content and character count

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));


                  }
        });
    }});

removing html, head, body tag inside TinyMCE

3 Answers3