. Use of net mvc5 rich text [wangeditor5]

[wangEditor] Official website [wangEditor] advantage

The previous version [wangEditor3] Single function , A little BUG, But it does not affect the use , I used it all the time , I wanted to change to the latest version not long ago [wangEditor5] But it has been echoing this implementation , Later I saw that they are more like dynamic assignment , The echo problem has been solved , Just use the latest version

Get to the point , Let's go straight to the latest edition [wangEditor5] stay MVC5 And MVC4 Basic usage in

【 Based on using 】

<!--  introduce  css -->
<link href="https://unpkg.com/@wangeditor/[email protected]/dist/css/style.css" rel="stylesheet">


<!-- Rich text edit box -->
<div id="toolbar-container" style="border: 1px solid #E5E5E5; width:1100px; "></div>
<div id="editor-container" style="height: 700px; width: 1100px; border: 1px solid #E5E5E5;"></div>


<!--  introduce  js -->
<script src="https://unpkg.com/@wangeditor/[email protected]/dist/index.js"></script>
<script>
    const { createEditor, createToolbar } = window.wangEditor;
    //  Editor configuration 
    const editorConfig = {};
    editorConfig.placeholder = ' Please enter the content ';

    //  Toolbar configuration 
    const toolbarConfig = {};

    //  Create editor 
    const editor = createEditor({
        selector: '#editor-container',
        config: editorConfig,
        mode: 'simple' // default or  'simple'  Refer to the below 
    });
    //  Create toolbars 
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'simple' // default or  'simple'  Refer to the below 
    });
</script>

Copy

Copy

【 The echo data 】: When editing and modifying , How data is echoed from the background to rich text

<!--  introduce  css -->
<link href="https://unpkg.com/@wangeditor/[email protected]/dist/css/style.css" rel="stylesheet">

<!--  Hide with a ID To save the data returned from the background html Information , This belongs to MVC How to use  -->
 @Html.Hidden("HtmlData", htmldata)

<!-- Rich text edit box -->
<div id="toolbar-container" style="border: 1px solid #E5E5E5; width:1100px; "></div>
<div id="editor-container" style="height: 700px; width: 1100px; border: 1px solid #E5E5E5;"></div>


<!--  introduce  js -->
<script src="https://unpkg.com/@wangeditor/[email protected]/dist/index.js"></script>
<script>
    const { createEditor, createToolbar } = window.wangEditor;
    //  Editor configuration 
    const editorConfig = {};
    editorConfig.placeholder = ' Please enter the content ';

    //  Toolbar configuration 
    const toolbarConfig = {};

    //  Create editor 
    const editor = createEditor({
        selector: '#editor-container',
        config: editorConfig,
        mode: 'simple' // default or  'simple'  Refer to the below 
    });
    //  Create toolbars 
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'simple' // default or  'simple'  Refer to the below 
    });
</script>
<script>
    var info = $("#HtmlData").val();
    // Perform dynamic assignment 
    editor.setHtml(info);
</script>

Copy

Copy

Get it done

“ Focus on [ Downstream network ] WeChat official account , Learn more and more interesting real-time information ”

The author of this article ：[ Blogger ] dashun

Link to this article ：https://shunnet.top/i2QRzy

Copyright notice ： Reprint with reference to , thank you