如何配置一个最基本的web富文本编辑器？--之wangEditor（验证成功）

第一步，引用wangEditor的css文件，css文件最好在<head>中引用

<link rel="stylesheet" type="text/css" href="css/wangEditor-1.3.0.min.css">

第二步，引用jquery和wangEditor.js，js文件最好在<body>最下方引用

<script type="text/javascript" src='js/jquery-1.10.2.min.js'></script>
<script type="text/javascript" src='js/wangEditor-1.3.0.min.js'></script>

第三步，配置富文本框。

<script type="text/javascript">$(function(){$('#textarea1').wangEditor();});
</script>

一个完整的配置实例：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><!-- 5.29:wangEditor富文本编辑器：测试成功! --><link rel="stylesheet" type="text/css" href="wangEditor/css/wangEditor-1.3.0.min.css"><title>发帖</title></head><body><form name="myForm" action="ArticleManage.action"  method="post">  标题: <input type="text" name="title" size="32">（限输入15个文字）<br> <!--  5.16加个id属性 -->内容：<textarea rows="10" id="editor" cols="25" name="content" ></textarea><input type="submit"  value="提交"> <input type="reset"  value="重置"> </form> <script type="text/javascript" src='wangEditor/js/jquery-1.10.2.min.js'></script>
<script type="text/javascript" src='wangEditor/js/wangEditor-1.3.0.min.js'></script>
<script type="text/javascript">$(function(){$('#editor').wangEditor();});
</script></body>
</html>

我已15年5月30日用了该文本编辑器，并配置成功（struts等其他框架标签的textarea里没配置成功）。即只适用于普遍的HTML的textarea标签中使用

以上demo是wangEditor的最基本应用。引用css和js文件，为textarea执行一个wangEditor()方法，即可生成富文本框。

效果展示：

更多配置请参见：文档说明

或http://www.wangeditor.com/doc.html及http://www.wangeditor.com/

转载于:https://www.cnblogs.com/mys1992/p/4540784.html

如何配置一个最基本的web富文本编辑器？--之wangEditor（验证成功）相关推荐

web富文本编辑器的选择のxheditor
最近在研究web富文本编辑器,处理知道的 1.老牌fckeditor 网址:http://ckeditor.com/ 2.百度退出的ueditor 网址:http://uedito ...
wangEditor - 轻量级web富文本编辑器（可带图片上传）
业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...
富文本_轻量级 web 富文本编辑器 —— wangEditor
介绍 wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.kancloud.cn/wan ...
web文本编辑器php源码,超级轻量web富文本编辑器HandyEditor
HandyEditor 是一套十分轻量且同时适用于手机端和pc端的web富文本编辑器,主要用于让用户在网站上获得所见即所得编辑效果,可以用 HandyEditor 把传统的多行文本输入框(textar ...
php中html富文本编辑器,php + wangEditor 富文本编辑器的配置
小编最近做了一个项目,在用户发表文章的模块上,考虑到用户编写文章时的排版需求.要借助富文本编辑器.搜索发现,现在有很多免费的编辑器插件.例如:百度的Ueditor.Summernote .但是这几个插 ...
web 富文本编辑器总结
前言富文本编辑器,就是除了能输入不同的文本之外,还可以之间粘贴图画等其他的多媒体信息.也可说是所见即所得的编辑器. 目前可以使用的编辑器有很多, 在网络上有找到这样一份比较表格: 编辑器产地稳定 ...
所见即所得html5编辑器,一个漂亮的所见即所得(WYSIWYG)富文本编辑器:Froala
本文翻译来自wysiwyg-editor,大家想看原文可以点击此链接. 介绍 WYSIWYG HTML编辑器是一款有史以来最强大的JavaScript富文本编辑器之一.它采用了最新的技术,并利用jQu ...
14款web前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择? 先看看市面上都有哪些可用的富文本编辑器: TinyMCE(插件式的,支持 Vue,React,Angular 框架) ...

如何配置一个最基本的web富文本编辑器？--之wangEditor（验证成功）

我已15年5月30日用了该文本编辑器，并配置成功（struts等其他框架标签的textarea里没配置成功）。即只适用于普遍的HTML的textarea标签中使用

以上demo是wangEditor的最基本应用。引用css和js文件，为textarea执行一个wangEditor()方法，即可生成富文本框。

效果展示：

如何配置一个最基本的web富文本编辑器？--之wangEditor（验证成功）相关推荐

最新文章

热门文章