富文本编辑器

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

PHPer 2018-01-21 142次浏览 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...
    推荐内容

    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的使用技巧方法

    关于编程时遇到意想不到的错误如何解决

    比如当你写的一个php脚本执行出现问题,如果你的脚本里自己带了对错误的处理,可能会显示那里出错了。或者你用的框架,框架里有debug模式,会报错。

    使用Laravel 5.4问题总结

    这里写下laravel5.4的总结,用laravel也有段时间了,优点就不用多说了,好上手,较易学较易用,blade模板是非常的好用,等等。laravel的缺点有几个,灵活性一般,框架稍...

    使用Laravel 5.4问题总结 Lost connection to MySQL server at 'reading initial communication ...

    Laravel 5.4各种错误提示总结

    localStorage介绍和使用

    一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(co...

    localStorage的使用

    localStorage其他注意事项