Laravel Vuejs 实战：开发知乎（8）美化编辑器

1.使用UEditor增量包：

执行下载：

  1 git clone https://github.com/JellyBool/simple-ueditor.git

2.用此项目的 ueditor 目录替换原来的 public/vendor/ueditor 目录；

可以先删除原来的目录，移动simple-ueditor文件夹下ueditor整个文件夹的到public/vendor/目录里面，然后删除simple-ueditor目录即可；

3.实例化编辑器的时候配置 toolbar ，主要是 toolbar 的配置

  1 var ue = UE.getEditor('editor', {

  2     toolbars: [

  3             ['bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'insertunorderedlist', 'insertorderedlist', 'justifyleft','justifycenter', 'justifyright',  'link', 'insertimage', 'fullscreen']

  4         ],

  5     elementPathEnabled: false,

  6     enableContextMenu: false,

  7      autoClearEmptyNode:true,

  8      wordCount:false,

  9      imagePopup:false,

 10      autotypeset:{ indent: true,imageBlockLine: 'center' }

 11  });

就是将create.blade.php文件做如下修改：

  1 @extends('layouts.app')

  2 @section('content')

  3     @include('vendor.ueditor.assets')

  4     <div class="container">

  5         <div class="row">

  6             <div class="col-md-8 col-md-offset-2">

  7                 <div class="card">

  8                     <div class="card-header">

  9                         发布问题

 10                     </div>

 11                     <div class="card-body">

 12                         <form action="{{ route('questions.store') }}" method="post">

 13                             {{--注意要有csrftoken--}}

 14                             @csrf

 15                             <div class="form-group">

 16                                 <label for="title">标题</label>

 17                                 <input type="text" name="title" class="form-control" placeholder="标题" id="title"

 18                                        value="{{ old('title') }}">

 19                                 <p class="text text-danger"> @error('title') {{ $message }} @enderror </p>

 20                             </div>

 21                             <!-- 编辑器容器 -->

 22                             <script id="container" name="content" type="text/plain"

 23                                     style="width: 100%">{!! old('content') !!}</script>

 24                             <p class="text text-danger"> @error('content') {{ $message }} @enderror </p>

 25                             <!--发布按钮-->

 26                             <button type="submit" class="btn btn-primary mt-2 float-md-right">发布问题</button>

 27                         </form>

 28                     </div>

 29                 </div>

 30             </div>

 31         </div>

 32     </div>

 33

 34     <!-- 实例化编辑器 -->

 35     <script type="text/javascript">

 36         var ue = UE.getEditor('container', {

 37             toolbars: [

 38                 ['bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'insertunorderedlist', 'insertorderedlist', 'justifyleft', 'justifycenter', 'justifyright', 'link', 'insertimage', 'fullscreen']

 39             ],

 40             elementPathEnabled: false,

 41             enableContextMenu: false,

 42             autoClearEmptyNode: true,

 43             wordCount: false,

 44             imagePopup: false,

 45             autotypeset: {indent: true, imageBlockLine: 'center'}

 46         });

 47         ue.ready(function () {

 48             ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.

 49         });

 50     </script>

 51 @endsection

如果刷新浏览器看到的富文本编辑器如图：

则清一下浏览器缓存登录后再刷新：

如果由自定义需求，可以查看vendor/ueditor/ueditor.config.js文件；

2.补充扩展：

给一个比较流行的富文本编辑器列表：

CKEditor

TinyMCE

Trix

扩展包：

https://packalyst.com/packages/tag/editor

laravel-ckeditor

laravel trix

laravel TinyMCE

我这里选择了 Trix Editor：

安装及配置：

执行命令安装Trix Editor扩展包：

  1 composer require te7a-houdini/laravel-trix

然后发布配置和迁移：

  1 php artisan vendor:publish --provider="Te7aHoudini\LaravelTrix\LaravelTrixServiceProvider"

迁移文件发布成功后，执行命令通过迁移文件创建数据表：

  1 php artisan migrate

然后在head标签内添加@trixassets 导航指令：

  1 <html>

  2     <head>

  3         @trixassets

  4     </head>

  5 </html>

使用示例：参考Trix Editor

Laravel Vuejs 实战：开发知乎（8）美化编辑器的更多相关文章

Laravel Vuejs 实战：开发知乎（6）发布问题
1.view部分: 安装一个扩展包:Laravel-UEditor composer require "overtrue/laravel-ueditor:~1.0" 配置添加下面 ...
Laravel Vuejs 实战：开发知乎（10）使用 Select2 优化话题选择
1.添加选择Topic 使用Select2,如何安装Select2 ,具体使用实例 Select2 and Laravel: Ajax Autocomplete 及 Loading data remo ...
Laravel Vuejs 实战：开发知乎（9）定义话题与问题关系
1.话题[Topic] 执行命令: php artisan make:model Topic –cmr 修改****_**_**_create_topics_table.php数据库迁移文件如下: c ...
Laravel Vuejs 实战：开发知乎（3）本地化和自定义消息
1.本地化由于所有blade默认采用的是 _('')方式输出标签文本,所以可以安装一个语言包,直接指定本地语言为zh_CN即可: 安装 https://github.com/caouecs/Lara ...
Laravel Vuejs 实战：开发知乎（2）用户登录
1.安装一个给用户提示的扩展包: 二选一: https://github.com/laracasts/flash [我选的这个]https://github.com/oanhnn/laravel-fl ...
Laravel Vuejs 实战：开发知乎（2）用户注册
1.本节需要发送验证邮件 2.教程使用SendCloud发送邮件 [我使用的是mailtrap] 3. composer require laravel/ui 安装完成后 php artisan ui ...
Laravel Vuejs 实战：开发知乎（1）项目环境配置和用户表设计
1.使用laragon新建laravel项目 zhihu 2.配置env文件的database设置 DB_DATABASE=zhihu 3.分析users表需要的字段 4.修改数据库迁移文件: cla ...
Laravel Vuejs 实战：开发知乎（5）设计问题表
1.执行命令: php artisan make:model Models/Question -cm 2.设计问题的数据库迁移文件中的字段: <?php use Illuminate\Datab ...
Laravel Vuejs 实战：开发知乎（7）验证问题表单字段
上一节代码中已经实现下面代码中的validate内部配置就是: public function store(Request $request) { // $data = $request->v ...

随机推荐

soundtouch change rate matlab implementation
soundtouch implement of changing rate in a way same with resample(SRC). When rate < 1, it need in ...
ORA-01789: 查询块具有不正确的结果列数
问题描述 ORA-01789: 查询块具有不正确的结果列数问题原因 sql语句用union时的两个语句查询的字段不一致,好像顺序也要保持一致才行
SCRIPT429: Automation 服务器不能创建对象
安全模式设置成“中”,如果javascript脚本中报这个错误,应将IE的安全设置“不允许运行未标记为安全的activeX控件”启用即可. 注意如果您将相应的网站设成“受信任的站点”,必须对“受信任的 ...
python如何离线装包离线如何部署python环境
1,安装python windows: 我用的是python3.6.6.exe安装包,需要提前下载好 ubuntu: 自带的python,如果是ubuntu18.04的话,自带的应该是3.6.8 2, ...
NEON的vsub方法溢出
关于NEON的vsub方法的溢出,结果如下: vsub会产生溢出,根据数据bit表示规律,可知溢出结果和理论正确结果形成互补,比如249-(-7)=256 使用类vreinterpretq_s16_u ...
Virtual Judge POJ 2251 Dungeon Master
三维数组加宽搜 #include <stdlib.h> #include <string.h> #include <stdio.h> ; int c, k, h; ...
mongo 改数据库名称
用命令 db.copyDatabase('old_name', 'new_name') 可以备份出一个新的数据库. 然后 use old_name 并db.dropDatabase() 即可删除旧的 ...
goahead web 服务器
https://blog.csdn.net/xieyihua1994/article/details/74002413
微服务监控平台获取网关（zuul）配置列表
步骤: (1)读取zuul的配置文件,获取路由配置项信息: private static Properties props; static { String fileName = "appl ...
6_14 Abbott的复仇（UVa816）<图的最短路BFS>
1999次世界总决赛的比赛包括一个骰子迷宫问题.在这个问题被写的时候,法官们无法发现骰子迷宫概念的原始来源.不久之后的比赛,但是,罗伯特先生雅培,无数的迷宫和对作者的创造者主题,联系大赛评委,自称是骰 ...

Laravel Vuejs 实战：开发知乎 （8）美化编辑器