使用UEditor

使用UEditor最好的环境是Web应用程序,而不是网站项目(网站项目经常容易出现上传功能等的失效或者抛出baidu...的异常)
百度UEditor编辑器提示错误:后端配置项没有正常加载,上传插件不能正常使用!
解决:http://www.okbase.net/doc/details/484622
以前是可以的,突然出现:多图上传点开后,页面是空白的
重新生成解决方案,多次刷新页面。




为了保证网站的安全性,尽可能的把需要使用UEditor的网页,目录(新建文件夹)单独放置,配置对应目录下的web.config文件
还有将上传文件的目录设置权限,属性-》安全-》取消执行权限(针对所有组或用户都取消执行权限)
1.下载:
地址:http://ueditor.baidu.com/website/download.html
选择对应语言的开发版本
2.复制到应用程序的自己认为合适的目录,并引用:Newtonsoft.Json.dll
3.配置:
在/ueditor/net/config.json 文件中修改:
在:    /* 上传图片配置项 */ 中,参数:"imageUrlPrefix": "/ueditor/net/", /* 图片访问路径前缀 */ 这里是以/开头的网站更目录开始写,
在/* 截图工具上传 */项中,参数:"snapscreenUrlPrefix": "/ueditor/net/", /* 图片访问路径前缀 */  同上
以及后面所有出现:/ueditor/net/ 的地方,都要改为从web应用程序的更目录开始的路径,如:/js//ueditor/net/
4.使用:
<script src="js/ueditor/ueditor.config.js"></script>
    <script src="js/ueditor/ueditor.all.js"></script>
    <script src="js/ueditor/lang/zh-cn/zh-cn.js"></script>


<div>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
    </div>
    <script>
        var ue = UE.getEditor('editor');
    </script>
5.特殊配置,更具页面需要使用自定义的UEditor功能
可在:ueditor.config.js中配置自己想要的功能,主要是修改:toolbars参数;具体每个按钮的含义在下面的注释中都有的,自己查看。


editor默认值/初始值:
var op = {
                            initialContent: $("#morenzhi").val(),  //初始化编辑器的内容
scaleEnabled: true, //是否允许拖动宽高
autoHeightEnabled:false,//自适应高度,false表示固定高度
elementPathEnabled:false  //不显示底部的元素路径
                        };
                        var ue = UE.getEditor('editor', op);


6.配置属于自己的表情:
下下载ueditor的官方表情包,复制到ueditor/dialogs/emotion/images/ 下,然后修改ueditor/dialogs/emotion/下面的html代码,修改其中的数组,在SmilmgName中增加自己的一个表情包(前缀名,个数);
还要修改同目录下css文件中新增一个类样式,用做指向一个竖着的所有表情图片如(images/fface.gif,这个是用做显示效果,对应的图片文件夹下面的图片是悬浮时的效果):
.pp img{
    background:transparent url(images/fface.gif?v=1.1) no-repeat scroll left top;
    cursor:pointer;width:25px;height:25px;display:block;
}


UEditor添加一个普通按钮(出现的buttona就是按钮的名称)
第一步:找到ueditor.config.js中toolbars数组中增加一个值,如:buttona
第二步:找到ueditor.config.js中找到labelMap参数,改为:
,labelMap:{
        'buttona': '提示汉字'
        }
第三步:在引用的ueditor.all.js文件中的btnCmds数组,在其中同样增加一个“buttona”字符串。
此时刷新页面就会看见一个B字符的按钮,这个是默认的样式,接下我们修改按钮的样式
第四步:找到themes/default/css/ueditor.css文件,增加一条样式定义(出现的buttona就是按钮的名称):
.edui-for-buttona .edui-icon {  
    background-position: -700px -40px;
}
同时需要修改themes/default/images/icons.png这个图片,加入一个自己按钮想显示的图标,在更改上面的background-position偏移量
第五步:
在页面中增加js代码:
var ue = UE.getEditor('editor');
baidu.editor.commands['buttona'] =
     {
        execCommand: function () {
  //下面是自己的js方法
           this.execCommand('insertHtml', "<img src='http://www.hougelou.com/images/logo.png' />"); return true;
     }, queryCommandState: function () { }
};

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页