富文本编辑器

富文本编辑器Redactor在Yii2中的应用

PHPer 2018-01-21 292次浏览 0条评论 0 1 0
网上的内容很不给力,有一些小的使用问题,对于开始用的人,各种搜都找不到好的回答,结果搞的我自己折腾了半天,到最后才发现,之前用的办法,根本没必要用。先上一张图: 界面不错吧,功能更是强大,对富文本的需求基本都能...

网上的内容很不给力,有一些小的使用问题,对于开始用的人,各种搜都找不到好的回答,结果搞的我自己折腾了半天,到最后才发现,之前用的办法,根本没必要用。先上一张图:

8cebbd3f6c-redactor-qq-jie-tu20180121003618.jpg

界面不错吧,功能更是强大,对富文本的需求基本都能满足,对于Yii2版本的,美中不足是不能在参数里设置一些很少用的需求,另外图片上传没看到自动生成缩略图的功能,如果没有的话,只能自己重写些代码。这里附上Github链接:https://github.com/yiidoc/yii2-redactor

话说Redator的工具栏 toolbar,光工具栏就有不少给力的功能:给工具栏设置颜色,

<style type="text/css">
.redactor-toolbar {
    background: #f8f8f8;
}
</style>
<script>
$(function()
{
    $('#redactor').redactor();
});
</script>
 <textarea id="redactor" name="content">...</textarea>

工具栏和输入区域分离

<script>
$(function()
{
    $('#redactor').redactor({
        focus: true,
        toolbarExternal: '#toolbar'
    });
});
</script>
<div id="toolbar"></div>
<p>Lorem ipsum dolor...</p>
 <textarea id="redactor" name="content">...</textarea>

给Redactor增加一个外部的容器

<script>
$(function()
{
    $('#redactor').redactor({
        focus: true,
        toolbarFixedTarget: '#toolbar-box'
    });
});
</script>
<div id="toolbar-box" style="position: relative; height: 300px; overflow: auto;">
    <textarea id="redactor" name="content">...</textarea> 
</div>

Air toolbar ,自动隐藏的工具栏,那操作,那浮现

<script>
$(function()
{
    $('#redactor').redactor({
        air: true,
        imageUpload: '/your-upload-script/'
    });
});
</script>
<textarea id="redactor" name="content">...</textarea>

就这些工具栏的功能,就是很多富文本编辑所没有的。 ...

登录 | 立即注册

更新于:2018-02-02 20:44:28
    您需要登录后才可以评论。 登录 | 立即注册
    相关内容

    富文本编辑器

    个人比较喜欢的是 Redactor,还有Simditor、wangEditor和 bootstrap-wysiwyg,这些富文本的UI都很好看,特别是Redactor和Simditor,不过Simditor扩展并不丰富。...

    富文本编辑器Redactor在Yii2中的应用

    富文本粘贴处理还是没把www.cnblogs.com上的复制代码的样式去掉 20200405

    富文本粘贴处理还是没把www.cnblogs.com上的复制代码的样式去掉 20200405

    Yii2模型简介

    模型Model是MVC模型中的M,是业务数据、业务规则和业务逻辑的对象。Yii很好的展现了这点,用户可用创建自己定义的模型,比如给一个的表单定义一个模型,这样就把表...

    Yii2模型简介-属性

    Yii2模型简介-场景

    Yii2模型简介-验证规则

    Yii2模型简介-块赋值

    Yii2模型简介-非安全属性

    Yii2模型简介-数据导出

    Yii2模型简介-字段

    Yii2模型简介-最佳实践

    Yii2扩展整理

    这里整理一些自己实测好用的Yii2扩展 20200406

    【坑,勿用】Yii的yii-xunsearch扩展,支持中文的搜索引擎,支持全文索引全文搜索

    简单,易用的yii2导入和导出组件( illusion/yii2-excel)

    Yii2小部件Widget

    Widgets 小部件kop/yii2-scroll-pager:瀑布滚动翻页 样式不怎么好看,必须点击更多才能加载更多yii2-widget-linkpager:带分页大小的分页栏 用了,还不错的yii2-ajaxf...
    推荐内容

    超省心游戏加速:Wireguard+udp加速(CentOS版)--(实测:超不省心),以后搜帖...

    Wireguard+udpspeeder+udp2raw游戏加速方案 ---------------------------------------错误报告及解决-----------...

    wireguard+udpspeeder+udp2raw多用户配置

    Wireguard+udpspeeder+udp2raw游戏加速方案改进版-实测有效

    基于CentOS7 Centos8平台搭建邮件服务器

    EwoMail​在Centos8上安装了,各种坑,各种报错。这个集成包太臃肿了。 20200416 EwoMail 已经弃用,国内的一家公司搞的坑爹产品。 20200418

    如何在RHEL8 / CentOS8上安装Webmin

    设置postfix作为邮件发送服务器

    查问我看笔记功能的实现过程-全文搜索待开启,试试yiisoft/yii2-sphinx

    查问我看笔记功能的实现的重点就是全文搜索,如果不用Yii自带的ActiveRecord的话,就要找扩展,先找了个yii-xunsearch,不行太差了,又找了yiisoft/yii2-elasticsearch,...

    yii2框架中使用sphinx使用搜索引擎 多条件选择搜索

    运行php composer.phar require --prefer-dist yiisoft/yii2-sphinx

    MySQL数据库设计总结

    规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎。注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字...

    什么是B-Tree

    二叉查找树、平衡二叉树、红黑树、B-/B+树性能对比

    使用Yii2遇到的问题整理

    Yii的东西很多,学习和使用的时候遇到了各种各样的问题,这里记录整理下,方便大家分享。composer安装kartik-v/yii2-mpdf时报错,这里记录下 Yii2用compos...

    Yii2用composer更新时遇到的错误

    Yii2 用composer update 时提示'git' 不是内部或外部命令,也不是可运行的程序或批处理文件

    Yii2​用composer安装kartik-v/yii2-mpdf时报错,成功解决后,再让其支持中文。

    使用Yii2的setFlash和bootstrap.min.js遇到的问题,bootstrap.min.js的bug?

    Yii2的action不支持大小写吗?其实是支持的

    composer install 使用tips-网上找的composer install的使用技巧方法