.Net MVC5 富文本[wangEditor5] 的使用
.Net MVC5 富文本[wangEditor5] 的使用
Shunnet
发布于 2022-06-09 11:13:51
发布于 2022-06-09 11:13:51
文章被收录于专栏：一路走一路失去也一路拥有
之前版本[wangEditor3]功能单一，存在些许BUG，但是不影响使用，就一直用了下去，不久前就想换最新版[wangEditor5]但是一直在回显这块实现不鸟，后面看见他们更像了动态赋值，回显问题得到了解决，就直接用了最新版本
进入正题，直接来说说最新版[wangEditor5]在MVC5与MVC4中的基础使用方式
【基础使用】
<!-- 引入 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
【数据回显】:需要编辑修改时，数据怎样从后台回显至富文本
<!-- 引入 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
版权声明：转载注明出处，谢谢 ☺
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-06-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
