zoukankan      html  css  js  c++  java
  • .Net 下 百度 富文本框 Ueditor 的 使用

    由于项目中需要使用富文本框,经过权衡比较,最终选择了百度的 Ueditor ,下面把 使用过程简单描述一下

     环境  :本人使用的 是 Net 下 mvc 模式 开发,多个项目之间使用

    版本  1.4.3.2

    1.下载 百度的 编辑器 选择 Asp 版本 ,解压,并把 Ueditor 文件夹放在  web 端 的 Content 的下面,(我的项目 Content 下存放的是 JS , Css, Image 等,你也可以放在 其他位置)

       http://ueditor.baidu.com/website/download.html

    2.view  页面代码

    使用的方式为   

    <script src="~/Content/ueditor/ueditor.config.js"></script>
    
    <script src="~/Content/ueditor/ueditor.all.js"></script>
    @*<script src="~/Content/ueditor/ueditor.all.min.js"></script>*@
    <link href="~/Content/ueditor/themes/iframe.css" rel="stylesheet" />
    <script src="~/Content/ueditor/lang/zh-cn/zh-cn.js"></script>
    
    
    <script type="text/javascript">
        var editor = new baidu.editor.ui.Editor({
            UEDITOR_HOME_URL: '/Content/ueditor/',//配置编辑器路径
            iframeCssUrl: '/Content/ueditor/themes/iframe.css',//样式路径
            initialContent: '',//初始化编辑器内容
            autoHeightEnabled: true,//高度自动增长
            minFrameHeight: 500//最小高度
        });
        editor.render('editor');
    
    </script>


    <texta id="editor" name = "editor" ><texta>

     头部文件注意引用的顺序,会产生影响

    效果如下

    3. 使用过程中遇到的一些错误

    3.1   界面能出来,但是上传文件 可能 会遇到一些错误

    有多种原因,可以把 net 下 config.json 的 第一句 注释 去掉

    3.2    发现 有 潜在危险的 Request.From 的值

            这时可以关闭验证       [ValidateInput(false)]

    3.3   因为使用的 前端中  有 easyUI, 他和 ueditor 中的 dialog 冲突, ueditor的 弹出框 在 easyui 的 弹出框 下面

         尝试了几种从ueditor  入手解决的方法,都没有起作用,所以改为调正 easyUI的Dialog,

         在设置 easyui 的 dialog 的 时候 添加事件 控制 z-index 的值

     $("#Add").dialog({
                    bgiframe: true,
                    autoOpen: false,
                     800,
                    height: 450,
                    top: 50,
                    modal: true,
                    shadow: false,
                    closed: true,
                    onOpen: function () {
    
                        $(".panel").css("z-index", "900");
                        $(".window-mask").css("z-index", "898");
    
                    },
                    onMove: function () {
    
                        $(".panel").css("z-index", "900");
                        $(".window-mask").css("z-index", "898");
    
                    },
                    onResize: function () {
                        $(".panel").css("z-index", "900");
                        $(".window-mask").css("z-index", "898");
    
                    },
    

     3.4  获取 设置 富文本框中的 内容 

          使用    UE.getEditor('editor').getContent(); 

                    UE.getEditor('editor').setContent();

    3.5 两个项目 之间 共享 同一 ueditor ,可以 在 服务器 上 iis  设置 虚拟目录,具体 百度

    3.6  可以看出 当我们 填写完内容时,最终得到的 是 一个 html 内容的 字符串,里面包含了 我们 填写的文字内容 ,图片 以及上传的文件路径,

           如何分离出来 单独的 图片 ,文件 路径, 可以 根据自己你的任务需求,在 ueditor.all.js 里 寻找到  方法 进行 改写

      

  • 相关阅读:
    synchronized关键字jvm实现及各种锁
    zookeeper选举算法
    git远程操作
    git分支的创建与分支之间合并的底层原理
    员工贷项目总结
    Python之字符串操作
    Python实现购物车的功能
    Python列表学习笔记
    Python中如何使用boolean类型的数据
    Python实现用户登录账户
  • 原文地址:https://www.cnblogs.com/lfyy/p/5616542.html
Copyright © 2011-2022 走看看