【Ueditor】富文本编辑使用

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

前提准备:

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

 

作者:YanBigFeg —— 颜秉锋

出处:http://www.cnblogs.com/yanbigfeg

本文版权归作者和博客园共有,欢迎转载,转载请标明出处。如果您觉得本篇博文对您有所收获,觉得小弟还算用心,请点击右下角的 [推荐],谢谢!

目录
相关文章
|
存储 JavaScript 前端开发
【前端系列】- 富文本组件(mavon-editor)
mavon-editor是一款基于vue的markdown编辑器,可以用来做文本的编辑,比如是某种业务需要发送公告、个人博客等,都可以用到,操作也十分简单。
3986 0
【前端系列】- 富文本组件(mavon-editor)
|
存储 JSON JavaScript
【2023-08-20】最新PDF.js PDF批注注释插件库:创建、保存和管理PDF注释批注(高亮、文本框、绘图、截屏、历史记录、橡皮檫)-pdf.js
探索基于pdf.js-dist开发的纯Javascript PDF批注插件库,支持保存、导出、导入和管理PDF文件中的批注。多个功能模块为您提供丰富的PDF注释体验。
576 0
【2023-08-20】最新PDF.js PDF批注注释插件库:创建、保存和管理PDF注释批注(高亮、文本框、绘图、截屏、历史记录、橡皮檫)-pdf.js
|
22天前
|
IDE Java 开发工具
在 Vim 里为 Markdown 文档展示导航窗格
在一个很长的 Markdown 文档里要准确跳转到某标题并不容易,如果像 Word 那样有个导航窗格就好了。
30 6
|
JavaScript 前端开发 Java
31jqGrid 行编辑- 自定义编辑
31jqGrid 行编辑- 自定义编辑
53 0
tinymce 设置和获取编辑器的内容
tinymce 设置和获取编辑器的内容
109 0
【Layui】解决如何使用富文本编辑器和富文本上传显示图片
【Layui】解决如何使用富文本编辑器和富文本上传显示图片
242 0
【Layui】解决如何使用富文本编辑器和富文本上传显示图片
|
JavaScript 前端开发
ueditor代码高亮实现方法
实现的方法也很简单 1:页面引用以下资源文件(均位于ueditor目录中) <script type="text/javascript" src="/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> <link rel="stylesheet" type="text/css" href="/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css"> 2:增加如下js脚本使高亮生效: SyntaxHighlighter.all();
236 0
ueditor代码高亮实现方法
kindeditor富文本编辑器插件 如何实现将本地的图片复制粘贴
目前的需求是 将桌面上的一张图片,进行复制后,可以粘贴到富文本编辑器里面,借用了大佬的这个方法,但是ie浏览器,粘贴图片的时候没办法触发这个paste方法 不知道是因为啥?求大佬帮助
|
缓存 前端开发 JavaScript
百度编辑器ueditor,单个图和多图上传文件大小限制以及文字提示修改
百度编辑器ueditor,单个图和多图上传文件大小限制以及文字提示修改
1261 0
|
前端开发 JavaScript PHP
百度编辑器UEditor实现自动保存
百度编辑器UEditor实现自动保存
1176 0