A TinyMCE usercontrol

Question

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 12-Oct-14 6:04am

WolFox WFX

Updated 14-Oct-14 13:42pm

Nelek

v2

Add a Solution

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

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

GregWyatt · Answer 1 · 2014-10-15T08:15:00

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.

Richard Deeming · Answer 2 · 2014-10-15T08:37:00

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.

WolFox WFX · Answer 3 · 2014-10-16T10:50:00

Solution 4

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

Posted 16-Oct-14 10:50am

WolFox WFX

A TinyMCE usercontrol

3 solutions

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0