When doing web development, we often use HTML rich text box editor to write detailed contents of articles or product descriptions. Common editors include FCKEditor, CKEditor, TinyMCE, KindEditor and ueditor (Baidu's),
We know that there is a webBrowser control on WinForm. This article uses webBrowser combined with the web HTML editor KindEditor on the Web. KindEditor is an editor written by Chinese people. It is very good to use lightweight. At least I know that Paipai and Open Source China currently use this editor.
The official address of KindEditor is:/
First we need to go to the official website or Github:/kindsoft/kindeditorDownload a copy of the code, then unzip it into the bin folder of our project, and then create a new html file named in the bin/KindEditor directory, and type the following code:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Html Editor</title>
<script charset="utf-8" src=""></script>
<script charset="utf-8" src="lang/zh_CN.js"></script>
<script>
= function () { return true; };
var editor;
var contentSeted = false;
(function (K) {
editor = ('#details', {
allowFileManager: false,
allowImageUpload: false,
resizeType: 0, //The size cannot be changed fullscreenMode: true,
items: [
'undo', 'redo', '|', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', '|', 'clearhtml', 'quickformat', 'selectall', 'flash', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'link', 'unlink', '|', 'template', 'code', 'source', 'preview',
],
afterChange: function () {
if (editor && contentSeted)
(());
}
});
setContent(());
});
function setContent(content) {
if (editor) {
contentSeted = false;
(content);
contentSeted = true;
}
}
</script>
</head>
<body style="padding: 0; margin: 0;">
<textarea style="display: block; width: 680px; height: 100%; visibility: hidden;"></textarea>
</body>
</html>If you have used KindEditor on the Web, you should be familiar with the above code, because it is actually just to initialize an HTML editor. We also define a setContent method in the code, which is used to set the content of the HTML editor. We need to call this method in the C# code.
Okay, let's go back to WinForm, we pull a webBrowser control on the interface, and type the following code in cs:
namespace WinformHTMLEditor
{
[ComVisible(true)]
public partial class Form1 : Form
{
string content = "";
public Form1()
{
InitializeComponent();
this. = new ( + "\\kindeditor\\", );
this. = this;
}
public void SetDetailContent()
{
("setContent", new object[] { content });
}
public string GetContent()
{
return content;
}
public void RequestContent(string str)
{
content = str;
= content;
}
private void richTextBox1_TextChanged(object sender, EventArgs e)
{
if ()
{
content = ;
SetDetailContent();
}
}
private void webBrowser1_Resize(object sender, EventArgs e)
{
this.();
}
}
}This is all about this article about WinForm implementing HTML editor. I hope it will be helpful to everyone's learning and I hope everyone will support me more.