Blazor promises to empower C# developers to build modern web applications quickly, using a language and ecosystem they already know and understand.

Tinymce also supports on-demand loading, you can customize plugins through its official build page. Let me analyze some of the other rich texts on the market: summernote Let me start with a rich text that I definitely would not recommend.It is inconsistent with many recognized default behaviors between others. Init (: selector: 'textarea',: height: 500,: theme: 'modern',: plugins: 'print preview fullpage powerpaste searchreplace autolink directionality advcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount tinymcespellchecker a11ychecker imagetools mediaembed. I’m not understanding why Markdown would deprecate TinyMCE. Markdown is markup, and seemingly more appropriate for the plain text editor. TinyMCE is a visual editor that shows WISYWIG. I could see Markdown markup replacing the HTML markup for the TinyMCE buttons, but the TinyMCE editor would still show WISYWIG. It’s just not making sense to me. Dec 13, 2018 TinyMCE is another popular WYSIWYG-editor that is used by many people. Markdown mode provides a live preview, sync scrolling of code and preview windows and checks the Markdown code for errors.

So let’s see how this stacks up with a real-world requirement; building a simple markdown editor.

It’s hard to imagine a world without Markdown these days.

For everything from blog posts, to github issues and self published ebooks, Markdown has cemented its position has a convenient way to edit plain text, whilst maintaining some control over the ultimate format and appearance of your work.

Today’s Blazor example centres on building a markdown text editor. Photos for mac icon.

The requirement is to provide a text box which accepts markdown and generates a live preview of the resulting HTML.

Here’s how I’d approach building something like this in Blazor:

• Create the basic HTML structure (rows, columns etc)
• Add the essential HTML elements (textarea in this case)
• Add bindings to make the textarea value sync with a field/property in the component
• Implement code to convert the markdown to HTML
• Render the HTML on screen

One last step..

Check your inbox and click on the link in the email to complete the signup process and start receiving the emails!

Let’s start with some basic HTML structure….

Editor.razor

I’m sticking to Bootstrap here because my CSS kinda sucks…

This gives us a simple two column layout for our page; now to add a textarea

Run this and you’ll see a text area, nothing very interesting going on yet…

Now we’re ready to take the next step; we need to take whatever is entered into the textarea and store it in our component’s state.

For this, we can use properties and Blazor’s binding syntax. We just need to declare a couple of attributes:

Mail client for mac os x. These attributes tell Blazor to bind the value of textarea to a property called Body and to update Body whenever the value of our textarea changes.

The result? Body will always reflects the contents of the textarea. Whenever the value of textarea changes, Body will be instantly updated with the new value.

Now you might have noticed we haven’t created a Body property anywhere yet.

Whilst it is possible to write all your Blazor UI logic in @code blocks in the razor files themselves, I generally prefer to put that code into a separate class.

Let’s create a component base class for our component and declare the Body property in there:

Editor.razor.cs

Now we just need to update our component markup to inherit this component base class and, whilst we’re here, add a binding to render the current value of Body.

This way we can check that ‘Body’ definitely does update as we change the contents of the textarea.

Run this, type something into the textarea and you’ll see an instant preview of what you typed.

But, hold the phone, I promised an all-singing and dancing HTML preview…

Tinymce Markdown Support

As it stands, if you throw markdown at this textarea you’re just going to see that markdown in the preview, exactly as you typed it…

Happily, we don’t need to expend much effort to get HTML from this markup, we can employ the excellent Markdig .NET Markdown processor to do it for us.

Bring in the NuGet package…

Markdig will take any text and process the Markdown for us, spitting HTML out the other end.

Let’s add a new Preview property to our component which will invoke Markdig every time we request its value.

I’ve also updated Body so it will always have an initial empty string value (rather than being null which would trip Markdig up).

Now we can update our component markup to render this preview instead of Body

Run this now and tada…

I mean, it’s HTML, but not the glorious preview we were hoping for.

Ideally we’d want to actually render the HTML and get a sense of how our content is shaping up; seeing the raw HTML itself isn’t much use.

Tinymce Markdown Link

Luckily Blazor has one more trick up its sleeve; rendering raw markup.

By default Blazor won’t just push this markup out for your browser to render; after all, if you blindly accept code you don’t own and run it in the browser, any number of bad things could happen!

But if you’re happy with the risks, you can force Blazor to spit this code out raw and let the Browser do as it pleases.

Now we’re talking.

A snipping tool for mac. Type markdown in on the left, get HTML rendered on the right.

Sometimes as a developer you come up against a requirement which you expect to be complex (and take ages) to build, and every now and again it turns out to be easier than you thought.

In this case, building a simple markdown editor using Blazor turned out to be pretty straightforward.

Markdig does all the heavy lifting and a tiny amount of Blazor binding syntax handles the rest.

Check out the complete source code for this example here.

One last step..

Check your inbox and click on the link in the email to complete the signup process and start receiving the emails!

Next up

Rich text editor is a core part of management system. We have gone through many rich texts and decided using Tinymce.

Reasons

• tinymce is one of the most popular rich texts (with ckeditor, is also famous, the new version is very good), widely used in market, and it has detailed documentation and rich configuration. One of the keys to using rich text is to copy formatting. We tried using Korean text rich summernote before and tt wasted a lot of time on doing some normal tasks, very unfriendly. But tinymce's formatting is pretty good. It also has a value-added feature is powerpaste which is extremely powerful, support for copying everything from word or any other place. Extensibility is also important and with tinymce, writing plugins is easy. The last point is that the documentation is very good, it is easy to get the configuration item or customize plugins though the official website.

Lets go though some other rich texts on the market:

• summernote We definitely would not recommend. It is inconsistent with many recognized default behaviors between others. For the use of a dialog feature, they import the bootstrap. Formatting is also very bad.

• ckeditor Ckeditor is also a good rich text, highly recommended.

• quill Is also a very hot rich text, the skin is very elegant. Writing a plug-in based on it is also very simple. The API design is very cool. But it is not too convenient for operation picture and hard to change. It's still recommended if there is no operation of the picture

• medium-editor The famous medium rich text (unofficial product), is a nice rich text, easy to use, simple and clean, easy to write extensions. If you want to have a light and simple editor, this would be suitable. But in term of rich texts which can handle rich content (complex HTML, embeded media, support HTML mode..), this editor is not recommended.

• Squire A relatively light, rich text, only 11.5kb after compression, relative to other rich text is very small, recommended features is not complicated suggestion.

• slate A completely customizable framework for building rich text editors. Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs which are becoming table stakes for applications on the web without your codebase getting mired in complexity. This looks cool and potential.

Above rich editors are not related to vue, but they are easy to wrap into vue component, and in fact encapsulation vue components is very convenient, flexible and controllable. In addition vue really doesn't have any good rich text, unlike react has draft produced by facebook, editor produced by ory. Vue doesn't have this product from a big company.

Of course, you can also choose some paid rich text editors, like froala-editor. There are many benefits of using commercial products, in fact, it may save a lot of cost compared to the development price.

# Tinymce

Here to briefly talk about the use of Tinymce in you own projects.

The current method of using the global reference. Code in: public/static/tinymce4.7.5 (The files in the public/static directory will not be built by webpack), import directly in blade template file. And make sure it's in the order before your app.js!

The current use of the npm installation 'Tinymce' method is more complex and has some problems (which may be used in the future). 👾

UsageBecause rich text is not suitable for two-way data, so only watch the content changes once, and then will not be watch again. If later you need to change the rich text content, you can set by this.refs.xxx.setContent().

The source code is also very simple, any other needs can be modified in @/components/Tinymce/index.vue.