Rather than forcing someone to use HTML tags, they should be able to highlight and toggle as if they were using a text editor. Well, I got as far as making the three buttons for bold, italic, and underline and realized I was reinventing the wheel. I had just added TinyMCE to our text areas for custom text our clients entered in our development environment. It was incredibly easy to use and it has a permissive license.
 |
| TinyMCE Sample - http://www.tinymce.com/ |
I recognize I'm writing this tutorial when there are others that offer help (one I used for help) on getting this set up. The one I used for help is pretty much the information that's here. That was the only other tutorial I found that was worth while. If you get tired of reading my outline of the solution, go read that one. If you want to continue with me, then go get TinyMCE. I actually downloaded it and stored it to a local resource, but you could always just use the CDN if you want. I'd recommend local.
Once you have that done, let's start a visual studio project. I'll use Visual Basic for this example but the C# code is almost identical (add curly braces, stir, and call me in the morning).
There are only 3 real pieces to this entire thing.
- Web browser control pointed at your local HTML file with the JavaScript stuff all in it
- A method to set the content inside the TinyMCE editor
- A method to get the content out of the TinyMCE editor
Best part? The heavy lifting is all JavaScript in the HTML page. For those that found this page via a search engine, the short version is make a method in the JavaScript for getting and setting the content of TinyMCE. Then use your big boy programming language (just kidding, I love you JavaScript) to access that information. The reason you need the get and set methods is because you're probably going to be doing something with the content that's being filled in or displayed.
In my case, I'm pulling html content out of a database and shoving it in TinyMCE so non-technical folks can easily create styling for text. Once they're done, I invoke the get and then store the result back into the database.
Ok, enough with details. Let's see the code you'll need to produce.
HTML
Replace the bold lettering with what you need.
<script type="text/javascript" src="file:///yourpath/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
function GetContent() {
return tinymce.get('tinyMceEditor').getContent();
}
function SetContent(htmlContent) {
tinymce.get('tinyMceEditor').setContent(htmlContent);
}
tinymce.init({ whole host of options });
</script>
<body>
<form method="post">
<textarea name="tinyMceEditor" cols="1" rows="1" style="width:100%; height: 100%"></textarea>
</form>
</body>
That's pretty much it. You'd do well to add your usual html tags to it so it is recognized as html. But yeah. That's all the html it took to get working. The cool part is setting up the other set of code for this.
Drop a web browser control on a form, tell it to navigate to your html doc. Awesome, TinyMCE loads right? So that's fantastic. But let's add the two methods it takes to get and set content. Which are crazy simple.
Public Sub SetTinyMceContent(ByVal htmlContent As String) Dim contents() As Object = {htmlContent} TinyMceBrowser.Document.InvokeScript("SetContent", contents) End Sub
In case it's not apparent, the TinyMceBrowser object is my browser control. Now the get content method.
Public Sub GetTinyMceContent() Dim html As Object = TinyMceBrowser.Document.InvokeScript("GetContent") Dim content As String = html.ToString() End Sub
That's it. Now obviously you probably want the Get as a function that returns a value unless it's just going to run off and perform its procedure. But that's really all it takes. I have more code in these methods to perform stuff related to our database, but these two lines in each method are where the magic is happening.
Ta da. Short. Sweet. Simple tutorial on how to bring some slick JavaScript text editor action to your Windows applications.
No comments:
Post a Comment