ueditor编辑器配置及使用介绍

<1>:ueditor编辑器配置

1:首先去官网下载安装包http://ueditor.baidu.com/website/download.html

2:解压后,只需要保留utf8-php这个文件夹里面的内容就可以了

3:根据自己项目的需要配置到根目录的相应文件夹下,我是配置到根目录的public目录下,如下图

4:在html页面配置加载UEditor编辑器,加入三个js文件以及在页面初始化UEditor编辑器

这里的id="editor"就是初始化需要获取的id上下需要保持一下,

5:配置完后,在浏览器请求对应的页面会发现编辑器已经显示在html页面里了如下图

到此ueditor编辑器配置已经完成,配置完成后如果需要跟php后台做交互需要做其它的配置修改

<2>:ueditor编辑器与php后台交互

1:编辑中上传的图片,文件,视频等默认有一个存储微指,在utf8-php/php/config.json文件中可以修改配置

例如图片的存储路径如下图,其它的存储在文件中都有默认配置,根据自己的需要可以做修改,

更具体的配置说明可以查看ueditor的文档说明,讲的比较详细,一看就明白了

http://fex.baidu.com/ueditor/

比如我的为了统一管理文件都把图片,文件等配置在一个文件夹下:

2:在php后台服务端,如果需要接收编辑POST过去的内容,可以使用$_POST变量获取,

前面html页面中,代码为

<script id="editor" type="text/plain" name="content" style="width:1024px;height:500px;">

在php后台服务端使用$_POST["content"]就能获取编辑器的内容,获取到内容就可以做入库操作了

时间: 2024-10-14 04:48:06

ueditor编辑器配置及使用介绍的相关文章

富文本编辑器-ueditor基本配置

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码..相对于其他流行的富文本编辑器如ckeditor等具有配置简单.更具有中国特色!以下主要是涉及的内容是关于百度富文本编辑器的上传配置以及如何与struts2等结合问题. 1 版本问题 一般而言建议使用UMEditor版本,同时百度web前端开发部也提供了定制版本.如果使用定制版本要注意的一点就是将工具栏的图标添加上分割线!分割线添加的方法如下就

ueditor 编辑器的配置 实现上传图片---附效果图

由于项目需要,最近使用了ueditor,实现了图片上传功能,在此分享一下遇到的一些问题. 项目使用net+mvc框架搭建,则选择的是NET版本ueditor 编辑器(可去百度官网下载), 下载完成导入到项目中: 准备开始配置ueditor 编辑器: 1).找到ueditor.config.js文件,并修改ueditor.config.js文件,指定ueditor的路径 2).找到./net/config.json文件,并修改config.json文件,指定文件上传路径有读取路径 上传图片路径 读

Java往事之《百度UEditor插件配置图片上传问题》

百度UEditor插件配置图片上传问题 前言:之前第一次用到UEditor插件的时候,一脸懵逼!没错就是一脸懵逼,去UEditor插件官网下载了一个开发版的.然后对于新鲜技术好奇,本人就迫不及待的把它copy到了我的项目里,运行之后发现鼠标点到输入框里面的时候,什么鬼啊,握了棵草!上传图片的插件置灰了如下图1,一看还有一个多图片上传的插件还在,就赶紧点了一下,点开的那一瞬间我吃了一鲸,如下图2! 图1 图2 很好!下面看一下如何解决这个问题. 1.首先你可以到官网Ueditor,查看很详细的文档

CI框架整合UEditor编辑器上传功能

最近项目中要使用到富文本编辑器,选用了功能强大的UEditor,接下来就来讲讲UEditor编辑器的上传功能整合. 本文UEditor版本:ueditor1_4_3_utf8_php版本 第一步:部署编辑器 HTML代码: 1 <textarea id="editor" class="editor" type="text/plain" style="width:100%;height:500px;"></te

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

tp中ueditor编辑器的使用

1/引入三个文件 <script type="text/javascript" charset="utf-8" src="{$Think.config.PLUGIN_URL}ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="{$Think.co

Thinkphp整合最新Ueditor编辑器

说到最新的富文本编辑器的确不少(ckeditor.fkeditor.ueditor),这些富文本编辑器如果单独使用基本上很方便,不需要做额外的配置,只要把官方的插件下载下来放到一个web容器中,看看 插件中提供的 index.html 里的代码就明白应该怎么调用了.因为富文本编辑器会经常涉及到文件.图片.视频资源的上传,如果本身所用到的框架或者是项目本身就有一个模块是专门来处理这一块儿的,对一些资源需要做特殊处理的,例如水印处理,对图片的大小处理(原图.缩略图),那么就设计到把富文本编辑器与你现

Ueditor/自定义配置

UEditor除 了具有轻量.可定制等优点外,还始终将优化编辑操作.提升用户体验摆在了很重要的位置.在这一点上,除了对编辑器功能.性能.实现细节等不断地改进和追求 创新之外,众多灵活而人性化的自定义配置也充分地体现了这个特点,通过修改配置项的值,用户几乎可以完全地改变编辑器的外观和行为. 从配置本身的优先级来看,UEditor的配置可以分为系统默认配置和用户自定义配置两种类型.系统默认配置是指editor_config.js中的所有配置,而用户自定义配置则是指用户在实例化编辑器的时候传入的JSO

SSH系统下,Ueditor1.4.3编辑器配置,增加图片删除功能+数据库存储

版本说明:Ueditor编辑器 1.4.3JSP.UTF-8版本 菜鸟使用途中遇到很多困难,在网上不停的找解答方法,整理出来可供使用,有好的建议就更好了. 我的目标: Ueditor编辑器嵌入到自己原来的项目中: 只能添加不能删除图片,无用资源占用空间极不合理,所以在多图上传->在线管理添加了删除图片的功能: 把编辑器编辑的内容存储到Oracle数据库 步骤 一.在JSP界面上添加Ueditor编辑器 下载官网:http://ueditor.baidu.com/website/download.