网站首页lua/js

vue3项目引入ueditor-plus富文本编辑器

发布时间：2024-11-26 23:34:33编辑：阅读（152）

1. 下载ueditor-plus项目到本地

项目地址:   https://gitee.com/modstart-lib/ueditor-plus

将其中的dist目录, 复制到vue项目的public目录下.并重命名为UEditorPlus.




2. 在命令行下安装vue-ueditor-wrap插件

npm i vue-ueditor-wrap@3.x -S




3. 在main.js里引入vue-ueditor-wrap

import {createApp} from 'vue'
import App from './App.vue'
import VueUeditorWrap from 'vue-ueditor-wrap';
 
createApp(App).use(VueUeditorWrap).mount('#app')




4. 在页面里引入vue-ueditor-wrap组件, 具体的配置项可查阅ueditor-plus文档

https://open-doc.modstart.com/ueditor-plus/manual.html




<template>
    <div>
        <vue-ueditor-wrap v-model="content"
                          :config="editorConfig"
                          :editorDependencies="['ueditor.config.js','ueditor.all.js']" />
    </div>
</template>
 
<script setup>
    import {ref} from 'vue'; 
    const content = ref('<p>Hello UEditorPlus</p>');
    const editorConfig=ref({
      // 编辑器不自动被内容撑高
      autoHeightEnabled: false,
      // 不显示元素路径
      elementPathEnabled: false,      
      // 初始容器高度
      initialFrameHeight: 500,
      // 最大字数限制
      maximumWords: 10000,
      // 编辑器z-index防遮挡, 特别是在elementUi的弹窗里显示时,这个值必须够大.
      zIndex: 2060,
      // 初始容器宽度
      initialFrameWidth: '100%',      
      // 是否从服务器加载配置
      loadConfigFromServer: true,
      // 服务器加载配置的路径
      serverUrl: 'https://website/index/ueditor',

      UEDITOR_HOME_URL: '/UEditorPlus/',
      UEDITOR_CORS_URL: '/UEditorPlus/',
      // 工具栏配置
      toolbars: [
      [
          "fullscreen",   // 全屏
          "source",       // 源代码
          "|",
          "undo",         // 撤销
          "redo",         // 重做
          "|",
          "bold",         // 加粗
          "italic",       // 斜体
          "underline",    // 下划线
          "fontborder",   // 字符边框
          "strikethrough",// 删除线
          "removeformat", // 清除格式
          "formatmatch",  // 格式刷
          "pasteplain",   // 纯文本粘贴模式
          "|",
          "forecolor",    // 字体颜色
          "backcolor",    // 背景色          
          "|",          
          "lineheight",          // 行间距
          "|",
          "customstyle",         // 自定义标题
          "paragraph",           // 段落格式
          "fontfamily",          // 字体
          "fontsize",            // 字号
          "|",          
          "indent",              // 首行缩进
          "|",
          "justifyleft",         // 居左对齐
          "justifycenter",       // 居中对齐
          "justifyright",
          "justifyjustify",      // 两端对齐
          "|",          
          "link",                // 超链接
          "unlink",              // 取消链接
          "anchor",              // 锚点
          "|",
          "imagenone",           // 图片默认
          "imageleft",           // 图片左浮动
          "imageright",          // 图片右浮动
          "imagecenter",         // 图片居中
          "|",
          "simpleupload",        // 单图上传
          "insertimage",         // 多图上传
        ]
      ],
      // 服务器请求携带的头信息
      serverHeaders: {
        'Authorization': `Bearer tokens`,
      },      
});
</script>




5. 处理服务器配置

serverUrl: 'https://website/index/ueditor'

这里有个坑, 直接给serverUrl加的这个http远程地址的配置, 会返回报错, 无法使用http地址.

此时只需打开UEditorPlus下面的ueditor.all.js文件,

搜索到:   isJsonp=utils.isCrossDomainUrl(configUrl);

更改为:    isJsonp=false;

保存上传即可.




然后将服务器上的serverUrl接口的返回内容处理为下面的json段:

{
            "imageActionName": "imageUpload",
            "imageFieldName": "file",
            "imageMaxSize": 10485760,
            "imageAllowFiles": [
                    ".jpg",
                    ".png",
                    ".jpeg"
                ],
            "imageCompressEnable": true,
            "imageCompressBorder": 5000,
            "imageInsertAlign": "none",
            "imageUrlPrefix": "",            
            "imageManagerActionName": "listImage",
            "imageManagerListSize": 20,
            "imageManagerUrlPrefix": "",
            "imageManagerInsertAlign": "none",
            "imageManagerAllowFiles": [
                    ".jpg",
                    ".png",
                    ".jpeg"
            ]
}

6. 处理图片上传, 可以和上边返回配置信息的接口合并, 代码如下所示:




public function ueditor(){
        $action = $this->input('action');
        switch($action){
            case 'config':
                $result = <<<EOF
        {
            "imageActionName": "image",
            "imageFieldName": "file",
            "imageMaxSize": 10485760,
            "imageAllowFiles": [
                    ".jpg",
                    ".png",
                    ".jpeg"
                ],
            "imageCompressEnable": true,
            "imageCompressBorder": 5000,
            "imageInsertAlign": "none",
            "imageUrlPrefix": "",            
            "imageManagerActionName": "listImage",
            "imageManagerListSize": 20,
            "imageManagerUrlPrefix": "",
            "imageManagerInsertAlign": "none",
            "imageManagerAllowFiles": [
                    ".jpg",
                    ".png",
                    ".jpeg"
            ]
        }
EOF;
                break;
            case 'imageUpload':
                if ($file   = $this->getFiles('file')){
                    $res['state'] = 'SUCCESS';
                    $res['url']   = cdn::upload($file);
                    $result = json_encode($res);
                }
                break;
        }
        echo $result;
    }




完结.