前提准备:

http://ueditor.baidu.com/website/官网下载需要使用的版本。(我选用的1.4.3.1最新版本)因为这是以前做过的一个记录,现在移动到博客园保存记录。所有现在最新版本不是这个可能。

引入框架js:

下载好压缩文件后,解压到conten文件夹下修改文件名为ueditor,如图:

在这里需要注意一点,解压完成之后net文件不需要引用只需要里面的app_code文件。

目录介绍:

开始使用:

代码引用

在需要引用的界面引用两个文件:

第一个是配置文件。第二个是主文件。(注意:这两个文件不能引用顺序错误)。

创建富文本代码:

显示效果:

定制工具栏:

最简单的工具栏:

效果:

多列显示:

具体的我就不写了以下是完整的按钮列表定义:

可参考:http://fex.baidu.com/ueditor/#start-toolbar

自定义编辑菜单按钮:

数据的处理:

数据的存入:

前台使用form表单提交方式:

数据库的读取显示:

使用Ueditor进行显示

使用html标签显示:

图片配置显示:

在ueditor中富文本创建完成后,在功能差不多都可以使用的时候,唯有图片,视频功能需要进行配置,不然会提示后台http配置不正确,此功能暂时不可用。配置图片有两种方法:

第一种:

在全局配置文件config.json文件中。

第二种:

在引用处单独配置:

注意一点很关键,在配置前缀和路径时最好用绝对路径,不然会出现找不到图片。

特别注意:

假如重新下载的包,net文件夹下的bin文件最好删除(此文件可有可无),但是他的文件与咱们框架的network.Json程序集不兼容,但是ueditor依赖于此文件,所有建议直接删除使用本框架的即可。

另外下载包的net.sln文件下的地址路径都要与前缀一致,(此处我不是很确定,他有没有起作用,但是修改一致时可以的)。附图:

附加配置参考文献:

前端配置:http://fex.baidu.com/ueditor/#start-config

后端配置:http://fex.baidu.com/ueditor/#server-config

【Ueditor】富文本编辑使用的更多相关文章

  1. SNF快速开发平台MVC-EasyUI3.9之-ueditor富文本编辑在 asp.net MVC下使用步骤

    mvc项目中用到了这个富文本编辑就试着把遇到的问题个使用步骤在这里记录一下,希望大家少走弯路. 1.首先我们先下载net版本的uediot 2.然后把整个文档拷贝到我们的项目中,记得是整个 把下载的文 ...

  2. UEditor富文本编辑框学习

    1.首先需要引入CSS.JS <!--富文本编辑框--> <link href="${pageContext.request.contextPath}/css/plugin ...

  3. ueditor富文本编辑在 asp.net MVC下使用步骤

    mvc项目中用到了这个富文本编辑就试着把遇到的问题个使用步骤在这里记录一下,希望大家少走弯路. 1.首先我们先下载net版本的uediot r.

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

    一.Ueditor的下载 1.百度编辑器下载地址:http://ueditor.baidu.com/website/download.html 2.下载完整源码包,解压到任意目录,解压后的源码目录结构 ...

  5. vue中使用ueditor富文本编辑框

    1.把下载的Ueditor资源,放入静态资源static中. 修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图: 2.在main.js中引入以下文件 ...

  6. ueditor富文本编辑的使用方法

    平时在编写上传文件,图片,视频等等这些功能的代码会很繁琐,这里我介绍一款由百度推出的CuteEditor,是一款功能非常强大,支持图片上传.文件下载和word类似的文字编辑器.对于新闻发布系统和博客之 ...

  7. 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

  8. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  9. 深入理解javascript中的富文本编辑

    前面的话 一说起富文本,人们第一印象就是像使用word一样,在网页上操作文档.实际上差不多就是这样.富文本编辑,又称为WYSIWYG (What You See Is What You Get所见即所 ...

  10. 【微信公众平台开发】公布动态新闻好帮手UEditor富文本

    因为微信要做公布动态新闻.那就须要富文本. 上网搜索有非常多这样的插件,比方CKEditor.KindEditor等:最后看到百度一款开源的UEditor.官网打开,风格设计就吸引住了自己.所以就选U ...

随机推荐

  1. ABP框架系列之三十九:(NLayer-Architecture-多层架构)

    Introduction Layering of an application's codebase is a widely accepted technique to help reduce com ...

  2. CPU寻址

    CPU组成和寄存器 1)CPU由运算器.控制器.寄存器等器件组成,这些器件靠内部总线相连 2)寄存器是CPU的组成部分,用来暂存指令.数据和地址,CPU对其读写速度是最快的,不需要IO传输 存储单元 ...

  3. JAVA 8 主要新特性 ----------------(三)新功能Lambda表达式入门

    一.简述       Java为了扩充匿名方法在1.8中新追加的特性.本身Java之前的版本是没有匿名方法的,只有匿名对象. 二.使用        Java中使用匿名方法必须要对应接口中的一个抽象方 ...

  4. POJ2516K次费用流建图

    Description: N个订单(每个订单订K种商品),M个供应商(每个供应商供应K种商品),K种商品,后N行,表示每一个订单的详细信息,后M行表示每个供应商供应的详细信息,后K 个N * M的矩阵 ...

  5. hive 命令行传入参数

    azkban实现任务重跑 我们执行sql的方式是将hql文件上传到服务器本地.然后执行shell命令 hive " -f ./test_scheduler.hql 注:hive -e 是执行 ...

  6. 消息中间件——activeMQ

    Activemq使用教程 解压activmq进入bin\win64 启动activemq.bat 启动成功 浏览器访问http://127.0.0.1:8161 创建maven工程 在pom.xml中 ...

  7. Jquery - 添加属性、添加class、添加Css

    一.设置属性: 方式一  jQuery 代码: $("img").attr({ src: "test.jpg", alt: "Test Image&q ...

  8. Springboot/SpringMvc 读取上传 xls 文件内容

    /** * 读取上传 xls 内容返回 * @param file * @return */@RequestMapping(value = "/read.xls")@Respons ...

  9. 【详细】Android入门到放弃篇-YES OR NO-》各种UI组件,布局管理器,单元Activity

    问:达叔,你放弃了吗? 答:不,放弃是不可能的,丢了Android,你会心疼吗?如果别人把你丢掉,你是痛苦呢?还是痛苦呢?~ 引导语 有人说,爱上一个人是痛苦的,有人说,喜欢一个人是幸福的. 人与人之 ...

  10. js中的行为委托和无类编程

    概述 <你不知道的JavaScript>中有这么一段话:不幸的是,将类和继承的设计模式思维带入Javascript的想法是你所做的最坏的事情,因为语法可能会让你迷惑不已,让你以为真的有类这 ...