TinyMCE用户控件 [英] A TinyMCE usercontrol
问题描述
大家好，
我正在尝试将TinyMCE嵌入到C＃用户控件中。
以下示例HTML文件在IE11，FireFox和Chrome最新版本下运行正常。
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.
<!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>
问题是当我在usercontrol中嵌入WebBrower .NET控件时，这个相同的HTML文件渲染效果不佳。菜单和工具栏没有正确调整大小，宽度是用户控件的宽度。
下面的代码显示了一个带有TinyMCE用户控件的表单。
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.
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"));
}
}
}
有人有个主意吗？
非常感谢
从以下非解决方案复制的其他信息
上下文是Windows窗体应用程序。
我创建一个UserControl一个WebBrowser contreol
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
using System;
using System.Windows.Forms;
namespace CacheFileGenerator
{
public partial class TinyMCE : UserControl
{
public Uri Url
{
get
{
return webBrowser.Url;
}
set
{
webBrowser.Url = value;
}
}
}
}
然后我把这个TinyMCE放在Windows窗体并给出html文件的URL ...问题出现了，如果我更改了tinymce的大小事件。
我用CKEditor尝试了同样的事情它工作正常。不知道:-（！
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 :-( !
推荐答案
我仍然不完全确定你的实现中的所有部分是什么。所以我想提出我自己的解决方案，可能有所帮助此外，这里有一篇关于创建用户控件的文章的链接，以防你发现它有用。用户控制
我的解决方案：
将Web用户控件添加到名为TinyMCE的项目中。
在ASCX文件中放置以下内容（您需要更改tinyMCE的参考位置以适合您的设置）：
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>
在ASCX.cs中文件放置以下内容：
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 \，+
主题：\modern \，）;
if（Height！= null）
{
sb.Append（height：\+ Height.ToString（）+\，）;
}
if（Width） ！= null）
{
sb.Append（width：\+ Width.ToString（）+\，）;
}
sb。附加（
插件：[+
\advlist autolink链接图像列表charmap打印预览hr anchor pagebreak spellchecker \，+
\searchreplace wordcount visualblocks visualchars代码全屏insertdatetime media nonbreaking\，+
\保存表contextmenu方向性表情符号模板粘贴textcolor \+
]，+
菜单栏：\编辑格式插入表格视图工具\，+
工具栏：\undo redo | forecolor backcolor |粗体斜体| alignleft aligncenter alignright alignjustify | bullist numlist outdent indent |链接图像|预览\，+
}））;）;
返回sb.ToString（）;
}
公共字符串GetContent（）
{
返回HTMLText.InnerText;
}
}
(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; } }
关于此代码的一些注意事项：公共单位高度和宽度函数允许您使用高度和宽度属性aspx页面上的用户控件声明。
TinyMCE会自动调整其宽度到包含它的元素。但是，如果指定了它的宽度和高度，它将遵循它们，而不是包含它的元素。 ConstructInitJavascript（）函数使用在用户控件上设置的width和height参数创建tiny.init函数。这将允许您指定控件的高度和宽度。如果未指定这些，则tinymce将其宽度扩展到其包含元素的宽度。高度似乎没有超出最小设置。
GetContent（）方法从tinyMCE编辑器返回HTML文本。
要使用aspx页面上的控件注册用户控件：
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在aspx页面上创建一个用户控件。
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.
问题是，默认情况下，WebBrowser控件卡在IE7模式下：
http://www.west-wind.com/weblog/posts/2011/May/21/Web-Browser-Control-Specifying -the-IE-Version [ ^ ]
您需要修改安装了应用程序的每台计算机上的注册表，以使WebBrowser控件使用更新的渲染引擎。
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.
这篇关于TinyMCE用户控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
