您的位置：首页 > 移动开发 > 微信开发

免费的微信编辑器插件调用

2016-06-30 10:07 597 查看

最近项目用到像微信朋友圈的文章排版，图片素材等效果，上网找了很多微信编辑器，但是很多都没有开放调用，都是要在该网站编辑好文章，再复制过去。最好找到一个比较好用的，135微信编辑器，虽然免费试用的素材有限，但是已经足够了，哈哈。

135编辑器主要是用了百度编辑器的UEditor，大家可以先去http://ueditor.baidu.com/website/ 下载百度编辑器，跟着可以去http://www.135plat.com/open_editor.html查看企业插件调用说明。

主要jsp页面代码

test.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<script type="text/javascript">

</script>
<title>test</title>
</head>
<body>
<%@ include file="ueditor.jsp"%>
</body>
</html>

ueditor.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/ueditor/ueditor.config.js"></script>
<script src="http://static.135editor.com/js/ueditor/ueditor.all.min.js"></script>
<script src="http://static.135editor.com/open/v1/a92d301d77.js" type="text/javascript"></script>
<link href="http://static.135editor.com/open/v1/96619a5672.css"  rel="stylesheet" type="text/css" />
<script type="text/javascript">
uEditor = UE.getEditor('WxMsgContent',{
initialFrameHeight:400,//初始化编辑器高度
minFrameHeight:300,//最小编辑器高度
autoHeightEnabled:false,//自动拉伸
open_editor: true,
style_width:360, //样式区宽度像素
style_url : 'http://www.135editor.com/editor_styles/open?inajax=1',
toolbars: [
[
'undo', //撤销
'redo', //重做
'bold', //加粗
'indent', //首行缩进
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'fontborder', //字符边框
'superscript', //上标
'subscript', //下标
'formatmatch', //格式刷
'removeformat', //清除格式
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'forecolor', //字体颜色
'backcolor', //背景色
'link', //超链接
'emotion', //表情
'spechars', //特殊字符
'blockquote', //引用
'simpleupload', //单图上传
'insertimage', //多图上传
'selectall', //全选
'cleardoc', //清空文档
'preview' //预览
]
]
});

function getUeditorContent(id){
var ueditorContent = uEditor.getContent();
alert(ueditorContent);
$("#"+id).val(ueditorContent);
}

</script>
<div style="width:800px;margin:0 auto;">
<script id="WxMsgContent" style="max-width: 100%;width: 100% !important;" type="text/plain"></script>
</div>

你可以把ueditor.jsp放到你的页面来引用。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航