tp中ueditor编辑器的使用

1/引入三个文件

<script type="text/javascript" charset="utf-8" src="{$Think.config.PLUGIN_URL}ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{$Think.config.PLUGIN_URL}ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="{$Think.config.PLUGIN_URL}ueditor/lang/zh-cn/zh-cn.js"></script>

2/配置适合自己的ueditor编辑器

<script type=‘text/javascript‘>
UEDITOR_CONFIG.toolbars = [[
‘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‘,‘attachment‘, ‘map‘, ‘gmap‘, ‘insertframe‘, ‘insertcode‘, ‘webapp‘, ‘pagebreak‘, ‘template‘, ‘background‘, ‘|‘,
‘horizontal‘, ‘date‘, ‘time‘, ‘spechars‘, ‘snapscreen‘, ‘wordimage‘, ‘|‘,
]];

</script>

编辑器注释如下:
        ‘anchor‘, //锚点
        ‘undo‘, //撤销
        ‘redo‘, //重做
        ‘bold‘, //加粗
        ‘indent‘, //首行缩进
        ‘snapscreen‘, //截图
        ‘italic‘, //斜体
        ‘underline‘, //下划线
        ‘strikethrough‘, //删除线
        ‘subscript‘, //下标
        ‘fontborder‘, //字符边框
        ‘superscript‘, //上标
        ‘formatmatch‘, //格式刷
        ‘source‘, //源代码
        ‘blockquote‘, //引用
        ‘pasteplain‘, //纯文本粘贴模式
        ‘selectall‘, //全选
        ‘print‘, //打印
        ‘preview‘, //预览
        ‘horizontal‘, //分隔线
        ‘removeformat‘, //清除格式
        ‘time‘, //时间
        ‘date‘, //日期
        ‘unlink‘, //取消链接
        ‘insertrow‘, //前插入行
        ‘insertcol‘, //前插入列
        ‘mergeright‘, //右合并单元格
        ‘mergedown‘, //下合并单元格
        ‘deleterow‘, //删除行
        ‘deletecol‘, //删除列
        ‘splittorows‘, //拆分成行
        ‘splittocols‘, //拆分成列
        ‘splittocells‘, //完全拆分单元格
        ‘deletecaption‘, //删除表格标题
        ‘inserttitle‘, //插入标题
        ‘mergecells‘, //合并多个单元格
        ‘deletetable‘, //删除表格
        ‘cleardoc‘, //清空文档
        ‘insertparagraphbeforetable‘, //"表格前插入行"
        ‘insertcode‘, //代码语言
        ‘fontfamily‘, //字体
        ‘fontsize‘, //字号
        ‘paragraph‘, //段落格式
        ‘simpleupload‘, //单图上传
        ‘insertimage‘, //多图上传
        ‘edittable‘, //表格属性
        ‘edittd‘, //单元格属性
        ‘link‘, //超链接
        ‘emotion‘, //表情
        ‘spechars‘, //特殊字符
        ‘searchreplace‘, //查询替换
        ‘map‘, //Baidu地图
        ‘gmap‘, //Google地图
        ‘insertvideo‘, //视频
        ‘help‘, //帮助
        ‘justifyleft‘, //居左对齐
        ‘justifyright‘, //居右对齐
        ‘justifycenter‘, //居中对齐
        ‘justifyjustify‘, //两端对齐
        ‘forecolor‘, //字体颜色
        ‘backcolor‘, //背景色
        ‘insertorderedlist‘, //有序列表
        ‘insertunorderedlist‘, //无序列表
        ‘fullscreen‘, //全屏
        ‘directionalityltr‘, //从左向右输入
        ‘directionalityrtl‘, //从右向左输入
        ‘rowspacingtop‘, //段前距
        ‘rowspacingbottom‘, //段后距
        ‘pagebreak‘, //分页
        ‘insertframe‘, //插入Iframe
        ‘imagenone‘, //默认
        ‘imageleft‘, //左浮动
        ‘imageright‘, //右浮动
        ‘attachment‘, //附件
        ‘imagecenter‘, //居中
        ‘wordimage‘, //图片转存
        ‘lineheight‘, //行间距
        ‘edittip ‘, //编辑提示
        ‘customstyle‘, //自定义标题
        ‘autotypeset‘, //自动排版
        ‘webapp‘, //百度应用
        ‘touppercase‘, //字母大写
        ‘tolowercase‘, //字母小写
        ‘background‘, //背景
        ‘template‘, //模板
        ‘scrawl‘, //涂鸦
        ‘music‘, //音乐
        ‘inserttable‘, //插入表格
        ‘drafts‘, // 从草稿箱加载
        ‘charts‘, // 图表
这样个性化的编辑器就生成了
时间: 2024-10-09 18:13:10

tp中ueditor编辑器的使用的相关文章

html 实体转换为字符:转换 UEditor 编辑器 ( 在 ThinkPHP 3.2.2 中 ) 保存的数据

在 ThinkPHP 3.2.2 中使用 UEditor 编辑器保存文章内容时,数据库中保存的数据都被转义成实体,例如:&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-family: 微软雅黑, &amp;#39;Microsoft YaHei&amp;#39;; color: rgb(192, 0, 0);&quot;&gt;&lt;em&gt;&lt

使用 UEditor 编辑器获取数据库中的数据

在 ThinkPHP 3.2.2 中,使用 UEditor 编辑器获取数据库中保存的数据,可以使用 UEditor 自身提供的方法. 首先在视图模板中实例化编辑器,这是出现编辑器界面的必须的行为: <script type="text/javascript"> var editor = UE.getEditor('container'); </script> 然后使用 setContent 方法来使数据显示在编辑框内: editor.setContent(dat

vue中使用Ueditor编辑器

一.   下载包: 从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器,官网地址为: http://ueditor.baidu.com/website/ 下载解压后会得到如果下文件目录: 将上述Ueditor文件夹拷贝到vue项目的static文件夹中,此文件夹为项目的静态服务文件夹:   二.   修改配置 在ueditor.config.js中修改如下代码:   // 这里是配置Ueditor内部进行文件请求时的静态文件服务地址 window.UEDITOR_HOME_

在YII2框架中使用UEditor编辑器发布文章

在YII2框架中使用UEditor编辑器发布文章 创建文章数据表 文章数据表主要有4个字段 id  主键(int) title 标题(varchar) content 内容(text) created_time 创建时间(int) 创建文章模型 创建文章模型,不要忘记设置验证规则和字段的名称 namespace backend\models; class Article extends \yii\db\ActiveRecord { public function rules() { return

Thinkphp整合最新Ueditor编辑器

说到最新的富文本编辑器的确不少(ckeditor.fkeditor.ueditor),这些富文本编辑器如果单独使用基本上很方便,不需要做额外的配置,只要把官方的插件下载下来放到一个web容器中,看看 插件中提供的 index.html 里的代码就明白应该怎么调用了.因为富文本编辑器会经常涉及到文件.图片.视频资源的上传,如果本身所用到的框架或者是项目本身就有一个模块是专门来处理这一块儿的,对一些资源需要做特殊处理的,例如水印处理,对图片的大小处理(原图.缩略图),那么就设计到把富文本编辑器与你现

ueditor编辑器使用总结

ueditor使用小结 一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/website/onlinedemo.html 为了方便开发学习,我们下载它的完整版和.net版. ueditor_release_ueditor1_4_3_1-src.zip ueditor_release_ueditor1_4_3_1-gbk-net.zip 二.如何引入uedi

Nop3.8定制系列(二):UEditor编辑器

Nop中使用UEditor编辑器,官网 http://ueditor.baidu.com/website/ 下载后解压. \Presentation\Nop.Web\Content 下,新建文件夹 ueditor,将解压后的文件 copy 至此文件夹. \Presentation\Nop.Web\Administration\Views\Shared\EditorTemplates 下新建页面 UEditor.cshtml 1 @model String 2 @using Nop.Core 3

一个页面实例化两个ueditor编辑器,同样的出生却有不同的命运

今天遇到一个比较怪异的问题,有一项目需要在同一个页面上展现两个ueditor编辑器,在展现时并不任何问题,但当点击了“保存”按钮时就出错了,有其中一个ueditor在asp.net中无法获取编辑器的值,这时代码是这样的: //第一个ueditor <script type="text/plain" id="editorValue"><asp:Literal ID="ltlContent" runat="server&q

ueditor编辑器配置及使用介绍

<1>:ueditor编辑器配置 1:首先去官网下载安装包http://ueditor.baidu.com/website/download.html 2:解压后,只需要保留utf8-php这个文件夹里面的内容就可以了 3:根据自己项目的需要配置到根目录的相应文件夹下,我是配置到根目录的public目录下,如下图 4:在html页面配置加载UEditor编辑器,加入三个js文件以及在页面初始化UEditor编辑器 这里的id="editor"就是初始化需要获取的id上下需要