百度编辑器(baidu.Editor)的使用

时间:2024-03-04 13:49:20

编辑器一般多使用在一些论坛网或博客网站中,现在就讲解一下编辑器在页面中用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.生成后的百度编辑器效果