Desarrollo del editor (1): trabajo de preparación, Baidu ueditor se trasladó al proyecto

editor de texto enriquecido de ueditor

Editor de texto enriquecido de Ueditor El editor web de texto enriquecido WYSIWYG desarrollado por el departamento de I + D de interfaz web de Baidu es ligero, personalizable y se centra en la experiencia del usuario.

Descarga Baidu ueditor

Introducción detallada

Repositorio oficial de git

Después de leer la introducción, vaya al almacén para clonar el código. Inserte la descripción de la imagen aquí

Si grunt no está instalado, puede usar npx grunt default en la terminal

En este momento, habrá un directorio dist en el directorio raíz, ingrese dist para descomprimir este archivo

Inserte la descripción de la imagen aquí

Integrado en el proyecto vue

Descomprima el proyecto descargado y colóquelo bajo el público del proyecto vue (este archivo es el archivo en el dist anterior, simplemente cambie el nombre y colóquelo)

Complemento de descarga de terminal

npm i vue-ueditor-wrap -S

Cree un nuevo componente ueditor.vue en componentes en src

<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>

Entonces simplemente introdúzcalo donde lo necesite

Inserte la descripción de la imagen aquí

Peladura

El estilo predeterminado es un poco antiguo y no se ajusta a la estética moderna.

Busque el archivo de estilo de tema /themes/default/css/ueditor.css

Resulta que el valor predeterminado es una imagen de sprite para representar los íconos en la barra de herramientas, pero este color de estilo es demasiado antiguo, puedes cambiarlo tú mismo.

Cada botón tiene un CSS correspondiente para representar la imagen de fondo.