zoukankan      html  css  js  c++  java
  • 基于jsp的百度Ueditor插件的使用

    初次使用百度的富文本编辑器Ueditor,写下使用经验以备不时之需

    只是简单的应用,如有错误,请指正

    首先去下载编辑器插件http://ueditor.baidu.com/website/download.html

    我选择的是开发版Jsp  UTF-8版

    这样我们就得到一个ZIP压缩包

    解压该压缩包我们会得到utf-8-jsp的文件夹,文件夹的内容包括

    在web项目中的webapp文件夹底下新建static/js/ueditor这样的文件结构

    文件夹里所有的文件通通拷入ueditor中,我使用的idea集成开发工具,遇到文件dialogs文件拷不进去的情况,那就直接右键ueditor点击Show in Explorer直接拷入文件底下

    这样准备工作就完成了。

    接下来,在需要集成编辑器的jsp页面中导入js文件

    导入这几个,文件目录是相对于webapp的

    然后在script中写页面优先加载

    <script id="editor" type="text/plain" style="1024px;height:500px;">编辑内容初始化</script>

    将该段代码放入from表单中或你想显示的地方,当然这些操作官网也可以获得

    关键是如何通过from表单提交内容,在我的项目中,from表单根本不认识script

    我通过隐藏域

     将从富文本编辑器中获得内容填充到隐藏域中

    这样就完成了富文本编辑器的集成

    此外,上传图片的配置在config.json文件下,重点关注imageUrlPrefix和imagePathFormat两个value值,也可以看其他博友写的关于上传图片的博文

     怎样控制富文本编辑器的工具图标?

    在实例化富文本编辑器的时候传入想要显示的值即可

    可将以下代码复制粘贴,不想用那个功能直接注释

    ue_s = UE.getEditor('editor',{toolbars: [[
    'fullscreen',//全画面
    'source',//源代码
    '|',
    'undo',//取消
    'redo',//还原
    '|',
    'bold',//黑字体
    'italic',//斜字体
    'underline',//下划线
    'fontborder',//字体边框
    'strikethrough',//删除线
    'superscript',//上标高度
    'subscript',//下标
    'removeformat',//清除格式
    'formatmatch',//格式刷
    'autotypeset',//自动排版
    'blockquote',//引用,用来设定一段较长的文字段落 缩进的标签.文本会2端都缩进
    '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',//查询替换
    'drafts',//从查稿箱加载
    'help'//帮助
    ]]
    });
  • 相关阅读:
    day15 web框架和Django基础
    activiti5.22 获得mybatis sessionFactory
    activiti 视图
    activiti 任意退
    spring cloud &&spring boot
    JPA 一对多关联
    webstorm 快捷键
    web storm 破解
    Excel通用导出
    activiti 小计
  • 原文地址:https://www.cnblogs.com/f-bob/p/9511503.html
Copyright © 2011-2022 走看看