Baidu Editor (baidu. editor), Editor baidu. editor

Baidu Editor (baidu. editor), Editor baidu. editor

The editor is usually used in some forums or blog websites. Now I will explain how to generate the editor using Jquery on the page.

1. Page code:

　　　Introduce relevant JS files:

　　　<Script type = "text/javascript" charset = "UTF-8" src = "~ /Content/ueditor. config. js "> </script>
<Script type = "text/javascript" charset = "UTF-8" src = "~ /Content/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>

 

// Generate the editor

<Script type = "text/javascript">
$ (Document). ready (function (){
// Initialize Baidu Editor
Var editorOption = {
InitialFrameWidth: 784,
InitialFrameHeight: 300,
ElementPathEnabled: false,
WordCount: false, // disable word count statistics
// Customize the toolbar
Toolbars :[[
'Fullscreen', 'source', '|', 'undo ', 'redo', '| ',
'Bold ', 'italic', 'underline', 'fontborder', 'strikethangout', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset ', 'blockquote', 'pasteplain ',' | ', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '| ',
'Rowspacingtop', 'rowspacingbottom ', 'lineheight',' | ',
'Customstyle', 'paragraph', 'fontfamily ', 'fontsize',' | ',
'Ctionityalityltr', 'ctionctionalityrtl ', 'indent', '| ',
'Justifyleft', 'justifycenter', 'justifyright', 'justifyjustify ',' | ', 'touppercase', 'tolowercase',' | ',
'Link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft ', 'imageright', 'imagecenter', '| ',
'Simpleupload', 'insertimage', 'expression', 'scrawl ', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframework ', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '| ',
'Horizontal ', 'date', 'time', 'spechars', 'snapscreen', 'wordimage',' | ',
'Inserttable', 'deleteable', 'delete', 'insertrow', 'deleteterow ', 'insertcol', 'deletecol', 'mergecells ', 'mergeright', 'mergelow ', 'splittocell', 'splittorows ', 'splittocols', 'charts',' | ',
'Print ', 'preview', 'searchreplace', 'help', 'drafs', 'kityformula', 'preview'
]

}
Var editor = new baidu. editor. ui. Editor (editorOption );
Editor. render ('description ');

// When submitting a form, assign the content entered in the editor to the corresponding form field.
$('Form1 '). submit (function (){
$ ('# Description'). val (editor. getContent ());
});
})

</Script>

 

<Div class = "form-group">
<Label class = "control-label col-sm-2"> question content: </label>
<Div class = "col-sm-2">
@ Html. TextAreaFor (model => model. description)
</Div>
@ Html. ValidationMessageFor (model => model. description)
</Div>

2. Baidu editor effect after generation