富文本编辑器使用

原文地址:http://www.javayihao.top/detail/169

这里介绍两种常见的富文本使用方式

第一种NicEdit

官网描述:

What is NicEdit?

NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser.

NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing

什么是NicEdit?
NicEdit是一个轻量级,跨平台的内联内容编辑器,可以轻松地在浏览器中即时编辑网站内容。
NicEdit Javascript可以在几秒钟内集成到任何站点中,以使任何元素/ div可编辑或将标准文本区域转换为富文本编辑。

官网地址

http://www.nicedit.com/index.php

如何使用

只需引入官网的一个js文件和一个图片即可

<script type="text/javascript" src="../nicEdit.js"></script>
<script type="text/javascript">
	bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>

<h4>First Textarea</h4>
<textarea name="area1" cols="40"></textarea>

?

效果展示

其中用到的gif图片的位置可以修改js文件配置。

案例代码获取方式 ,关注微信公众号    java一号  回复  “富文本” 即可

第二种kindeditor

官网描述

KindEditor 是什么?

KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

官网地址

http://kindeditor.net/demo.php

如何使用

1.1.  使用方法

第一步:在jsp中引入KindEditor的css和js代码。

<link href="kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
 <script src="jquery-1.10.1.min.js"></script>
 <script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/kindeditor-all-min.js"></script>
 <script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/lang/zh_CN.js"></script>

第二步:在表单中添加一个textarea控件。是一个富文本编辑器的载体。类似数据源。

<form action="editor.html" method="post">
    <textarea style="width:800px;height:300px;visibility:hidden;" name="desc" id="editor"></textarea>
    <input type="submit"/>
 </form>

第三步:初始化富文本编辑器。使用官方提供的方法初始化。

<script type="text/javascript" >
    var kingEditorParams ={
        filePostName  : "file",//指定上传文件参数名称
        uploadJson:‘upload2.html‘,//指定上传文件请求的url。
        dir:"image"//上传类型,分别为image、flash、media、file
    }
    var editor;
    $(function () {
        editor=KindEditor.create($("#editor"),kingEditorParams);
    })
 </script>

js提交请求的时候,同步富文本框到textarea

editor.sync();//同步富文本编辑器到textarea

上传图片时controller方法:

@ResponseBody

String json = "{\"error\":0,\"url\":\"" + url + "\"}";

获取kindeditor方式 ,关注微信公众号    java一号  回复  “富文本” 即可

总结:我个人还是喜欢使用NicEdit,配置简单、文件小

原文地址:https://www.cnblogs.com/javayihao/p/11991841.html

时间: 2024-08-01 14:49:20

富文本编辑器使用的相关文章

TinyMCE(富文本编辑器)

[转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 官网演示以及示例代码:https://www.tinymce.com/docs/demo/image-tools/ 转自:http://www.cnblogs.com/hahacjh/archive/2010/07/24/1784268.html TinyMCE 在Asp.Net中的使用方法其实挺简单的,从官方网站下载TinyMCE),然后将里面的jscripts目录拷到你的网站目录 假设你的aspx页面中某一个地方需要用到编辑器

Android富文本编辑器RichEditor的使用

以前有个项目做一个笔记本类似的东西,觉得写的不太好,最近重新写,就发现了这个富文本编辑器他的效果是这样的 感觉有点厉害啊 废话不多说开始撸码 1先添加依赖 dependencies { compile 'jp.wasabeef:richeditor-android:1.2.0' } 2写布局 <jp.wasabeef.richeditor.RichEditor android:id="@+id/editor" android:layout_width="match_pa

商城项目整理(四)JDBC+富文本编辑器实现商品增加,样式设置,和修改

UEditor富文本编辑器:http://ueditor.baidu.com/website/ 相应页面展示: 商品添加: 商品修改: 前台商品展示: 商品表建表语句: 1 create table TEST.GOODS_TABLE 2 ( 3 gid NUMBER not null, 4 gname VARCHAR2(90), 5 gdetails CLOB, 6 gpicture VARCHAR2(100), 7 gprice NUMBER, 8 gleixing NUMBER, 9 gpi

关于富文本编辑器UEditor

2017.1.18,星期三?     关于富文本编辑器:     富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器. 富文本编辑器不同于文本编辑器,程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里(当然付费的功能会更强大些),方便用户编辑文章或信息.比较好的文本编辑器有kindeditor,fckeditor等. 关于UEditor:官网                           UEditor文档,我们的说明书

UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效果如图2: 这样子UEditor百度富文本编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给initialFrameWidth属性. 这样子确实是可以在第一次加载的时候适应屏幕宽度,但是却似乎宽度稍微过了一点点,超过上面的灰条了.而且这里还有一个问题: 当你改变浏览器大小时,会有个很严重的排版BUG

富文本编辑器UEditor的配置使用方法

将下载的富文本编辑器的文件解压后放到 webcontent 下 如果 文件中的jsp文件夹下的controller.java文件报错的话    就将jsp下的lib文件夹中的文件都复制到  web-inf 文件夹下的lib中,就可以解决报错的问题了 按理说 还需要修改config.js中的URL值  但是我没修改  运行也出来效果了 <%@ page language="java" contentType="text/html; charset=utf-8"

kindEditor 富文本编辑器 使用介绍

第一版:存放位置:  ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 1 <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script> 2 <scrip

富文本编辑器的使用

第一步: 添加富文本编辑器的js的引用: 第二步:在jsp中添加textarea域,因为富文本编辑器是基于这个域进行创建的 第三步:富文本编辑器的引用 第四步:提交表单前需要将富文本编辑器和texarea的内容同步

万里长征第二步——django个人博客(第六步 ——添加富文本编辑器)

下载kindeditor 在admin.py文件中配置链接 class Media: js = ( '/static/js/kindeditor-4.1.10/kindeditor-min.js', #引入主文件 '/static/js/kindeditor-4.1.10/lang/zh_CN.js', #引入中文文件 '/static/js/kindeditor-4.1.10/config.js', #引入配置文件 ) 在kindeditor根目录下创建配置文件config.js,,并配置 K

使用wangEditor富文本编辑器

wangEditor官网地址:http://wangeditor.github.io/ 今天忽然想起来搞一下富文本编辑器的使用,本来想用百度的ueditor,但是貌似校园网给墙了.然后从知乎上发现了这个编辑器,优点是界面简洁,文档比较清楚.缺点也显而易见,比较简陋,要求不是很高的话,还是可以的 :) 下载解压完成之后,用到的只有dist这个文件. 作者在看云上发布的手册地址: http://www.kancloud.cn/wangfupeng/wangeditor2/113994 前台页面代码: