UEditor富文本编辑器的使用

富文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能，不过是在网页上

一开始是找到CKEditor，然后发现…添加图片的方式有点麻烦，其实也算是功能丰富…

{L7]FC[]RGBB0T3%K11]%1T

然后找了一下其他的，知道了另外一个编辑器，就是百度的UEditor，终于能正常的添加本地图片了…等一下，那我想直接添加外链图片怎么办…暂时放下先…

然后下面是正文时间

1.【创建编辑器】先进行编辑器的创建

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>

<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>

</html>

2.【自定义工具栏】
由于需求原因，不需要工具栏的某些功能，只需保留文本相关和图片，所以又要进行修改。
修改的方式有两种，一种直接在ueditor.config.js配置文件中修改toolbars的内容
另外一种方法是在实例化编辑器的时候进行定义

var ue = UE.getEditor('rule_editor', {
toolbars: [[
'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'forecolor', '|', 'simpleupload'
]]
 });

3.【禁用右键菜单】
然后又发现问题了，当我们右键编辑器内的时候，会出现UEditor自带的右键菜单，里面有一些常见的文本功能，当我使用其中的Ctrl+V，也就是粘贴功能的时候，出现了浏览器禁用该功能的提示，也就是说我不能使用右键菜单的粘贴功能，只能使用键盘的Ctrl+V了…然后我想直接禁用算了

同样，可以在ueditor.config.js配置文件中修改enableContextMenu属性（True/False），也可以在实例化编辑器的时候进行定义

var ue = UE.getEditor('rule_editor', {
toolbars: [[
'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'forecolor', '|', 'simpleupload'
]],
enableContextMenu: false
 });

4.【自定义图片上传位置】
如果想自定义图片上传的位置（服务器本地或者第三方文件对象存储），可以在 UploadHandler.cs 进行配置，路径在 ueditor\net\App_Code 中

比如我这里修改为用阿里的对象存储服务

 public override void Process()
    {
        byte[] uploadFileBytes = null;
        string uploadFileName = null;

        if (UploadConfig.Base64)
        {
            uploadFileName = UploadConfig.Base64Filename;
            uploadFileBytes = Convert.FromBase64String(Request[UploadConfig.UploadFieldName]);
        }
        else
        {
            var file = Request.Files[UploadConfig.UploadFieldName];
            uploadFileName = file.FileName;

            if (!CheckFileType(uploadFileName))
            {
                Result.State = UploadState.TypeNotAllow;
                WriteResult();
                return;
            }
            if (!CheckFileSize(file.ContentLength))
            {
                Result.State = UploadState.SizeLimitExceed;
                WriteResult();
                return;
            }

            uploadFileBytes = new byte[file.ContentLength];
            try
            {
                file.InputStream.Read(uploadFileBytes, 0, file.ContentLength);
            }
            catch (Exception)
            {
                Result.State = UploadState.NetworkError;
                WriteResult();
            }
        }

        Result.OriginFileName = uploadFileName;

        //上传到本地  
        /*var savePath = PathFormatter.Format(uploadFileName, UploadConfig.PathFormat);
        var localPath = Server.MapPath(savePath);
        try
        {
            if (!Directory.Exists(Path.GetDirectoryName(localPath)))
            {
                Directory.CreateDirectory(Path.GetDirectoryName(localPath));
            }
            File.WriteAllBytes(localPath, uploadFileBytes);
            Result.Url = savePath;
            Result.State = UploadState.Success;
        }
        catch (Exception e)
        {
            Result.State = UploadState.FileAccessError;
            Result.ErrorMessage = e.Message;
        }
        finally
        {
            WriteResult();
        }*/

        //上传到阿里云  
        using (Stream fileStream = new MemoryStream(uploadFileBytes))//转成Stream流  
        {
            var fs = Request.Files[UploadConfig.UploadFieldName];
            string md5 = Aliyun.OSS.Util.OssUtils.ComputeContentMd5(fileStream, fs.ContentLength);
            string today = DateTime.Now.ToString("yyyyMMdd");
            string FileName = Path.GetFileNameWithoutExtension(uploadFileName) + DateTime.Now.ToString("yyyyMMddHHmmss") + Path.GetExtension(uploadFileName);//文件名=文件名+当前上传时间  
            string FilePath = "GuildApp/Content/Apps/PlatformUEeditor/" + today + "/" + FileName;//云文件保存路径  
            try
            {
                string AccessKey = ConfigurationManager.AppSettings["AccessKey"] == null ? "" : ConfigurationManager.AppSettings["AccessKey"].ToString();
                string AccessKeySecret = ConfigurationManager.AppSettings["AccessKeySecret"] == null ? "" : ConfigurationManager.AppSettings["AccessKeySecret"].ToString();

                string bucketName = ConfigurationManager.AppSettings["bucketName"] == null ? "" : ConfigurationManager.AppSettings["bucketName"].ToString();
                string endpoint = ConfigurationManager.AppSettings["endpoint"] == null ? "" : ConfigurationManager.AppSettings["endpoint"].ToString();


                //初始化阿里云配置--外网Endpoint、访问ID、访问password  
                Aliyun.OSS.OssClient aliyun = new Aliyun.OSS.OssClient(endpoint, AccessKey, AccessKeySecret);

                //将文件md5值赋值给meat头信息，服务器验证文件MD5  
                var objectMeta = new Aliyun.OSS.ObjectMetadata
                {
                    ContentMd5 = md5,
                };
                //文件上传--空间名、文件保存路径、文件流、meta头信息(文件md5) //返回meta头信息(文件md5)  
                aliyun.PutObject(bucketName, FilePath, fileStream, objectMeta);

                //返回给UEditor的插入编辑器的图片的src  
                FilePath="../../"+FilePath;
                Result.Url = ApiHelper.ShowImg(FilePath);
                Result.State = UploadState.Success;
            }
            catch (Exception e)
            {
                Result.State = UploadState.FileAccessError;
                Result.ErrorMessage = e.Message;
            }
            finally
            {
                WriteResult();
            }
        }  
    }

其实还有很多属性可以自定义的，比如高度，宽度以及传入自定义的参数，设置和读取编辑器的内容等，具体可以去看官方的API文档的说

最后附上UEditor的Demo