Wijmo Wednesday: Sneak peek at the v2 Editor

Let’s start with a picture. Boring, eh? Now I’m going to add a little bit of Wijmo love: Render again, and here’s what we got! Holy crap! What did Wijmo do to our simple ? It made it awesome! Our simple <textarea> is now a full blown HTML rich text editor. Check out the ribbon view in the screenshot above. We have lots of familiar commands: undo, redo, cut, copy, paste, preview, and remove formatting. Next to that are other common word processor commands: font name, font size, bold, italics, underline, and strikeout. The list goes on and on. We give you full control over how the look and feel of the control. For example, let’s say you don’t want all the ribbon stuff. Change the method call like this: <a href="//cdn.mescius.io/assets/developer/blogs/legacy/c1/2011/12/image3.png"><img src="//cdn.mescius.io/assets/developer/blogs/legacy/c1/2011/12/image_thumb3.png" alt="image" title="image"></a> The new end result is a simple text editor. <a href="//cdn.mescius.io/assets/developer/blogs/legacy/c1/2011/12/image4.png"><img src="//cdn.mescius.io/assets/developer/blogs/legacy/c1/2011/12/image_thumb4.png" alt="image" title="image"></a> Your next question might be: “Kevin, what does the output of this text editor look like, and how to I get it?” That’s an excellent question. How would you pull the value of a textarea without Wijmo? If you’re a jQuery user (and I’m assuming you are if you’re using Wijmo), you would use the .val() method. Using a Wijmo Editor is no different. <a href="//cdn.mescius.io/assets/developer/blogs/legacy/c1/2011/12/image5.png"><img src="//cdn.mescius.io/assets/developer/blogs/legacy/c1/2011/12/image_thumb5.png" alt="image" title="image"></a> What does the output look like? If I wire up the full example by adding a button to the page, and assigning a click event (the screenshot above), I get the following output: <a href="//cdn.mescius.io/assets/developer/blogs/legacy/c1/2011/12/image6.png"><img src="//cdn.mescius.io/assets/developer/blogs/legacy/c1/2011/12/image_thumb6.png" alt="image" title="image"></a> It’s all HTML in the end! Take this output and do whatever you need with it. This is just scratching the surface of what is possible with the Wijmo editor, so I encourage you to go <a href="http://c1.ms/wijmov2beta">download the v2 BETA</a> and try it out for yourself. Kevin Griffin <a href="mailto:keving@componentone.com">keving@componentone.com</a> <a href="http://twitter.com/1kevgriff">Follow me on Twitter</a></p> </div> </div> </div> </section> <!--Blog Header--> <section class="content component ds-blogcategories text base-text"> <div class="row"> <div class="col"> </div> </div> </section> <!--// Blog Categories--> </div> <!--// Content column --> <!-- Second column --> <div class="left-col col-xl-3 col-lg-4 col-12 order-lg-1 order-2 ds-blogsidebar"> <!-- Author Bio --> <section class="content component author-bio base-bg"> <div class="item"> <div class="image"> <picture> <img class="" src="//cdn.mescius.io/umb/media/1gslowfp/mescius_logomark_rgb.png" alt="" loading="lazy"> </picture> </div> <!-- Info --> <div class="info"> <p class="heading base-heading sm"> MESCIUS inc. </p> </div> <!--// Info --> </div> </section> <!--// Author Bio --> </div> <!--// Second column --> </div> </div> </section> <section class="ds-blogcomments-wrap"> <div class="container"> <div class="row"> <div class="col"> <section id="comments" class="content component comments base-bg ds-blogcomments"> <section id="comments" class="content component comments base-bg ds-blogcomments" data-nosnippet="true"> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'developer-mescius'; // required: replace example with your forum shortname /* * * DON'T EDIT BELOW THIS LINE * * */ (function () { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <script id="dsq-count-scr" async src="//developer-mescius.disqus.com/count.js"></script> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> <a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a> </section> </section> </div> </div> </div> </section> <!--// Stciky Links --> <div class="stickyLinks"> <a href="/"><img src="" /></a> </div> </main> <!--// Content --> <!-- Footer --> <footer id="site-footer" class="footer-2020" style="padding:0px"> <div> <!-- Row --> <div> <div class="code-item " data-os-animation="fadeIn" data-os-animation-delay="0s" data-os-animation-duration="1.2s"> <section class="footer-2020"> <div class="container"> <div class="row"> <div class="col-lg-3 company-info"> <ul> <li> <a href="/" class="msc-logo"> <img src="//cdn.mescius.io/umb/media/qpqhzv25/mescius-logo-horiz-white.svg" width="260" height="79" class="msclogo" alt="MESCIUS" loading="lazy" /> </a> </li> <li> <p class="copyright">© <span id="gcyear"><script>document.write(new Date().getFullYear())</script></span> MESCIUS inc. All Rights Reserved.  <strong>·</strong>  1.800.858.2739</p> <p class="disclaimer">All product and company names herein may be trademarks of their respective owners.</p> </li> </ul> </div> <div class="col-lg-3 util-company"> <ul> <li> Company </li> <li> <a href="/about">About</a> </li> <li> <a href="/contact">Contact</a> </li> <li> <a href="/about/media-center">Media Center</a> </li> <li> <a href="/legal/privacy-policy">Privacy</a> </li> <li> <a href="/legal/tos">Terms</a> </li> <li> <a href="/legal/eula">EULA</a> </li> </ul> </div> <div class="col-lg-2 util-social"> <ul> <li> Follow Us </li> <li> <a href="https://www.facebook.com/MESCIUSinc" target="_blank"> <img src="//cdn.mescius.io/umb/media/yf4hstnf/icons8-facebook-32.png" alt="Follow MESCIUS on Facebook" loading="lazy"> </a> </li> <li> <a href="https://twitter.com/MESCIUS_inc/" rel="nofollow" target="_blank"> <img src="//cdn.mescius.io/umb/media/q5vlhoel/icons8-twitterx-32.png" alt="Follow MESCIUS on Twitter" loading="lazy"> </a> </li> <li> <a href="https://www.youtube.com/@MESCIUS_inc" target="_blank"> <img src="//cdn.mescius.io/umb/media/sh2l41n0/icons8-youtube-32.png" alt="Follow MESCIUS on Youtube" loading="lazy"> </a> </li> <li> <a href="https://www.linkedin.com/company/mesciusinc" target="_blank"> <img src="//cdn.mescius.io/umb/media/zepddkj4/icons8-linkedin-32.png" alt="Follow MESCIUS on LinkedIn" loading="lazy"> </a> </li> <li> <a href="/blogs/rss-feeds" target="gc_rss" title="RSS Feed"> <img src="//cdn.mescius.io/umb/media/etnhwpmp/icons8-rss-32b.png" alt="MESCIUS blog rss feeds" loading="lazy"> </a> </li> </ul> </div> <div class="col-lg-4 util-subscribe"> <ul> <li>Get the Latest News</li> <li>Stay up to date with blogs, eBooks, events, and whitepapers.</li> <li><a href="/subscribe" class="gc-btn">Join Now</a></li> </ul> </div> </div> </div> </section> </div> </div> <!--// Row --> </div> </footer> <!--// Footer --> </div> <!--// Site --> <!-- Back to top --> <div class="usn_back-to-top position-right"> <button id="back-to-top-link" role="button" aria-label="Back to top" class="btn base-btn-bg base-btn-bg base-btn-bg-solid base-btn-bg-hover-solid base-btn-text base-btn-borders btn-back-to-top"> <span></span> <i aria-hidden="true" class="icon"></i><span aria-hidden="true" class="d-none">Back to top</span> </button> </div> <!--// Back to top --> <script src="https://cdn.mescius.com/sb/sitebuilder-js-bundle.js.v6" type="text/javascript"></script> </body> </html>