ueditor

    1.载入js，css文件

<script src="ueditor/editor_config.js" type="text/javascript"></script>
    <script src="ueditor/editor_all.js" type="text/javascript"></script>
    <link href="ueditor/themes/default/ueditor.css" rel="stylesheet" type="text/css" />

相比较这款富文本编辑器还是不错的，轻量级，功能全，UI也还不错。

配置的时候费了点时间，现在回过头看其实相当简单，把相关的文件路径设置正确即可。

我的目录结构是：www/CMS/MyEditor/

上传图片的地址是: www/images/news/content/

修改editor_config.js：

window.UEDITOR_HOME_URL = "/CMS/MyEditor/";

var URL;

var tmp = window.location.pathname;

URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","").replace("website/","");//这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径（指以http开头的绝对路径）

window.UEDITOR_CONFIG = {

//为编辑器实例添加一个路径，这个不能被注释

UEDITOR_HOME_URL : URL

//图片上传配置区

,imageUrl:URL+"App/imageUp.ashx" //图片上传提交地址

,imagePath:".." //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置

//,imageFieldName:"upfile" //图片数据的key,若此处修改，需要在后台对应文件修改对应参数

//,compressSide:0 //等比压缩的基准，确定maxImageSideLength参数的参照对象。0为按照最长边，1为按照宽度，2为按照高度

,maxImageSideLength:1900 //上传图片最大允许的边长，超过会自动等比缩放,不缩放就设置一个比较大的值，更多设置在image.html中

（红字的部分是修改过的）

然后修改一下imageUp.ashx文件中的上传路径即可：

String pathbase = "/images/News/content/"; //保存路径

就这样，其他的使用参考官方文档就行。如果在CHORME浏览器下不能正常上传图片，请检查editor_config.js文件中,imagePath:".."
参数设置是否正确。如果上传正确，但是在富文本框中显示红叉也是说明路径错了，把鼠标移动到未显示成功的图片上会出现悬浮菜单，点击“修改/编辑”，在图片属性窗口中你就可以看见图片的路径了，就可以发现错在哪里。

      2.页面配置

<div id="myEditor"></div>   //可以是aspx控件只要id正确即可
<script type="text/javascript">
        var ue = new baidu.editor.ui.Editor();
        ue.render("myEditor");   //这里填写要改变为编辑器的控件id
</script>

       3.editor_config.js 文件中的路径配置

    var tmp = window.location.pathname;
    URL = window.UEDITOR_HOME_URL || "/SomePackage/Ueditor/ueditor/"; //这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径（指以http开头的绝对路径）

       4.如果你要使用传图片功能，还需要修改net文件下的几个文件截图说明吧（这个路径可以直接删除的，试试。不行了自己再调整下）。

改为-->

        同理将net文件下其它文件类似的错误更正后即可上传图片。

        图片上传默认位置为：net文件夹下。上传一张打开即可发现一个upload文件夹。

       5.ueditor 的很多默认配置都在 editor_config.js这个文件中，细心看的话，开启或关闭其中的配置是可以解决很多问题的。

       6.我在使用过程中还遇到过编辑器内容影响整体页面的布局问题，这问题是在editor_all.js这个文件中修改的默认样式问题的。
复制代码

/**
         * 渲染编辑器的DOM到指定容器，必须且只能调用一次
         * @public
         * @function
         * @param {Element|String} container
         */
        render:function ( container ) {
            var me = this, options = me.options;
            if ( container.constructor === String ) {
                container = document.getElementById( container );
            }
            if ( container ) {
                var useBodyAsViewport = ie && browser.version < 9,
                        html = ( ie && browser.version < 9 ? '' : '<!DOCTYPE html>') +
                                '<html xmlns=\'http://www.w3.org/1999/xhtml\'' + (!useBodyAsViewport ? ' class=\'view\'' : '') + '><head>' +
                                ( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml( options.iframeCssUrl ) + '\'/>' : '' ) +
                                '<style type=\'text/css\'>' +
                            //这些默认属性不能够让用户改变
                            //选中的td上的样式
                                '.selectTdClass{background-color:#3399FF !important;}' +
                                'table.noBorderTable td{border:1px dashed #ddd !important}' +
                            //插入的表格的默认样式
                                'table{clear:both;margin-bottom:10px;border-collapse:collapse;word-break:break-all;}' +
                            //分页符的样式
                                '.pagebreak{display:block;clear:both !important;cursor:default !important;width: 100% !important;margin:0;}' +
                            //锚点的样式,注意这里背景图的路径
                                '.anchorclass{background: url(\'' + me.options.UEDITOR_HOME_URL + 'themes/default/images/anchor.gif\') no-repeat scroll left center transparent;border: 1px dotted #0000FF;cursor: auto;display: inline-block;height: 16px;width: 15px;}' +
                            //设置四周的留边
                                '.view{padding:0;word-wrap:break-word;cursor:text;height:100%;}\n' +
                            //设置默认字体和字号
                                'body{margin:8px;font-family:\'宋体\';font-size:16px;}' +
                            //针对li的处理
                                'li{clear:both}' +
                            //设置段落间距
                                'p{margin:5px 0;}'
                                + ( options.initialStyle || '' ) +
                                '</style></head><body' + (useBodyAsViewport ? ' class=\'view\'' : '') + '></body>';

多个ueditor

var editor = new baidu.editor.ui.Editor(); 
editor.render("myEditor"); 
editor.getContent();
var editor1= new baidu.editor.ui.Editor(); 
editor1.render("myEditor1"); 
editor1.getContent();

posted @ 2013-05-29 22:20 觉信阅读(7027) 评论(0) 编辑收藏举报

觉信

ueditor

公告