编辑器一般多使用在一些论坛网或博客网站中,现在就讲解一下编辑器在页面中用Jquery怎么生成
1.页面代码:
引入相关JS文件:
<script type="text/javascript" charset="utf-8" src="~/Content/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="~/Content/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="~/Content/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="~/Content/ueditor/kityformula-plugin/addKityFormulaDialog.js"></script>
<script type="text/javascript" charset="utf-8" src="~/Content/ueditor/kityformula-plugin/getKfContent.js"></script>
<script type="text/javascript" charset="utf-8" src="~/Content/ueditor/kityformula-plugin/defaultFilterFix.js"></script>
<script type="text/javascript" charset="utf-8" src="~/content/ueditor/kityformula-plugin/kityformula/js/kity-formula-parser.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="~/content/ueditor/kityformula-plugin/kityformula/js/kityformula-editor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="~/content/ueditor/kityformula-plugin/kityformula/js/kitygraph.all.js"></script>
//生成编辑器
<script type="text/javascript">
$(document).ready(function () {
//初始化百度编辑器
var editorOption = {
initialFrameWidth: 784,
initialFrameHeight: 300,
elementPathEnabled: false,
wordCount: false,//关闭字数统计
//自定义工具栏
toolbars: [[
\'fullscreen\', \'source\', \'|\', \'undo\', \'redo\', \'|\',
\'bold\', \'italic\', \'underline\', \'fontborder\', \'strikethrough\', \'superscript\', \'subscript\', \'removeformat\', \'formatmatch\', \'autotypeset\', \'blockquote\', \'pasteplain\', \'|\', \'forecolor\', \'backcolor\', \'insertorderedlist\', \'insertunorderedlist\', \'selectall\', \'cleardoc\', \'|\',
\'rowspacingtop\', \'rowspacingbottom\', \'lineheight\', \'|\',
\'customstyle\', \'paragraph\', \'fontfamily\', \'fontsize\', \'|\',
\'directionalityltr\', \'directionalityrtl\', \'indent\', \'|\',
\'justifyleft\', \'justifycenter\', \'justifyright\', \'justifyjustify\', \'|\', \'touppercase\', \'tolowercase\', \'|\',
\'link\', \'unlink\', \'anchor\', \'|\', \'imagenone\', \'imageleft\', \'imageright\', \'imagecenter\', \'|\',
\'simpleupload\', \'insertimage\', \'emotion\', \'scrawl\', \'insertvideo\', \'music\', \'attachment\', \'map\', \'gmap\', \'insertframe\', \'insertcode\', \'webapp\', \'pagebreak\', \'template\', \'background\', \'|\',
\'horizontal\', \'date\', \'time\', \'spechars\', \'snapscreen\', \'wordimage\', \'|\',
\'inserttable\', \'deletetable\', \'insertparagraphbeforetable\', \'insertrow\', \'deleterow\', \'insertcol\', \'deletecol\', \'mergecells\', \'mergeright\', \'mergedown\', \'splittocells\', \'splittorows\', \'splittocols\', \'charts\', \'|\',
\'print\', \'preview\', \'searchreplace\', \'help\', \'drafts\', \'kityformula\', \'preview\'
]]
}
var editor = new baidu.editor.ui.Editor(editorOption);
editor.render(\'description\');
//表单提交时将编辑器里输入的内容赋值给相应的表单字段
$(\'form1\').submit(function () {
$(\'#description\').val(editor.getContent());
});
})
</script>
<div class="form-group">
<label class="control-label col-sm-2">试题内容:</label>
<div class="col-sm-2">
@Html.TextAreaFor(model => model.description)
</div>
@Html.ValidationMessageFor(model => model.description)
</div>
2.生成后的百度编辑器效果