UEditor ASP.NET 版使用教程

一：UEditor 是干什么的？

UEditor  是一个网页的富文本编辑器，用于发布文章，比如你的官网需要发布一篇新闻，就可以使用UEditor  来完成新闻的录入。

二：UEditor 的工作原理？

UEditor  包含常规的图文录入和表情，文件的操作等等。首先你在UEditor  中将你要写的新闻的内容写好，里面可能包含文字、数字、html和css的代码等等，简单的字符就不用说了，直接存到数据库里面。

图片的处理方式是：先将图片上传到网站所在的服务器（本地开发就是上传到自己的电脑），然后服务器返回该图片在服务器上面的路径，并且将这个路径放在新闻内容的html中，用img标签裹着。最后还是将新闻

内容看作一个字符串保存到数据库里面，当你要在官网前台界面查看该新闻的时候，就直接读取数据库，图片因为它保存了图片的相对路径，就可以直接在浏览器中显示出来了。

三：具体的使用步骤：

1：将UEditor  引入到项目中：
    
    官网下载链接：http://ueditor.baidu.com/website/download.html
    
    我下载的是[1.4.3.3  .NET 版本]

    解压之后得到ueditor1_4_3_3-utf8-net，直接将ueditor1_4_3_3-utf8-net中的utf8-net文件夹复制到项目中：

2：在自己的页面中引入相关脚本文件：

     <script src="~/Plugin/utf8-net/ueditor.config.js"></script>

       这个是插件的配置文件，依据不同的项目类型和项目结构作相应的调整。

     <script src="~/Plugin/utf8-net/ueditor.all.min.js"></script>

       这个是插件的源文件，是核心文件，不做二次开发的话基本不用动它，但是如果使用插件的时候出问题了，可以在这个里面打断点调试。

     <script src="~/Plugin/utf8-net/lang/zh-cn/zh-cn.js"></script>

       这个是语言包文件，直接引用即可，没必要纠结。

3：初始化插件：

    html：

     <div class="newscontent">
        <script id="editor" type="text/plain" style="width:1024px;height:500px;">
        </script>
    </div>

    js：

     <script type="text/javascript">
     
           var ue = UE.getEditor('editor');

     </script>


   不出什么意外的话，现在运行页面，即可看到：

4：添加一个纯文本新闻：

    在浏览器页面中输入文本信息，点击“保存”按钮，触发一个js函数， 通过 var newscontent = ue.getContent()获取你输入的信息，其实  ue 就是 UE.getEditor('editor')。

    好啦，到这里，富文本编辑器中的数据已经获取到了，可以看到，它里面实际是由html包含着文本，并且相关的样式也在html标签中。


5：添加一个图文结合的新闻：

    1：这里首先要改一下Ueditor 的配置文件：

        ueditor.config.js文件中的serverUrl：

            源文件是：serverUrl: URL + "net/controller.ashx"

            这里必须得插播一下：controller.ashx其实就是处理图片上传的一个一般处理程序，首先在浏览器中选中图片，然后Ueditor创建xhr，将图发送给controller，最后controller将图片保存到服务器所

                            在的硬盘中，在xhr的回调事件中获取从controller.ashx返回的图片的相对地址，将这个地址展示在Ueditor编辑器中。


            好了，回到serverUrl，这个参数就是获取到controller.ashx这个一般处理程序的url，然后向一般处理程序发送xhr。

            
            调试的时候我看到URL其实就是ueditor.config.js这个文件所在的目录，所以只要ueditor.config.js文件和net文件夹在同一级，这个serverUrl无需改动。


        config.json文件中的imageUrlPrefix和imagePathFormat：

                imagePathFormat是上传保存路径,可以自定义保存路径和文件名格式，就是你要将图片保存到服务器的那个文件夹下面。
                            
                               {yyyy}{mm}{dd}：这个是插件的一个算法算出来的，实际上就是当前年月日，这里的作用是用当前年月日创建一个文件夹

                               {time}{rand:6}：这个就是图片文件的名称了，time是当前时间，rand：6是产生一个随机数

                imageUrlPrefix是图片访问路径前缀，这个我是直接给了一个空格，其实是因为上传的时候已经将完整的相对路径存到了数据库，读取的时候就不必加“图片访问路径前缀”了，但是不加空格图片

                                还无法展示出来，我猜测是imageUrlPrefix如果为空字符串就无法通过某一个if语句。


        这部分写的有点乱，可能是对这部分我掌握的也不是太到位。相关截图如下：

    2：页面上面选择一张图片，并上传：

    3：点击保存，将新闻内容保存到数据库中去：

四：这就是我使用Ueditor的过程，以后要多写博客，感觉写完了后对于掌握情况来说，提高了！

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/14941.html

UEditor ASP.NET 版使用教程

相关推荐