WYSIWYG HTML Editor

When I am pasting in html to the tinymice wysiwyg HTML Editor...
It is adding all kinds of what seems to be Word tags.

How do I stop that?

I need it to save only the HTML

This is my html page

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="wysiwyg.aspx.vb" MasterPageFile="~/BootstrapMaster.master"
    Inherits="wysiwyg" %>

<%@ MasterType VirtualPath="~/BootstrapMaster.master" %>

<asp:Content ID="ContentLeads" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <link href="assets/css/core.css" rel="stylesheet" type="text/css" />
    <div class="row">
        <div class="col-sm-12">
            <div class="card-box">
                <h4 class="m-b-30 m-t-0 header-title">Example</h4>

                <div style="width: 80%; padding: 20px 20px 20px 20px;">
                    <textarea id="elm1" name="area" runat="server" stye="width:90%;"></textarea>
                    <br />
                    <br />
                    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /><asp:Label ID="lblMessage" runat="server"></asp:Label>
                </div>

            </div>
        </div>
    </div>

    <script src="assets/js/jquery.min.js"></script>
    <script src="plugins/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            if ($("#ctl00_ContentPlaceHolder1_elm1").length > 0) {
                tinymce.init({
                    selector: "textarea#ctl00_ContentPlaceHolder1_elm1",
                    theme: "modern",
                    height: 300,
                    plugins: [
                        "advlist autolink 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 paste textcolor"
                    ],
                    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
                    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>

</asp:Content>

Open in new window

Larry Bristersr. DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Peter HartCommented:
thats the problem with "browser editors".
read this article about the problems

https://www.industrialmarketer.com/wysiwyg-editor-flaws-and-how-to-handle-them/

usually its best to paste the content into a plain text editor like notepad and then copy this into the editor
the other way is if its a page with the editor to use "source" view and paste the content then switch back to wysiwyg view.
some editors have a "paste from word" button to remove the word formatting rubbish

tinyMCE has a "power" paste plugin for pasting from word  here https://www.tinymce.com/docs/enterprise/paste-from-word/
0
lenamtlCommented:
Hi,

You can use template with tinyMCE, so this way you don't need to paste html code,
by selecting a template the HTML code will be added to the editor content ...
https://www.tinymce.com/docs/plugins/template/

tinyMCE have an option for raw content...
tinymce.activeEditor.setContent(html, {format: 'raw'});

Open in new window


There is also a tool to clean up the code.

This come with free basic version.
0
Larry Bristersr. DeveloperAuthor Commented:
Hey lenamtl
Where in the script would I put those things?

chilternPC
Thanks... I will make that recommendatio to the end user
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

lenamtlCommented:
For the template check there are several examples:
https://www.tinymce.com/docs/plugins/template/

You will need to download / add the template plugin
create a html code page
add the menu to the editor inside  tinymce.init

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "template",
  // entity_encoding : "raw",  //if you need this feature 
  menubar: "insert",
  toolbar: "template"
  templates: [
    {title: 'Some title 1', description: 'Some desc 1', content: 'My content'},
    {title: 'Some title 2', description: 'Some desc 2', url: 'development.html'}
  ]
});

Open in new window


You will have to check the documentation to make sure the new syntax
but this can be added in you JS after the editor JS
tinymce.activeEditor.setContent(html, {format: 'raw'});

Open in new window


This is required some learning curve, so the docs and example will help you to start.
You can post another question if you get stuck later with your code.
0
Larry Bristersr. DeveloperAuthor Commented:
tinymice is stripping out my html tags

In my example code what to I change so that it keeps all the html tags
0
lenamtlCommented:
first try to add this line in your JS after the tinymce JS
tinymce.activeEditor.setContent(html, {format: 'raw'});

Open in new window


OR
entity_encoding : "raw",

Open in new window

inside tinymce.init
 tinymce.init({ 
 });

Open in new window


clear your browser cache then do a test.
If this is not working check Chrome browser console errors (right click inspect)
0
Larry Bristersr. DeveloperAuthor Commented:
I added that

This is my revised code
<script type="text/javascript">
    $(document).ready(function () {
        if ($("#elm1").length > 0) {
            tinymce.init({
                selector: "textarea#elm1",
                theme: "modern",
                height: 300,
                plugins: [
                    "advlist autolink 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 paste textcolor"
                ], 
                toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
                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' }
                ]
            });           
        }
        tinymce.activeEditor.setContent(html, { format: 'raw' });
    });
</script>

Open in new window


This is the code I paste in
SP1
And this is what I see if I open it up again
SP2
0
lenamtlCommented:
Could you tried the second method
remove this
tinymce.activeEditor.setContent(html, {format: 'raw'});

Open in new window


add this
entity_encoding : "raw",

Open in new window



inside tinymce.init
 
tinymce.init({ 
 });

Open in new window


Or you can use a codepen to do your tests (I have paste HTML code and when check source code with the tinyMce button Tools / source code the html is good)
https://codepen.io/lenamtl/pen/BYwgez
0
Larry Bristersr. DeveloperAuthor Commented:
lenamtl
https://codepen.io/lenamtl/pen/BYwgez  works

But when I paste that code locally it does not work.

What is it I need?
0
lenamtlCommented:
Ok but have you made the changes in you code see my previous message?
0
Peter HartCommented:
personally I think when you paste a full blown webpage into a html editor it should remove the HTML that defines the page, otherwise the browser displaying the page would have 2 headers, 2 body's etc.. (see attachment you posted and I've put here )

if you want to display code like this forum you would need to use the "code plugin" and use that.
but your original post just mentioned pasting "word" and all microsoft's formatting which is different from pasting code into an online html editor.

https://www.tinymce.com/docs/plugins/code/
Screen-Shot-2018-02-16-at-07.05.48.png
0
lenamtlCommented:
@chilternPC The code I proposed is working fine and you can see the proof of concept using the codepen I provided.

@lrbrister If you still have issue this probably mean that you have an error in your code.

Make sure you remove this from your page
tinymce.activeEditor.setContent(html, {format: 'raw'});

Open in new window

and add this
entity_encoding : "raw",

Open in new window

inside the init
tinymce.init({ 
 });

Open in new window

you can place it just after this line that is present in your init code..
 height: 300,

Open in new window



This is the JS code of the codepen that is using all plugins:

tinymce.init({
  selector: 'textarea',
  height: 500,
  theme: 'modern',
  entity_encoding : "raw",
  plugins: 'print preview fullpage powerpaste searchreplace autolink directionality advcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount tinymcespellchecker a11ychecker imagetools mediaembed  linkchecker contextmenu colorpicker textpattern help',
  toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
  image_advtab: true,
  templates: [
    { title: 'Test template 1', content: 'Test 1' },
    { title: 'Test template 2', content: 'Test 2' }
  ],
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tinymce.com/css/codepen.min.css'
  ]
 });

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lenamtlCommented:
Also check errors using chrome right click inspect
0
Larry Bristersr. DeveloperAuthor Commented:
Great!
Sorry for late getback
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.