Nếu ứng dụng Winform của bạn cần nhập liệu và lưu trữ văn bản ở dạng HTML hoặc BBCODE thì đã có giải pháp để thực hiện bằng việc nhúng CKEditor vào WebBrowser control của C#.
Download SoureCode của Project tại đây
Trước hết, tạo 1 Windows Form Project với 1 form . Trong form thêm các control sau:
1. WebBroser control (ID: webBrowser1): để hiển thị trình soạn thảo HTML (hoặc BBCODE) từ 1 file html
2. TextBox (ID: txtValue) để test thử việc truyền 1 giá trị ở ngoài vào Editor
3. Button “Set Value to Editor”: khi click vào button này, giá trị ở textbox txtValue sẽ được gán cho editor trong webBrowser1
4. Button “Get Value from Editor”: khi click vào button này, hiện một MessageBox thể hiện giá trị của editor trong webBrowser1
5. Combobox “Mode” để chuyển qua lại giữa 2 chế độ HTML và BBCODE
Code:
private void Form1_Load(object sender, EventArgs e)
{ //Hiển thị HTML Editor khi formload
comboBox1.SelectedIndex = 0;
//Gán Url cho webBrowser1 - WebBrowser sẽ thể hiện trang html ckeditor.html trong thư mục debug/bin/editor
webBrowser1.Url = new Uri(Application.StartupPath.ToString() + @"\editor\ckeditor.html");
this.Text = "HTML Editor";
txtValue.Text = "<b>Test Value</b>";
}
private void button1_Click(object sender, EventArgs e)
{ //Gọi function "setValue" khai báo trong file ckeditor.html hoặc ckeditor-bbcode.html để gán giá trị từ textbox cho editor
webBrowser1.Document.InvokeScript("setValue", new[] { txtValue.Text.ToString() });
}
private void button2_Click(object sender, EventArgs e)
{ //Gọi function "getValue" khai báo trong file ckeditor.html hoặc ckeditor-bbcode.html để lấy giá trị từ editor
string contentStr = webBrowser1.Document.InvokeScript("getValue").ToString();
MessageBox.Show(contentStr);
}
private void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
{ //Code xử lý việc chuyển chế độ editor khi chọn trong comboBox1
if (comboBox1.SelectedIndex == 0) {
webBrowser1.Url = new Uri(Application.StartupPath.ToString() + @"\editor\ckeditor.html");
this.Text = "HTML Editor";
txtValue.Text = "<b>Test Value</b>";
}
else {
webBrowser1.Url = new Uri(Application.StartupPath.ToString() + @"\editor\ckeditor-bbcode.html");
this.Text = "BBCODE Editor";
txtValue.Text = "[b]Test Value[/b]";
}
}
Tiếp theo, nhúng CKEditor vào project
1. Download source Ckeditor tại đây
2. Tạo thư mục editor trong thư mục debug/bin của Project, giải nén file vừa tải vào thư mục editor
Sau khi giải nén, cấu trúc thư mục editor sẽ như sau:
Trong thư mục này, tạo 2 file ckeditor.html và ckeditor-bbcode.html để chỉnh sửa văn bản ở 2 chế độ khác nhau. Mã của 2 file này lần lượt là:
ckeditor.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="ckeditor.js"></script>
<script src="adapters/jquery.js"></script>
<script>
//Khởi tạo Editor
CKEDITOR.disableAutoInline = true;
$(document).ready(function() {
$('#editor1').ckeditor({
enterMode: CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P
});
CKEDITOR.on('instanceReady', function(evt) {
var editor = evt.editor;
editor.execCommand('maximize');
});
});
//Gán giá trị cho editor
function setValue(stringvalue) {
$('#editor1').val(stringvalue);
}
//Lấy giá trị từ editor
function getValue() {
return $('#editor1').val();
}
</script>
</head>
<body>
<textarea width="100%" id="editor1" name="editor1">
<p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
</textarea>
</body>
</html>
ckeditor-bbcode.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="ckeditor.js"></script>
<script src="adapters/jquery.js"></script>
<script>
CKEDITOR.disableAutoInline = true;
$(document).ready(function() {
$('#editor1').ckeditor({
enterMode: CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,
extraPlugins: 'bbcode'
});
CKEDITOR.on('instanceReady', function(evt) {
var editor = evt.editor;
editor.execCommand('maximize');
});
});
function setValue(stringvalue) {
$('#editor1').val(stringvalue);
}
function getValue() {
return $('#editor1').val();
}
</script>
</head>
<body>
<textarea width="100%" id="editor1" name="editor1">
[b]Apollo 11[/b] was the spaceflight that landed the first humans, Americans [url=http://en.wikipedia.org/wiki/Neil_Armstrong]Neil Armstrong[/url] and [url=http://en.wikipedia.org/wiki/Buzz_Aldrin]Buzz Aldrin[/url], on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.
</textarea>
</body>
</html>
Muốn soạn thảo ở chế độ BBCODE, bạn cần download thêm plugin BBCode Ouput Format của CKEditor. Download tại đây. Sau khi download, giải nén vào thư mục debug/bin/editor/plugins trong Project.
Như vậy là xong, các bạn có thể download SoureCode của Project tại đây để nghiên cứu kỹ hơn cách tạo HTML editor và BBCODE editor bằng CKEditor trong C# Winform