zoukankan      html  css  js  c++  java
  • 百度编辑器editor的使用

    一.首先下载ueditor的文件

    链接:https://pan.baidu.com/s/16fGsenCJHyxptYEToczyVA
    提取码:zvyj
    复制这段内容后打开百度网盘手机App,操作更方便哦

    在项目里创建一个Libs的文件夹,把整个文件拉入里面

    引用脚本

    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script src="~/Content/jquery.unobtrusive-ajax.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/Libs/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/Libs/ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script src="~/Libs/ueditor/lang/zh-cn/zh-cn.js"></script>

    代码:

        @Html.BeginForm("进入帖子", "WuDi")
            {
            <textarea id="editor" name="editor"></textarea> //实例化百度编辑器
            <input type="submit" id="btnBaidu" value="提交" />
            }


    <script>
        var ue = UE.getEditor("editor", {
            toolbars: [
                ['redo', 'snapscreen', 'bold', 'horizontal', 'cleardoc',
                    'fontfamily', 'forecolor', 'fontsize', 'simpleupload', 'insertimage'
                    , 'emotion', 'map', 'insertvideo', 'attachment']
            ], 
            iframeCssUrl: '/ueditor/utf8-jsp/themes/iframe.css',// 引入css
            autoHeightEnabled: false,
            autoFloatEnabled: true,
            initialFrameWidth: 700,
            initialFrameHeight: 150
        });
      
    </script>

    效果图:

    找到config.json,修改路径,图片就会显示在百度编辑器的编辑框里

    效果图:

    然后点击提交,就可以把文本框的输入的文本以及图片传到后台

    后台代码:

            [HttpPost]
            [ValidateInput(false)]  //这个必写,不写会报错
            public ActionResult Index(FormCollection fc)
            {
                string content = fc["editor"];

                 //下面就是把content保存到数据库操作,不详细些;
                return View();
            }

    效果图:

    显示在页面上,就先把数据从数据库拿过来,然后把值输出就可以显示对应的文本以及图片

    @Html.Raw(@item.PingLun_nei)  括号里面是存放保存图片及文本的字段名字;

  • 相关阅读:
    redis 五种数据结构详解(string,list,set,zset,hash)
    推荐一个同步Mysql数据到Elasticsearch的工具
    一些经验,用来鉴别不太靠谱的公司或工作(面试是双向的,是你最好的了解这个公司的机会)
    OpenSSL 使用 base64 编码/解码(liang19890820)
    Qt之QEvent(所有事件的翻译)
    Go 在 Windows 上用户图形界面 GUI 解决方案 Go-WinGUI 国产(使用cef 内核)
    卷积神经网络CNN
    Event Driven Architecture
    wineshark分析抓取本地回环包
    僵尸进程与孤儿进程
  • 原文地址:https://www.cnblogs.com/gbb44/p/10637434.html
Copyright © 2011-2022 走看看