npm安装vue2-editor
npm install --save vue2-editor
引入VueEditor模块
import { VueEditor } from "vue2-editor"
- ImageDrop是用于图片拖拽
- ImageResize是用于调整编辑的图片尺寸
引入VueEditor组件
components: {
VueEditor
}
引入vue-editor节点
<vue-editor
id="editor"
:editor-options="editorSettings"
v-model="form.content"
use-custom-image-handler
@imageAdded="handleImageAdded"/>
- 其中v-model绑定的是编辑内容
- use-custom-image-handler是使用自定义图片上传
- @imageAdded绑定的是自定义上传的方法代码如下
handleImageAdded(file, Editor, cursorLocation, resetUploader) {
const formData = new FormData()
formData.append('file', file)
upload(formData).then(response => {
if (response.code === 200) {
const url = getRealPath(response.data.url)
Editor.insertEmbed(cursorLocation, 'image', url)
resetUploader()
} else {
console.error(response.message)
}
// eslint-disable-next-line handle-callback-err
}).catch(error => {
console.error(error)
})
}
- response对应上传返回值，对应json格式是
{code:200, message: 'success', data:{url: uploads/xxxxx.jpg}}
- 此处的上传后台代码是php将文件保存到uploads目录下面，然后返回相对路径，yii代码也提供一下，供大家参考，命名空间根据自己的代码修改
<?php
namespace app\common\helper;
use yii\base\BaseObject;
class UploadForm extends Model
{
public $mFile;
public function rules()
{
return [
[['mFile'], 'file'],
];
}
public function upload()
{
if ($this->validate()) {
$path = "uploads/" . date("YmdH", time()) . "/";
if (!file_exists($path)) {
mkdir($path, 0777, true);
}
$fileName = Yii::$app->getSecurity()->generateRandomString(8) . time();
$fullPath = $path . $fileName . '.' . $this->mFile->extension;
$this->mFile->saveAs($fullPath);
return $fullPath;
} else {
return null;
}
}
}
<?php
namespace app\common\base;
use Yii;
use yii\web\Controller;
use yii\web\Response;
use app\models\User;
use yii\web\UploadedFile;
use yii\filters\Cors;
use yii\helpers\ArrayHelper;
class BaseController extends Controller
{
public function behaviors()
{
return ArrayHelper::merge([
[
'class' => Cors::className(),
],
], parent::behaviors());
}
/**
* response json to customer
*
* @param array $data
* @param integer $code
* @param string $message
* @return void
*/
public function respJson($data = [], int $code = 200, $message = 'success')
{
$response = Yii::$app->response;
$response->format = Response::FORMAT_JSON;
$response->data = [
'code' => $code,
'message' => $message,
'data' => $data,
'timestamp' => time()
];
$response->send();
}
/**
* response json to customer with pagination
*
* @param array $data
* @param object $pagination
* @param integer $code
* @param string $message
* @return void
*/
public function respPageJson($data = [], $pagination = null, int $code = 200, $message = 'success')
{
$response = Yii::$app->response;
$response->format = Response::FORMAT_JSON;
$response->data = [
'code' => $code,
'message' => $message,
'data' => $data,
'pagination' => $pagination,
'timestamp' => time()
];
$response->send();
}
/**
* get access-token from header
*
* @return void
*/
public function getAccessToken()
{
$headers = Yii::$app->request->headers;
return $headers->has('x-token') ? $headers->get('x-token') : null;
}
/**
* common upload picture
*
* @param string $attributeName
* @param [type] $saveName
* @return void
*/
public function commonUpload()
{
$model = new UploadForm();
if (Yii::$app->request->isPost) {
$model->mFile = UploadedFile::getInstanceByName('file');
return $model->upload();
}
}
}
<?php
namespace app\controllers;
use Yii;
use yii\filters\AccessControl;
use yii\web\Response;
use yii\filters\VerbFilter;
use app\common\base\BaseController;
use yii\base\Exception;
use yii\base\UserException;
use yii\helpers\ArrayHelper;
class SiteController extends BaseController
{
/**
* {@inheritdoc}
*/
public function behaviors()
{
return ArrayHelper::merge([
'access' => [
'class' => AccessControl::className(),
'only' => ['logout'],
'rules' => [
[
'actions' => ['logout'],
'allow' => true,
'roles' => ['@'],
],
],
],
'verbs' => [
'class' => VerbFilter::className(),
'actions' => [
'logout' => ['POST'],
],
],
], parent::behaviors());
}
/**
* {@inheritdoc}
*/
public function actions()
{
return [
'captcha' => [
'class' => 'yii\captcha\CaptchaAction',
'fixedVerifyCode' => YII_ENV_TEST ? 'testme' : null,
],
];
}
public function actionError()
{
$exception = Yii::$app->getErrorHandler()->exception;
if ($exception === null) {
$exception = new NotFoundHttpException(Yii::t('yii', 'Page not found.'));
}
$code = 200;
if ($exception instanceof HttpException) {
$code = $exception->statusCode;
} else {
$code = $exception->getCode();
}
$exceptionName = Yii::t('yii', 'Error');
if ($exception instanceof Exception) {
$exceptionName = $exception->getName();
}
$exceptionMessage = Yii::t('yii', 'An internal server error occurred.');
if ($exception instanceof UserException) {
$exceptionMessage = $exception->getMessage();
}
$this->respJson(null, $code, $exceptionName . ':' . $exceptionMessage);
}
/** Upload file */
public function actionUpload() {
$saveResult = $this->commonUpload();
if ($saveResult) {
$this->respJson(['url' => $saveResult]);
} else {
$this->respJson(null, 400, 'upload failed, please try agin later.');
}
}
}
- 完成上面的步骤以后已经可以进行基础的编辑以及插入图片了，如果需要扩展功能，如图片的缩放，请继续往下看
npm安装quill-image-drop-module quill-image-resize-module
npm install --save quill-image-drop-module quill-image-resize-module
配置webpack插件
- 在webpack.dev.conf.js加入
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
}),
- 在webpack.prod.conf.js也加入
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
}),
vue-editor绑定设置
editorSettings: {
modules: {
imageDrop: true,
imageResize: {}
}
},
到此集成结束上一张效果图:)
