前台如何使用编辑器

目前前台使用了两个开源的编辑器，都已经对wmcms进行了优化，所以可以直接使用具体方法如下：

1.wangeditor【推荐】

先引入jq和编辑器主要js，然后设置一个隐藏的textarea文本域，使用编辑器接口监测内容变化实时同步到隐藏的文本域。

<script type="text/javascript" src="/files/js/wangeditor/wangeditor.js"></script>	
<script type="text/javascript" src="/files/js/jquery-2.0.0.min.js"></script>
<textarea name="content" style="display:none">{内容}</textarea>
<div id="content" style="background: #FFFFFF;">{内容}</div>
<script type="text/javascript">
var editor = new window.wangEditor('#content');
//监控变化，同步更新到 textarea
editor.customConfig.onchange = function (html) {
	$('[name=content]').val(html);
}
editor.create();

//附加配置，默认为论坛上传url可以不设置，如果是其他的地方使用则要配置上传类型，如文章投稿编辑
editor.customConfig.uploadImgType = 'articleedit';
</script>

附：未使用的附件显示与删除

逻辑，首先使用标签列出所有未使用的附件，然后调用插入和删除的js方法即可。

注：只有此编辑器有插入和删除的js方法，如果使用其他的编辑器请参照/files/js/wangeditor/wangeditor.js里面的代码。

{未使用附件:}。
    <li id="attachment_{文件id}" data-url="{文件地址}" data-alt="{文件描述}" data-ext="{文件后缀}">
	<div onclick="attachment_insert({文件id})" title="点击插入-{文件描述}"><img src="{文件地址}" width="30" height="30"></div>
	<div onclick="attachment_insert({文件id})" title="点击插入-{文件描述}">{文件描述}</div>
	<div onclick="attachment_delete({文件id})" title="点击插入删除文件">删除</div>
    </li>
{/未使用附件}

2.simditor

缺点：不能点击上传图片，只能拖动上传。

先引入jq和编辑器主要js，然后设置一个编辑器内容，data-name是表单的名字。具体接口方法请参考simditor官方文档

<script type="text/javascript" src="/files/js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="/files/js/simditor/simditor.js"></script>
<div id="content" data-name="content">{内容}</div>
<script>
var editor = new Simditor({
	textarea:$('#content'),
	upload:{url : '/wmcms/action/index.php?ajax=yes&action=upload.bbspost'}
});
</script>