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.补充扩展：
给一个比较流行的富文本编辑器列表：
扩展包：
https://packalyst.com/packages/tag/editor
我这里选择了 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 ...
随机推荐
- python定义一种新类型的元组
# 定义一种新类型的元组,只保留int类型,切只大于0的元素 # 例如:IntTuple([1,-1,"abc",6,['x','y'],3])==>(1,6,3) # 解决 ...
- tensorflow学习笔记——GoogLeNet
GoogLeNet是谷歌(Google)研究出来的深度网络结构,为什么不叫“GoogleNet”,而叫“GoogLeNet”,据说是为了向“LeNet”致敬,因此取名为“GoogLeNet”,所以我们 ...
- centOS7中启动MySQL数据库提示： Failed to start mysqld.service: Unit not foundc
现象: 在centOS7中启动MySQL数据库提示: Failed to start mysqld.service: Unit not found [明明已经安装了,为什么提示不存在呢?] 原因: 在 ...
- 记manjaro图形驱动删除后的一次补救
#一.前言 众所周知,NVIDIA的闭源驱动在Linux上的兼容性不是很好,再加上我不玩游戏,于是我就想卸载独显只留核显.我以为我装了独显和核显两种驱动,原本想直接删除独显驱动,没想到删除的是bumb ...
- python基于百度AI开发文字识别
很多场景都会用到文字识别,比如app或者网站里都会上传身份证等证件以及财务系统识别报销证件等等 第一步,你需要去百度AI里去注册一个账号,然后新建一个文字识别的应用 然后你将得到一个API Key 和 ...
- Linux - Shell - #!/bin/bash
概述 简单解释一下 shell 脚本卡头的 #!/bin/bash 水一篇, 少一篇 背景 shell 脚本中的注释 通常是 以# 卡头的行 但是有时候执行 shell 的时候, 会有这种内容 #!/ ...
- Linux 中查看可用的网络接口
目录 Linux 中查看可用的网络接口 在 Linux 中找到可用的网络接口 title: Linux 中查看可用的网络接口 date: 2020/2/25 16:56:36 toc: true -- ...
- DockerToolbox安装docker - Windows 10
Wiindows安装docker 在转换成linux模式的时候不能使用,只能退而求其次安装Docker ToolBox在windows10中使用docker. 一.前言 由于本机使用的是win10家庭 ...
- 【转载】C/C++内存管理详解
转自:http://chenqx.github.io/2014/09/25/Cpp-Memory-Management/ 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中 ...
- Winform遍历窗口的所有控件（几种方式实现）
本文链接:https://blog.csdn.net/u014453443/article/details/85088733 扣扣技术交流群:460189483 C#遍历窗体所有控件或某类型所有控件 ...