收集不同富文本编辑器的使用（vue3版本）

news2025/4/6 3:56:44

文章目录

  • 一、ueditor（百度富文本编辑器）
    • 安装
    • 使用并二次封装组件
  • 二、KindEditor
    • 下载文件
    • 新建组件及使用

一、ueditor（百度富文本编辑器）

参考 ueditor 和 vue-ueditor-wrap
这里直接使用 封装好的vue组件 vue-ueditor-wrap vue3版本

安装

npm i vue-ueditor-wrap@3.x -S
or
yarn add vue-ueditor-wrap@3.x

使用并二次封装组件

  • main.ts
import VueUeditorWrap from 'vue-ueditor-wrap';
import App from '@/App/index.vue';
const app = createApp(App).use(VueUeditorWrap)
  • ueditor/index.vue
<template>
  <vue-ueditor-wrap
    v-model="content"
    :config="VueUeditorWrapConfig"
    :editor-id="editorId"
  ></vue-ueditor-wrap>
</template>
<script>
import { default as VueUeditorWrapConfig } from "./ueditor.js";
import { RandomNumber } from '@/utils'
export default {
  props: {
    value: [String],
    property: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  model: {
    prop: "value", // 指定 v-model 要绑定的参数叫什么名字，来自于 props 中定义的参数
    event: "change", // 指定要触发的事件名字，将被用于 $emit
  },
  data() {
    return {
      show: false,
      VueUeditorWrapConfig,
      isPosting: false,
      edit_show: true,
      index: 0,
      editorId: 'editor' + RandomNumber()
    };
  },
  computed: {
    content: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("change", val);
      },
    },
  },
};
</script>
<style lang="less" scoped>
/* 弹框输入框长度 */
.lengthWidth {
  width: 80%;
}

.editor_if {
  width: 100%;
  height: 400px;
}

.edui1 {
  z-index: 90 !important;
}
</style>
  • ueditor/ueditor.js
// let env = process.env.NODE_ENV || ''
let ueditorPath = ''
// if (env === 'development') {
//   ueditorPath = '/static/UEditor/'
// } else if (env === 'production') {
//   ueditorPath = '/static/UEditor/'
// } else {
//   ueditorPath = '/static/UEditor/'
// }
ueditorPath = '/ueditor/'
export default {
  UEDITOR_HOME_URL: ueditorPath,
  maximumWords: 1000 * 100,
  // toolbars: [
  //   [
  //     'source', '|', 'undo', 'redo', '|',
  //     'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
  //     'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
  //     'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
  //     'directionalityltr', 'directionalityrtl', 'indent', '|',
  //     'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
  //     'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
  //     'horizontal', 'date', 'time',
  //     'inserttable', 'simpleupload', 'preview',
  //   ]
  // ],
  toolbars: [
    [
      'source', '|', 'undo', 'redo', '|',
      'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
      'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
      'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
      'directionalityltr', 'directionalityrtl', 'indent', '|',
      'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
      'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
      'horizontal'
    ]
  ],
  enableAutoSave: false,
  elementPathEnabled: false,
  disabledTableInTable: false,
  serverUrl: '' // 暂无接口 APP_CONFIG.baseURL + '/file/upload'
}

使用上述定义组件即可显示下图效果
在这里插入图片描述

二、KindEditor

下载文件

kindeditor

放在本地静态目录

新建组件及使用

在组件文件夹内新建以下文件夹及文件

  • kind-editor/index.vue
<template>
  <div class="kindeditor">
    <textarea :id="id" name="content" v-model="state.outContent"></textarea>
  </div>
</template>
  
<script lang="ts">

import { defineComponent, onMounted, reactive, watch } from "vue"
import '@public/kind-editor/themes/default/default.css'
import '@public/kind-editor/kindeditor-all.js'
import '@public/kind-editor/lang/zh-CN.js'
import '@public/kind-editor/lang/en.js'
export default defineComponent({
  name: 'kind-editor',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      required: true
    },
    width: {
      type: String
    },
    height: {
      type: String
    },
    minWidth: {
      type: Number,
      default: 650
    },
    minHeight: {
      type: Number,
      default: 100
    },
    items: {
      type: Array,
      default: function () {
        return [
          'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'code', 'cut', 'copy', 'paste',
          'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
          'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
          'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
          'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
          'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
          'media', 'insertfile', 'table', 'hr', 'pagebreak',
          'anchor', 'link', 'unlink',
        ]
      }
    },
    noDisableItems: {
      type: Array,
      default: function () {
        return ['source', 'fullscreen']
      }
    },
    filterMode: {
      type: Boolean,
      default: true
    },
    htmlTags: {
      type: Object,
      default: function () {
        return {
          font: ['color', 'size', 'face', '.background-color'],
          span: ['style'],
          div: ['class', 'align', 'style'],
          table: ['class', 'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'style'],
          'td,th': ['class', 'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor', 'style'],
          a: ['class', 'href', 'target', 'name', 'style'],
          embed: ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality',
            'style', 'align', 'allowscriptaccess', '/'],
          img: ['src', 'width', 'height', 'border', 'alt', 'title', 'align', 'style', '/'],
          hr: ['class', '/'],
          br: ['/'],
          'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6': ['align', 'style'],
          'tbody,tr,strong,b,sub,sup,em,i,u,strike': []
        }
      }
    },
    wellFormatMode: {
      type: Boolean,
      default: true
    },
    resizeType: {
      type: Number,
      default: 2
    },
    themeType: {
      type: String,
      default: 'default'
    },
    langType: {
      type: String,
      default: 'en'
    },
    designMode: {
      type: Boolean,
      default: true
    },
    fullscreenMode: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String
    },
    themesPath: {
      type: String
    },
    pluginsPath: {
      type: String,
      default: ''
    },
    langPath: {
      type: String
    },
    minChangeSize: {
      type: Number,
      default: 5
    },
    loadStyleMode: {
      type: Boolean,
      default: true
    },
    urlType: {
      type: String,
      default: ''
    },
    newlineTag: {
      type: String,
      default: 'p'
    },
    pasteType: {
      type: Number,
      default: 2
    },
    dialogAlignType: {
      type: String,
      default: 'page'
    },
    shadowMode: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: Number,
      default: 811213
    },
    useContextmenu: {
      type: Boolean,
      default: true
    },
    syncType: {
      type: String,
      default: 'form'
    },
    indentChar: {
      type: String,
      default: '\t'
    },
    cssPath: {
      type: [String, Array]
    },
    cssData: {
      type: String
    },
    bodyClass: {
      type: String,
      default: 'ke-content'
    },
    colorTable: {
      type: Array
    },
    afterCreate: {
      type: Function
    },
    afterChange: {
      type: Function
    },
    afterTab: {
      type: Function
    },
    afterFocus: {
      type: Function
    },
    afterBlur: {
      type: Function
    },
    afterUpload: {
      type: Function
    },
    uploadJson: {
      type: String
    },
    fileManagerJson: {
      type: Function
    },
    allowPreviewEmoticons: {
      type: Boolean,
      default: true
    },
    allowImageUpload: {
      type: Boolean,
      default: true
    },
    allowFlashUpload: {
      type: Boolean,
      default: true
    },
    allowMediaUpload: {
      type: Boolean,
      default: true
    },
    allowFileUpload: {
      type: Boolean,
      default: true
    },
    allowFileManager: {
      type: Boolean,
      default: false
    },
    fontSizeTable: {
      type: Array,
      default: function () {
        return ['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
      }
    },
    imageTabIndex: {
      type: Number,
      default: 0
    },
    formatUploadUrl: {
      type: Boolean,
      default: true
    },
    fullscreenShortcut: {
      type: Boolean,
      default: false
    },
    extraFileUploadParams: {
      type: Array,
      default: function () {
        return []
      }
    },
    filePostName: {
      type: String,
      default: 'imgFile'
    },
    fillDescAfterUploadImage: {
      type: Boolean,
      default: false
    },
    afterSelectFile: {
      type: Function
    },
    pagebreakHtml: {
      type: String,
      default: '<hr style=”page-break-after: always;” class=”ke-pagebreak” />'
    },
    allowImageRemote: {
      type: Boolean,
      default: true
    },
    autoHeightMode: {
      type: Boolean,
      default: false
    },
    fixToolBar: {
      type: Boolean,
      default: false
    },
    tabIndex: {
      type: Number
    }
  },
  setup(props, { emit }) {
    const state = reactive({
      editor: {} as any,
      outContent: props.modelValue
    })
    console.log('state_state', state)
    watch(() => props.modelValue, (val: any) => {
      state.editor && val !== state.outContent && state.editor.html(val)
    })
    watch(() => state.outContent, (val: any) => {
      emit('update:modelValue', val)
    })
    onMounted(async() => {
      state.editor = (window as any).KindEditor.create('#' + props.id, {
        width: props.width,
        height: props.height,
        minWidth: props.minWidth,
        minHeight: props.minHeight,
        items: props.items,
        noDisableItems: props.noDisableItems,
        filterMode: props.filterMode,
        htmlTags: props.htmlTags,
        wellFormatMode: props.wellFormatMode,
        resizeType: props.resizeType,
        themeType: props.themeType,
        langType: props.langType,
        designMode: props.designMode,
        fullscreenMode: props.fullscreenMode,
        basePath: props.basePath,
        themesPath: props.cssPath,
        pluginsPath: props.pluginsPath,
        langPath: props.langPath,
        minChangeSize: props.minChangeSize,
        loadStyleMode: props.loadStyleMode,
        urlType: props.urlType,
        newlineTag: props.newlineTag,
        pasteType: props.pasteType,
        dialogAlignType: props.dialogAlignType,
        shadowMode: props.shadowMode,
        zIndex: props.zIndex,
        useContextmenu: props.useContextmenu,
        syncType: props.syncType,
        indentChar: props.indentChar,
        cssPath: props.cssPath,
        cssData: props.cssData,
        bodyClass: props.bodyClass,
        colorTable: props.colorTable,
        afterCreate: props.afterCreate,
        afterChange: function () {
          props.afterChange
          state.outContent = this.html()
        },
        afterTab: props.afterTab,
        afterFocus: props.afterFocus,
        afterBlur: props.afterBlur,
        afterUpload: props.afterUpload,
        uploadJson: props.uploadJson,
        fileManagerJson: props.fileManagerJson,
        allowPreviewEmoticons: props.allowPreviewEmoticons,
        allowImageUpload: props.allowImageUpload,
        allowFlashUpload: props.allowFlashUpload,
        allowMediaUpload: props.allowMediaUpload,
        allowFileUpload: props.allowFileUpload,
        allowFileManager: props.allowFileManager,
        fontSizeTable: props.fontSizeTable,
        imageTabIndex: props.imageTabIndex,
        formatUploadUrl: props.formatUploadUrl,
        fullscreenShortcut: props.fullscreenShortcut,
        extraFileUploadParams: props.extraFileUploadParams,
        filePostName: props.filePostName,
        fillDescAfterUploadImage: props.fillDescAfterUploadImage,
        afterSelectFile: props.afterSelectFile,
        pagebreakHtml: props.pagebreakHtml,
        allowImageRemote: props.allowImageRemote,
        autoHeightMode: props.autoHeightMode,
        fixToolBar: props.fixToolBar,
        tabIndex: props.tabIndex
      })
    })
    return {
      state

    }
  }

})
</script>
  
  <style>
</style>
  • 使用
<KindEditor id="KindEditor012" />

import KindEditor from '@/component/kind-editor/index.vue'
export default defineComponent({
  components: {
    KindEditor
  },
  setup() {
  	return {
  		
  	}
  }
  • 效果
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1195337.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Android】画面卡顿优化列表流畅度三之RecyclerView刷新机制notifyItemRangeInserted

【Android】画面卡顿优化列表流畅度三之RecyclerView刷新机制notifyItemRangeInserted

经过长达一个多星期的反复渲染耗时记录&#xff0c;大致上有以下几个方面的地方可以优化&#xff1a; 列表组件RecyclerView刷新机制由notifyDataSetChanged()优化为notifyItemRangeInserted&#xff08;&#xff09;&#xff0c;后期有必要也会使用notifyItemRangeRemoved、n…
阅读更多...
node插件MongoDB（四）—— 库mongoose 的条件控制（三）

node插件MongoDB（四）—— 库mongoose 的条件控制（三）

文章目录 前言一、运算符二、逻辑运算1. $or 逻辑或2. $and 逻辑与 三、正则匹配 前言 在mongodb 不能使用 > < > < ! 等运算符&#xff0c;需要使用替代符号。 一、运算符 > 使用 $gt< 使用 $lt> 使用 $gte< 使用 $lte! 使用 $ne 例子&#xff1a;获…
阅读更多...
高性能网络编程 - 解读3种线程模型

高性能网络编程 - 解读3种线程模型

文章目录 Pre线程模型1&#xff1a;传统阻塞 I/O 服务模型线程模型2&#xff1a;Reactor 模式Reactor 模式的基本设计思想Reactor 模式中的关键组成3种典型实现单 Reactor 单线程单 Reactor 多线程主从 Reactor 多线程 小结 线程模型3&#xff1a;Proactor 模型 Pre 高性能网络…
阅读更多...
git命令之遭遇 ignore罕见问题解决

git命令之遭遇 ignore罕见问题解决

我先来讲讲背景 我的一些文件在ignore了&#xff0c;不会被提交到远程仓库&#xff0c;这时候我的远程仓库中是没有这几个文件的&#xff0c;这时候我如果使用 git reset 的话这时候除了那几个 ignore 的文件以外都被更新的&#xff0c;但是如果我不需要这几个被 ignore 的文件…
阅读更多...
【操作系统】2011年408真题第 31 题

【操作系统】2011年408真题第 31 题

文章目录 题目描述解析单缓冲区双缓冲区 原题 & 解析 题目描述 31.某文件占10个磁盘块&#xff0c;现要把该文件磁盘块逐个读入主存缓冲区&#xff0c;并送用户区进行分析&#xff0c;假设一个缓冲区与一个磁盘块大小相同&#xff0c;把一个磁盘块读入缓冲区的时间为100μ…
阅读更多...
MySQL | 数据库的表的增删改查【进阶】

MySQL | 数据库的表的增删改查【进阶】

MySQL | 数据库的表的增删改查【进阶】 文章目录 MySQL | 数据库的表的增删改查【进阶】系列文章目录本节目标&#xff1a;数据库约束约束类型NULL约束UNIQUE&#xff1a;唯一约束DEFAULT&#xff1a;默认值PRIMARY KEY&#xff1a;主键FOREIGN KEY&#xff1a;外键CHECK 表的设…
阅读更多...
Wincc flexible SMART v4 报警蜂鸣器的基本使用方法示例

Wincc flexible SMART v4 报警蜂鸣器的基本使用方法示例

Wincc flexible SMART v4 报警蜂鸣器的基本使用方法示例 WinCC flexible SMART V4 SP1 软件针对SMART LINE V4 面板新增了触发蜂鸣器报警功能，但要注意该功能仅支持固件版本为 4.0.1.0 及以上的设备。 可通过配置以下两个系统函数来触发蜂鸣器： 举例说明： 组态离散量报警，在…
阅读更多...
Leetcode刷题详解——全排列 II

Leetcode刷题详解——全排列 II

1. 题目链接&#xff1a;47. 全排列 II 2. 题目描述&#xff1a; 给定一个可包含重复数字的序列 nums &#xff0c;按任意顺序 返回所有不重复的全排列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,2] 输出&#xff1a; [[1,1,2],[1,2,1],[2,1,1]]示例 2&#xff1a; 输…
阅读更多...
Linux——进度条小程序|行缓冲区概念|使用 git 命令行

Linux——进度条小程序|行缓冲区概念|使用 git 命令行

目录 1./r 和 /n 2.行缓冲区概念 3.使用 git 命令行 安装git 克隆到本地仓库 添加文件到仓库 提交到本地仓库 提交到远端仓库 1./r 和 /n 对于 /n 想必都不陌生&#xff0c;是换行的意思 而 /r 就是回车的意思 &#xff0c;回到一行的开始 在C/C中 \n通常都代表 回车…
阅读更多...
Adobe ME下载、Media Encoder下载

Adobe ME下载、Media Encoder下载

Media Encoder 2021 是一款可以帮助Adobepremiere pro和Adobe After Effects的用户使用集成视频编码器进行创作的视频和音频编码软件。Media Encoder 2021 mac新版本中针对上一个版本进行了多方面的改进与优化&#xff0c;提升了软件的性能与支持文件格式提升&#xff0c;有需要…
阅读更多...
物业管理服务预约小程序的效果如何

物业管理服务预约小程序的效果如何

物业所涵盖的场景比较多&#xff0c;如小区住宅、办公楼、医院、度假区等&#xff0c;而所涵盖的业务也非常广&#xff0c;而在实际管理中&#xff0c;无论对外还是对内也存在一定难题&#xff1a; 1、品牌展示难、内部管理难 物业需求度比较广&#xff0c;设置跨区域也可以&…
阅读更多...
数据库数据恢复—MSSQL报错“附加数据库错误823”如何恢复数据？

数据库数据恢复—MSSQL报错“附加数据库错误823”如何恢复数据？

数据库故障&分析&#xff1a; MSSQL Server数据库比较常见的报错是“附加数据库错误823”。如果数据库有备份&#xff0c;只需要还原备份即可&#xff1b;如果无备份或者备份不可用&#xff0c;则需要使用专业的数据恢复手段去恢复数据。 MSSQL Server数据库出现“823”的报…
阅读更多...
Java语言基础（下）

Java语言基础（下）

toString() 、String.valueof()、(String)&#xff1f; toString()&#xff1a;Object 类的方法&#xff0c;可以将一个对象转换为字符串类型String.valueOf()&#xff1a;可以将一个对象或基本数据类型转换为字符串类型 如果参数是对象&#xff0c;则调用 toString() 方法&am…
阅读更多...
sql注入:延时注入python万能脚本

sql注入:延时注入python万能脚本

sql注入:延时注入python脚本 import requests import binascii def judgment_delay(complete_url):headers{"User-Agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"}try:requ…
阅读更多...
Zynq-Linux移植学习笔记之65- 国产ZYNQ在linux下usleep时间精度不准问题解决

Zynq-Linux移植学习笔记之65- 国产ZYNQ在linux下usleep时间精度不准问题解决

1、背景介绍 采用复旦微的ZYNQ&#xff0c;跑linux操作系统&#xff0c;在应用程序中使用usleep进行延时时&#xff0c;发现存在10ms以下采用usleep试验都为10ms的情况 2、解决办法 使能设备树中的PS TTC设备&#xff0c;默认不是打开的 timere0024000 {compatible "s…
阅读更多...
rangenet++运行 bonnetal训练 点云标签 记录

rangenet++运行 bonnetal训练 点云标签 记录

准备原始点云数据&#xff0c;为bin格式 安装point_labeler工具&#xff0c;根据readme步骤安装&#xff0c;并设定好格式进行标签 修改bonnetal的配准 安装semantic-kitti&#xff0c;查看点云标签content&#xff0c;并修改bonnetal上的设置 ./content.py --dataset ~/da…
阅读更多...
AI 编程工具带来了什么

AI 编程工具带来了什么

注册 地址为 https://web.devchat.ai/signup/ AI 编程工具带来了什么 深度学习框架&#xff1a; 用于实现神经网络和深度学习模型的框架&#xff0c;如TensorFlow、PyTorch、Keras等。这些工具提供了高级的API和工具&#xff0c;使得实现和训练神经网络变得相对容易。 自然语…
阅读更多...
基础代码介绍

基础代码介绍

#include<pic.h> //包含单片机内部资源字义 __CONFIG(0xFF32); //4M __CONFIG(0XFF32)void main() {TRISD0;//D口输出PORTD0b00000001;//第一个LED灯点亮&#xff0c;高电平1while(1);// } /* void main() { TRISD0; PORTD0x01 while(1); }*/ 点亮一颗LEDD灯&#xff1a…
阅读更多...
OpenText Exceed TurboX (ETX) —— 对图形密集型应用程序进行高性能远程访问

OpenText Exceed TurboX (ETX) —— 对图形密集型应用程序进行高性能远程访问

OpenText Exceed TurboX (ETX) —— 对图形密集型应用程序进行高性能远程访问 OpenText Exceed TurboX使团队(无论位于何处)能够对图形密集型应用程序进行高性能远程访问&#xff0c;提高生产力并减少 IT 支出&#xff0c;以确保快速投资回报。 亮点&#xff1a; 降低IT支出…
阅读更多...
【python高级】asyncio 并发编程

【python高级】asyncio 并发编程

【大家好&#xff0c;我是爱干饭的猿&#xff0c;本文重点介绍python高级篇的事件循环&#xff0c;task取消和协程嵌套、call_soon、call_later、call_at、 call_soon_threadsafe、asyncio模拟http请求、asyncio同步和通信、aiohttp实现高并发实践。 后续会继续分享其他重要知…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023