Ueditor基本使用以及遇到的问题

原来用的是Kindeditor这个编辑器,但很久没更新了,最新版是13年更新的。现在要换成百度的Ueditor,

在这里记录Ueditor的使用流程和遇到的问题。

一、下载

1.Ueditor官网

这里有三个版本:1.UBuilder:可以自定义选择自已需要的功能,然后会下载对应的文件。

2.开发版:功能多,适合写文章,排版。

3.Mini版,基本功能,适合做一些回复评论之类的。

根据自己使用的语言下载对应版本,我下载的是.Net版本,UTF-8版。

二、使用(环境为MVC4,.net4.5)

下载下来有两个文件夹,只要utf8-net文件夹,_MACOSX是解压多出来的。

1.在项目上建一个Plug文件夹,把utf8-net拖到Plug文件夹下,把utf8-net文件夹改名为Ueditor

2.建一个控制器:UeditorDemo => 建actione:Index  =>添加Index视图。

3.这时打开管网,上面有一个文档,打开文档可以看到。

根据文档,我们把index.cshtml写成

<title>UeditorDemo</title>
    <!-- 配置文件 -->
   <script src="~/Plug/Ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script src="~/Plug/Ueditor/ueditor.all.min.js"></script>
   <!-- 实例化编辑器 -->
    <script type="text/javascript">
        window.onload = function () {
            var ue = UE.getEditor(‘container‘);
        }
    </script>
</head>
<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>

</body>

然后运行,遇到了错误

解决:把Ueditor->net->bin下的文件全删了。

再次运行,再遇到错误

解决: 把Ueditor->net->config.json第一句删注释删除(下面圈出部分)。

再次运行,成功得到想要的页面

三、后台获取数据:

前端显示已经没问题了,然后到后台获取数据看行不行。

1.修改index.cshtml代码,添加一个form表单,让数据可以提交到后台

修改后变成:

  <title>UeditorDemo</title>
    <!-- 配置文件 -->
   <script src="~/Plug/Ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script src="~/Plug/Ueditor/ueditor.all.min.js"></script>
   <!-- 实例化编辑器 -->
    <script type="text/javascript">
        window.onload = function () {
            //initialFrameWidth这个参数是宽跟当前窗口自动改变大小
            var ue = UE.getEditor(‘container‘, { initialFrameWidth: null });

        }
    </script>
</head>
<body>
    <form action="/UeditorDemo/Index" method="post">
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" style="max-width:800px; type="text/plain">
        这里写你的初始化内容
    </script>
        <input type="submit" value="提交" />
    </form>
</body>

2.控制器添加一个action,接收前端页面传来的数据,因为.net默认不允许传html表签到后台的,所以要在控制器前加一个特性[ValidateInput(false)]

[ValidateInput(false)]
        [HttpPost]
        public ActionResult Index(FormCollection fc)
        {
            return Content(fc["content"]);
        }

3.运行,成功输出前端的内容

四、上传文件

1.直接使用上传功能。效果:

在浏览器按F12查看图片的路径:

原来是路径少了一个Plug,去项目中查看文件已经是成功上传的了。

2.修改图片上传路径

找到Ueditor->net->config.json这个文件,

修改"imageUrlPrefix": "/ueditor/net/" => "imageUrlPrefix": "/Plug/ueditor/net/"

再次运行上传,成功,再试多图上传,也成功。

后言:这里是Ueditor的基本使用,其它功能请查阅官网文档和API。

时间: 2024-11-07 17:27:34

Ueditor基本使用以及遇到的问题的相关文章

百度富文本编辑器ueditor使用总结

最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 1.ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://ueditor.baidu.com/website/document.html 下载地址:http://ueditor.baidu.com/website/download.html (这里可选开发版,或MINI版) 2. 从官网上下载完整源码包,解压

解决ueditor中没法动态配置imageurlprefix的方法

修改背景,由于后台图片是上传到挂载的静态资源磁盘中去,前台用独立域名访问 所以在ueditor中显示图片前缀,只能在 "imageUrlPrefix": 中配置域名,配上域名就遇上了麻烦,开发环境,测试环境,生产环境的域名都不一样: 而ueditor的在配置项放在config.json中,如下: 造成的问题就是每次提交版本控制的时候,config.json文件都要忽略提交,并且再三确认是否提交被提交了,提交后就会导致测试环境上传图片后,图片域名前缀显示的是生产环境的域名,图片直接不可显

UEditor

UEditor1.4.3实现跨域上传到独立文件服务器,完美解决单文件和多文件上传! 首先去ue官网下载1.43版 .net版本,解压之后,把demo文件夹改成web,把net那个文件夹拷贝出来放到web外面,如图: 这样就把编辑器的静态文件和动态文件分离了,动态部分放到文件服务器上,静态部分集成到我们的网站上. 下面我就用c.com绑定到web目录,d.com绑定到net目录(a.b.com我在测试的时候用了).先在本地IIS创建两个站点,如图设置: 接下来要设置Hosts才能访问,这是模拟的绑

用ueditor上传图片、文件等到七牛云存储

ueditor上传文件,是用数据流的形式上传的. 而七牛云存储官方文档中,只提供了文件路径上传的方式. 但是,仅仅是在官方文档中写了这一种方式. 事实上,利用VS的对象管理器,打开Qiniu的dll,我们可以看到以下东西: 其实Qiniu提供的SDK中,是可以利用文件流上传文件的. 所以,根据官方文档提供的案例,我们可以将上传改写成下面的样子: /// <summary> /// 上传文件 /// </summary> /// <param name="key&qu

UEditor的JSP配置说明

?JSP 使用说明 1 背景 UEditor 1.4.0 版本对之前的配置方式进行了简化,具体请参见:后端请求规范,为了适应这次升级,JAVA 后台也进行了重写,跟之前的版本差别较大,升级的用户注意阅读本文档. 本文档介绍 UEditor JAVA 后台的部署和配置说明. 注意:本文档仅适用于1.4.0之后的Java版UEditor. 2 先决条件 JDK 1.6+ Apache Tomcat 6.0+ UEditor 1.4.0+ 3 示例环境 3.1 软件版本信息 JDK 6u45 Tomc

.NET中应用Ueditor(富文本编辑)的配置和使用

一.Ueditor的下载 1.百度编辑器下载地址:http://ueditor.baidu.com/website/download.html 2.下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示: 3.编辑器展示: 二.Ueditor的使用 1.添加到项目中如图所示: 2.新建项目中进行引用 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestUeditor.a

UEditor 添加在线管理图片删除功能

第一,需要添加一个 php 文件来实现删除功能,文件添加到: ueditor\php\action_delete.php 代码内容: <?php   /*---------------------------  * wang  *zhibeiwang.blog.51cto.com  * 2017-08-10  * action_delete.php  * 删除 Ueditor 目录下的文件  *---------------------------*/   try {     //获取路径   

php如何引入百度Ueditor富文本编辑器

文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引入 2.下载后解压放到一个位置.(我用的是TP框架,所以我放在了我的指定公共文件夹Pbulic下) 3.在页面中引入 首先在head标签里写引入资源包的路径,路径要写自己存放资源包的路径 <script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.c

ueditor编辑器使用总结

ueditor使用小结 一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/website/onlinedemo.html 为了方便开发学习,我们下载它的完整版和.net版. ueditor_release_ueditor1_4_3_1-src.zip ueditor_release_ueditor1_4_3_1-gbk-net.zip 二.如何引入uedi

Ueditor中代码的高亮和背景在前端页面的实现

首先废话就不多说,这个富文本编辑器的下载和js等基本文件的导入略. 我的最终目标是这样的,我们在页面中的富文本框中输入代码,希望它能够被后台接受.存入数据库,当通过服务器将这些代码再一次显示在前台的页面上的时候,我们希望所呈现的是如下的情况: 就是说需要对代码的背景和高亮的部分的样式也进行保存.我的解决过程是这样的(假设在demo.html中进行输入,在demo.php中进行处理和呈现): 1. 首先在网上查找相关信息,发现需要第三方插件,而这第三方插件就在我们的ueditor的下载包中,ued