编辑器开发（一）：准备工作，百度ueditor移入项目当中

ueditor富文本编辑器

Ueditor 富文本编辑器由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点。

下载百度ueditor

详细介绍

官方git仓库

看完介绍去仓库克隆下代码在这里插入图片描述

这里如果没有安装 grunt 可以在终端使用 npx grunt default

这时根目录下会出现个dist目录进入dist把这个文件解压

在这里插入图片描述

集成进vue 项目

将下载好的项目解压放在 vue项目的public下面（该文件就是上面dist里面的那个文件自己改名字放入就行）

终端下载插件

npm i vue-ueditor-wrap -S

新建个 ueditor.vue 组件在src下 components 下面

<template>
  <div class="editor-box">
    <vue-ueditor-wrap :config="myConfig" v-model="msg"></vue-ueditor-wrap>
  </div>
</template>

<script>

import 'ue/ueditor.config.js' // ue 可以自己设置成路径简写 没有设置就找到public
import 'ue/ueditor.all.js'
import 'ue/lang/zh-cn/zh-cn.js' 
import 'ue/ueditor.parse.min.js'

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module 引入

export default {
      
      
  props: {
      
      

  },
  components: {
      
      
    VueUeditorWrap, // 插入
  },
  data() {
      
      
    return {
      
      
      msg: '这是 vue-ueditor-wrap ！',
      myConfig: {
      
      
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: 'http://35.201.165.105:8000/controller.php',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: '/bseditor/',
        toolbars: [
          [
              'anchor', //锚点
              'undo', //撤销
              'redo', //重做
              'bold', //加粗
              'indent', //首行缩进
              'snapscreen', //截图
              'italic', //斜体
              'underline', //下划线
              'strikethrough', //删除线
              'subscript', //下标
              'fontborder', //字符边框
              'superscript', //上标
              'formatmatch', //格式刷
              'source', //源代码
              'blockquote', //引用
              'pasteplain', //纯文本粘贴模式
              'selectall', //全选
              'print', //打印
              'preview', //预览
              'horizontal', //分隔线
              'removeformat', //清除格式
              'time', //时间
              'date', //日期
              'unlink', //取消链接
              'insertrow', //前插入行
              'insertcol', //前插入列
              'mergeright', //右合并单元格
              'mergedown', //下合并单元格
              'deleterow', //删除行
              'deletecol', //删除列
              'splittorows', //拆分成行
              'splittocols', //拆分成列
              'splittocells', //完全拆分单元格
              'deletecaption', //删除表格标题
              'inserttitle', //插入标题
              'mergecells', //合并多个单元格
              'deletetable', //删除表格
              'cleardoc', //清空文档
              'insertparagraphbeforetable', //"表格前插入行"
              'insertcode', //代码语言
              'fontfamily', //字体
              'fontsize', //字号
              'paragraph', //段落格式
              'simpleupload', //单图上传
              'insertimage', //多图上传
              'edittable', //表格属性
              'edittd', //单元格属性
              'link', //超链接
              'emotion', //表情
              'spechars', //特殊字符
              'searchreplace', //查询替换
              'map', //Baidu地图
              'gmap', //Google地图
              'insertvideo', //视频
              'help', //帮助
              'justifyleft', //居左对齐
              'justifyright', //居右对齐
              'justifycenter', //居中对齐
              'justifyjustify', //两端对齐
              'forecolor', //字体颜色
              'backcolor', //背景色
              'insertorderedlist', //有序列表
              'insertunorderedlist', //无序列表
              'fullscreen', //全屏
              'directionalityltr', //从左向右输入
              'directionalityrtl', //从右向左输入
              'rowspacingtop', //段前距
              'rowspacingbottom', //段后距
              'pagebreak', //分页
              'insertframe', //插入Iframe
              'imagenone', //默认
              'imageleft', //左浮动
              'imageright', //右浮动
              'attachment', //附件
              'imagecenter', //居中
              'wordimage', //图片转存
              'lineheight', //行间距
              'edittip ', //编辑提示
              'customstyle', //自定义标题
              'autotypeset', //自动排版
              'webapp', //百度应用
              'touppercase', //字母大写
              'tolowercase', //字母小写
              'background', //背景
              'template', //模板
              'scrawl', //涂鸦
              'music', //音乐
              'inserttable', //插入表格
              'drafts', // 从草稿箱加载
              'charts', // 图表
          ]
        ]
      }
    };
  },
  computed: {
      
      

  },
  watch: {
      
      

  },
  created() {
      
      

  },
  mounted() {
      
      

  },
  methods: {
      
      

  },
};
</script>

<style scoped>
.editor-box {
      
      
  width: 100%;
}
</style>

然后在需要的地方引入就可以了

在这里插入图片描述

换肤

默认的样式有点老旧不符合现代审美

找到主题样式文件 /themes/default/css/ueditor.css

原来默认是一张精灵图来渲染工具栏上的图标但是这个样式颜色太老旧了可以自己去换

每一个按钮都有对应的css 进行背景图的渲染就行

编辑器开发（一）：准备工作，百度ueditor移入项目当中

ueditor富文本编辑器

下载百度ueditor

集成进vue 项目

换肤

猜你喜欢