Click here to Skip to main content
15,879,096 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi All,

I'm trying to embed TinyMCE in a C# usercontrol.

The sample HTML file below works fine under IE11, the FireFox and Chrome latest version.

HTML
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: "textarea#HTMLEditor"
        });
    </script>
</head>
<body>
    <textarea id="HTMLEditor" name="HTMLEditor"></textarea>
</body>
</html>


The problem is that when I embed a WebBrower .NET Control in usercontrol, this same HTML file is not well rendering. The menus and toolbars are not correctly resize and their width is the width of the usercontrol.

The code below shows a form with a TinyMCE usercontrol.

C#
using System;
using System.IO;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            tinyMCE.Url = new Uri(String.Concat(Path.GetDirectoryName(Application.ExecutablePath), @"\TinyMCE.html"));
        }
    }
}


Does somebody have an idea ?

Thanks a lot

additional information copied from non-solution below
Hi,

The context is a Windows Forms Application.

The I create a UserControl with a WebBrowser contreol

C#
using System;
using System.Windows.Forms;

namespace CacheFileGenerator
{
  public partial class TinyMCE : UserControl
  {
   
    public Uri Url
    {
      get
      { 
        return webBrowser.Url;
      }
      set
      {
        webBrowser.Url = value;
      }
    }
  }
}


Then i put this TinyMCE on a Windows Form and give the url of the html file ... and the problem appears, event if i change the size of tinymce.

I tried the same thing with CKEditor and it works fine. No idea :-( !
Posted
Updated 14-Oct-14 13:42pm
v2
Comments
GregWyatt 14-Oct-14 14:41pm    
Can you clarify a few things? Are you able to set the size parameters of tinymce in its init script? Are you creating a user control as in an ascx file? Or are you just trying to create a web form aspx page with the tinymce control and other input buttons? If you are making a user control ascx, could you please provide all of the code?
Nelek 14-Oct-14 19:42pm    
OP answered you in a non-solution I copied the content to the question, please have a look if he delivered the required information

I am still not completely sure what all of the pieces are in your implementation. So I wanted to propose my own solution that may help you. Also, here is a link to an article about creating User Controls in case you find it useful. User Control

My Solution:
Add Web User Control to project named TinyMCE.

In the ASCX file place the following (You will need to change the reference location of tinyMCE to fit your setup):
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TinyMCE.ascx.cs" Inherits="TinyMCE"  %>

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

<textarea id="HTMLText" runat="server" name="area" style="position: relative;"></textarea>


In the ASCX.cs File Place the following:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class TinyMCE : System.Web.UI.UserControl
{
    public Unit Height { get; set; }
    public Unit Width { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(Page, this.GetType(), "initScript", ConstructInitJavascript(), true);
    }

    private string ConstructInitJavascript()
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("$(document).ready(");
        sb.Append("tinymce.init({ " + 
                    "selector: \"textarea\"," +
                    "theme: \"modern\",");
       

        if(Height != null)
        {
            sb.Append("height:\"" + Height.ToString() + "\"," );
        }
        
        if(Width != null)
        {
            sb.Append("width:\"" + Width.ToString() + "\"," );
        }
        sb.Append(
         "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\""+
        "],"+
        "menubar: \"edit format insert table view tools\","+
        "toolbar: \"undo redo | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | preview \","+
        "}));");

        return sb.ToString();
    }

    public string GetContent()
    {
        return HTMLText.InnerText;
    }
}

Some notes about this code: The public Unit Height and Width functions are what allow you to use the Height and Width properties on the user control declaration on the aspx page.

TinyMCE will adjust its width automatically to the element containing it. However, if its width and Height are specified it will honor them and not the element that contains it. The ConstructInitJavascript() function creates the tiny.init function with the width and height parameters that are set on the user control. This will allow you to specify the height and width of the control. If these are not specified tinymce will expand its width to the width of its containing element. The height does not seem to expand beyond a minimum setting.

The GetContent() method returns the HTML text from the tinyMCE editor.



To use the control on the aspx page register the user control:
<%@ Register src="TinyMCE.ascx" tagname="TinyMCE" tagprefix="uc1"  %>


Then create a user control on the aspx page.
<uc1:TinyMCE ID="tiny"  runat="server" Width="500" Height="700" />


I hope this helps, please let me know if you have any questions or need further assistance.
 
Share this answer
 
v2
The problem is that, by default, the WebBrowser control is stuck in IE7 mode:
http://www.west-wind.com/weblog/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version[^]

You'll need to modify the registry on each computer that your application is installed on to get the WebBrowser control to use a more up-to-date rendering engine.
 
Share this answer
 
v2
o o o o o o o o o o o o o o o

thx for all.

o o o o o o o o o o o o o o o
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900