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
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>
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...
There is also a tool to clean up the code.
This come with free basic version.
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'});There is also a tool to clean up the code.
This come with free basic version.
ASKER
Hey lenamtl
Where in the script would I put those things?
chilternPC
Thanks... I will make that recommendatio to the end user
Where in the script would I put those things?
chilternPC
Thanks... I will make that recommendatio to the end user
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
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
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.
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'}
]
});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'});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.
ASKER
tinymice is stripping out my html tags
In my example code what to I change so that it keeps all the html tags
In my example code what to I change so that it keeps all the html tags
first try to add this line in your JS after the tinymce JS
OR
clear your browser cache then do a test.
If this is not working check Chrome browser console errors (right click inspect)
tinymce.activeEditor.setContent(html, {format: 'raw'});OR
entity_encoding : "raw", tinymce.init({
});clear your browser cache then do a test.
If this is not working check Chrome browser console errors (right click inspect)
ASKER
I added that
This is my revised code
This is the code I paste in
And this is what I see if I open it up again
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>This is the code I paste in
And this is what I see if I open it up again
Could you tried the second method
remove this
add this
inside tinymce.init
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
remove this
tinymce.activeEditor.setContent(html, {format: 'raw'});add this
entity_encoding : "raw",inside tinymce.init
tinymce.init({
});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
ASKER
lenamtl
https://codepen.io/lenamtl/pen/BYwgez works
But when I paste that code locally it does not work.
What is it I need?
https://codepen.io/lenamtl/pen/BYwgez works
But when I paste that code locally it does not work.
What is it I need?
Ok but have you made the changes in you code see my previous message?
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Also check errors using chrome right click inspect
ASKER
Great!
Sorry for late getback
Sorry for late getback
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/