.Net MVC5 富文本[wangEditor5] 的使用

[wangEditor]官网 [wangEditor]优势

之前版本[wangEditor3]功能单一，存在些许BUG，但是不影响使用，就一直用了下去，不久前就想换最新版[wangEditor5]但是一直在回显这块实现不鸟，后面看见他们更像了动态赋值，回显问题得到了解决，就直接用了最新版本

进入正题，直接来说说最新版[wangEditor5]在MVC5与MVC4中的基础使用方式
【基础使用】

代码语言：javascript复制

<!-- 引入 css -->
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">


<!--富文本编辑框-->
<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>


<!-- 引入 js -->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
    const { createEditor, createToolbar } = window.wangEditor;
    // 编辑器配置
    const editorConfig = {};
    editorConfig.placeholder = '请输入内容';

    // 工具栏配置
    const toolbarConfig = {};

    // 创建编辑器
    const editor = createEditor({
        selector: '#editor-container',
        config: editorConfig,
        mode: 'simple' // default或 'simple' 参考下文
    });
    // 创建工具栏
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'simple' // default或 'simple' 参考下文
    });
</script>

Copy

【数据回显】:需要编辑修改时，数据怎样从后台回显至富文本

代码语言：javascript复制

<!-- 引入 css -->
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">

<!-- 用一个隐藏ID来保存后台回传上来的html信息，这属于MVC的使用方法 -->
 @Html.Hidden("HtmlData", htmldata)

<!--富文本编辑框-->
<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>


<!-- 引入 js -->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
    const { createEditor, createToolbar } = window.wangEditor;
    // 编辑器配置
    const editorConfig = {};
    editorConfig.placeholder = '请输入内容';

    // 工具栏配置
    const toolbarConfig = {};

    // 创建编辑器
    const editor = createEditor({
        selector: '#editor-container',
        config: editorConfig,
        mode: 'simple' // default或 'simple' 参考下文
    });
    // 创建工具栏
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'simple' // default或 'simple' 参考下文
    });
</script>
<script>
    var info = $("#HtmlData").val();
    //进行动态赋值
    editor.setHtml(info);
</script>

Copy

搞定

“关注[顺网]微信公众号，了解更多更有趣的实时信息”

本文作者：[博主]大顺

本文链接：https://shunnet.top/i2QRzy

mvc

0 人点赞