react使用CKEditor5，两种使用方式（在线构建器和从源代码构建）。附富文本国际化

最新推荐文章于 2024-06-10 10:48:12 发布
最新推荐文章于 2024-06-10 10:48:12 发布
阅读量1.6k 收藏 12
点赞数 14
分类专栏： 富文本 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47592804/article/details/138159445
版权

react使用CKEditor5，两种使用方式（在线构建器和从源代码构建）。附国际化


在这里插入图片描述

介绍

介绍：功能丰富，是最好用的富文本编辑器。
特点：CKEditor5是基于Nodejs的编译器，很好地支持了React等主流web框架，它把菜单的每一项功能都进行了拆分，通过插件的方式来引入，最后配置好。
两种使用方式：

  1. CKEditor5在线构建器构建。构建好的版本使用，直接使用，无需配置；但是功能简单，不可配置
  2. 从源代码构建CKEditor5。CKEditor5 源码自行打包构建，可以配置丰富的功能，配置折腾！

ps：以下详解采用 从源代码构建CKEditor5 编辑器

一、CKEditor5在线构建器构建

说明：该部分内容即官方文档中的 快速开始。（可从文档直接查看 快速开始）
优点：CKEditor5在线构建器 快速上手，直接使用，无需配置；
缺点：无需配置，不能配置工具栏。
快速上手

  1. 安装CKEditor5
pnpm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
  1. 在React组件中使用CKEditor5组件
// App.jsx / App.tsx

import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor&nbsp;5 build in React</h2>
                <CKEditor
                    editor={ ClassicEditor }
                    data="<p>Hello from CKEditor&nbsp;5!</p>"
                    onReady={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event ) => {
                        console.log( event );
                    } }
                    onBlur={ ( event, editor ) => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ ( event, editor ) => {
                        console.log( 'Focus.', editor );
                    } }
                />
            </div>
        );
    }
}

export default App;

二、从源代码构建CKEditor5(使用)

说明：这里不能直接使用@ckeditor/ckeditor5-build-classic这个包了，因为这个包已经包含了很多插件，加入代码编辑器插件会与其冲突，所以只能用@ckeditor/ckeditor5-editor-classic。
优点：从源代码构建CKEditor5 可以单独配置工具栏，每项功能可以单独配置，功能丰富；
缺点-配置难受：①工具栏每项均需安装对应插件；②根据不同的项目脚手架，需要采取不同的环境配置。

1. 安装CKEditor5 依赖项

相对比较全的一份依赖名单如下：（注：如需配置其他功能再单独安装对应依赖即可）


pnpm i @ckeditor/ckeditor5-react @ckeditor/ckeditor5-editor-classic
// 安装插件，用于配置工具栏功能
@ckeditor/ckeditor5-alignment 
@ckeditor/ckeditor5-block-quote 
@ckeditor/ckeditor5-cloud-services 
@ckeditor/ckeditor5-code-block 
@ckeditor/ckeditor5-essentials 
@ckeditor/ckeditor5-export-pdf 
@ckeditor/ckeditor5-export-word 
@ckeditor/ckeditor5-find-and-replace 
@ckeditor/ckeditor5-font 
@ckeditor/ckeditor5-html-support 
@ckeditor/ckeditor5-heading 
@ckeditor/ckeditor5-highlight 
@ckeditor/ckeditor5-horizontal-line 
@ckeditor/ckeditor5-html-embed 
@ckeditor/ckeditor5-image 
@ckeditor/ckeditor5-indent 
@ckeditor/ckeditor5-link
@ckeditor/ckeditor5-list 
@ckeditor/ckeditor5-media-embed 
@ckeditor/ckeditor5-mention 
@ckeditor/ckeditor5-page-break 
@ckeditor/ckeditor5-paste-from-office 
@ckeditor/ckeditor5-remove-format 
@ckeditor/ckeditor5-show-blocks 
@ckeditor/ckeditor5-source-editing 
@ckeditor/ckeditor5-special-characters 
@ckeditor/ckeditor5-style 
@ckeditor/ckeditor5-typing
@ckeditor/ckeditor5-word-count 
@ckeditor/ckeditor5-upload

2. 环境配置（vite/webpack）

根据创建项目的方式选择其中对应的环境配置，以下介绍三种创建项目配置，本人均搭建demo使用成功

react+vite项目

使用 React 和 Vite 配置 CKEditor 5 很简单。通过导入ckeditor5并将其添加到插件列表来修改现有配置。
安装依赖：pnpm i @ckeditor/ckeditor5-theme-lark
配置vite.config.ts

// vite.config.js / vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

export default defineConfig( {
  plugins: [
    react(),
    ckeditor5( { theme: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) } )
  ],
} )

create-react-app项目

修改webpack配置，配置直接参考官方文档 Create React App

umi4项目（复杂）

安装依赖

pnpm i -D postcss-loader style-loader css-loader

修改.umirc.ts配置

// .umirc.ts  / config/config.ts
  chainWebpack(config) {
    const { styles } = require('@ckeditor/ckeditor5-dev-utils');
    const svgReg = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
    const cssReg = /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/;
    config.module.rule('cke5-svg').test(svgReg).type(
      // raw-loader
      'asset/source',
    );
    // svg exclude
    ['svg', 'svgr'].forEach((rule) => {
      config.module.rule(rule).exclude.add(svgReg);
    });
    // css rule
    config.module
      .rule('cke5-css')
      .test(cssReg)
      .use('style-loader')
      .loader(require.resolve('style-loader'))
      .end()
      .use('css-loader')
      .loader(require.resolve('css-loader'))
      .end()
      .use('postcss-loader')
      .loader(require.resolve('postcss-loader'))
      .options({
        postcssOptions: styles.getPostCssConfig({
          themeImporter: {
            themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
          },
          minify: true,
        }),
      });
    // css exclude
    config.module.rule('css').exclude.add(cssReg);
    // assets exclude
    config.module
      .rule('asset')
      .oneOf('fallback')
      .exclude.add(svgReg)
      .add(cssReg);
  },

3. 编辑器配置（组件）

Editor组件，编辑器配置（config：toolbar配置工具栏项，plugins使用对应toolbar项。可以增改尝试）
需另外使用其他细节的配置请查阅官方文档进行配置

import { CKEditor } from '@ckeditor/ckeditor5-react';
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
// NOTE: Use the editor from source (not a build)!
// 引入配置工具栏插件
import { Alignment } from '@ckeditor/ckeditor5-alignment';
import {
  Bold,
  Code,
  Italic,
  Strikethrough,
  Subscript,
  Superscript,
  Underline,
} from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { ExportPdf } from '@ckeditor/ckeditor5-export-pdf';
import { ExportWord } from '@ckeditor/ckeditor5-export-word';
import { FindAndReplace } from '@ckeditor/ckeditor5-find-and-replace';
import { Font } from '@ckeditor/ckeditor5-font';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Highlight } from '@ckeditor/ckeditor5-highlight';
import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';
import { HtmlEmbed } from '@ckeditor/ckeditor5-html-embed';
import { GeneralHtmlSupport } from '@ckeditor/ckeditor5-html-support';
import {
  AutoImage,
  Image,
  ImageCaption,
  ImageInsert,
  ImageResize,
  ImageStyle,
  ImageToolbar,
  ImageUpload,
  PictureEditing,
} from '@ckeditor/ckeditor5-image';
import { Indent, IndentBlock } from '@ckeditor/ckeditor5-indent';
import { AutoLink, Link, LinkImage } from '@ckeditor/ckeditor5-link';
import { List, ListProperties, TodoList } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Mention } from '@ckeditor/ckeditor5-mention';
import { PageBreak } from '@ckeditor/ckeditor5-page-break';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { RemoveFormat } from '@ckeditor/ckeditor5-remove-format';
import { ShowBlocks } from '@ckeditor/ckeditor5-show-blocks';
import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
import {
  SpecialCharacters,
  SpecialCharactersEssentials,
} from '@ckeditor/ckeditor5-special-characters';
import { Style } from '@ckeditor/ckeditor5-style';
import {
  Table,
  TableCaption,
  TableCellProperties,
  TableColumnResize,
  TableProperties,
  TableToolbar,
} from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload';
import { WordCount } from '@ckeditor/ckeditor5-word-count';

// 工具栏功能项配置
const editorConfig: any = {
  plugins: [
    SimpleUploadAdapter,
    BlockQuote,
    Bold,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    Indent,
    Italic,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    Table,
    TableToolbar,
    Alignment,
    AutoImage,
    AutoLink,
    CloudServices,
    Code,
    CodeBlock,
    Essentials,
    ExportPdf,
    ExportWord,
    FindAndReplace,
    Font,
    Highlight,
    HorizontalLine,
    HtmlEmbed,
    ImageInsert,
    ImageResize,
    ImageUpload,
    IndentBlock,
    GeneralHtmlSupport,
    LinkImage,
    ListProperties,
    TodoList,
    Mention,
    PageBreak,
    PasteFromOffice,
    PictureEditing,
    RemoveFormat,
    ShowBlocks,
    SourceEditing,
    SpecialCharacters,
    SpecialCharactersEssentials,
    Style,
    Strikethrough,
    Subscript,
    Superscript,
    TableCaption,
    TableCellProperties,
    TableColumnResize,
    TableProperties,
    TextTransformation,
    Underline,
    WordCount,
  ],
  toolbar: {
    items: [
      'undo',
      'redo',
      'heading',
      'fontSize',
      'fontColor',
      'fontBackgroundColor',
      'bold',
      'underline',
      'italic',
      {
        label: 'Formatting',
        icon: '',
        items: [
          'strikethrough',
          'subscript',
          'superscript',
          'code',
          'horizontalLine',
          '|',
          'removeFormat',
        ],
      },
      'alignment',
      'bulletedList',
      'numberedList',
      'outdent',
      'indent',
      'link',
      'insertImage',
      'insertTable',
      // '-', // break point
      {
        label: 'Others',
        icon: '',
        items: [
          'todoList',
          'specialCharacters',
          'pageBreak',
          {
            label: 'Insert',
            icon: '',
            items: ['highlight', 'blockQuote', 'mediaEmbed', 'codeBlock', 'htmlEmbed'],
          },
          'fontFamily',
          'exportPdf',
          'exportWord',
          'showBlocks',
          'findAndReplace',
          'selectAll',
          '|',
          'sourceEditing',
        ],
      },
    ],
    // shouldNotGroupWhenFull: true,
  },
  // language: 'zh-cn', // 需引入语言包，进行设置。
  htmlSupport: {
    allow: [
      {
        name: /^.*$/,
        styles: true,
        attributes: true,
        classes: true,
      },
    ],
  },
  heading: {
    options: [
      {
        model: 'paragraph',
        title: 'Paragraph',
        class: 'ck-heading_paragraph',
      },
      {
        model: 'heading1',
        view: 'h1',
        title: 'Heading 1',
        class: 'ck-heading_heading1',
      },
      {
        model: 'heading2',
        view: 'h2',
        title: 'Heading 2',
        class: 'ck-heading_heading2',
      },
      {
        model: 'heading3',
        view: 'h3',
        title: 'Heading 3',
        class: 'ck-heading_heading3',
      },
      {
        model: 'heading4',
        view: 'h4',
        title: 'Heading 4',
        class: 'ck-heading_heading4',
      },
      {
        model: 'heading5',
        view: 'h5',
        title: 'Heading 5',
        class: 'ck-heading_heading5',
      },
      {
        model: 'heading6',
        view: 'h6',
        title: 'Heading 6',
        class: 'ck-heading_heading6',
      },
    ],
  },
  exportPdf: {
    stylesheets: ['EDITOR_STYLES'],
    fileName: 'export-pdf-demo.pdf',
    converterOptions: {
      format: 'Tabloid',
      margin_top: '20mm',
      margin_bottom: '20mm',
      margin_right: '24mm',
      margin_left: '24mm',
      page_orientation: 'portrait',
    },
  },
  exportWord: {
    stylesheets: ['EDITOR_STYLES'],
    fileName: 'export-word-demo.docx',
    converterOptions: {
      format: 'B4',
      margin_top: '20mm',
      margin_bottom: '20mm',
      margin_right: '12mm',
      margin_left: '12mm',
      page_orientation: 'portrait',
    },
  },
  // fontFamily: {
  //   options: [
  //     'default',
  //     'Blackoak Std',
  //     '宋体,SimSun',
  //     '新宋体,NSimSun',
  //     '黑体,SimHei',
  //     '微软雅黑,Microsoft YaHei',
  //     '楷体_GB2312,KaiTi_GB2312',
  //     '隶书,LiSu',
  //     '幼园,YouYuan',
  //     '华文细黑,STXihei',
  //     '细明体,MingLiU',
  //     '新细明体,PMingLiU',
  //   ],
  // },
  fontSize: {
    options: [10, 12, 14, 'default', 18, 20, 22, 28],
    supportAllValues: true,
  },
  htmlEmbed: {
    showPreviews: true,
  },
  image: {
    styles: ['alignCenter', 'alignLeft', 'alignRight'],
    resizeOptions: [
      {
        name: 'resizeImage:original',
        label: 'Original',
        value: null,
      },
      {
        name: 'resizeImage:50',
        label: '50%',
        value: '50',
      },
      {
        name: 'resizeImage:75',
        label: '75%',
        value: '75',
      },
    ],
    toolbar: [
      'imageTextAlternative',
      'toggleImageCaption',
      '|',
      'imageStyle:inline',
      'imageStyle:wrapText',
      'imageStyle:breakText',
      '|',
      'resizeImage',
      '|',
    ],
  },
  list: {
    properties: {
      styles: true,
      startIndex: true,
      reversed: true,
    },
  },
  link: {
    decorators: {
      addTargetToExternalLinks: true,
      defaultProtocol: 'https://',
      toggleDownloadable: {
        mode: 'manual',
        label: 'Downloadable',
        attributes: {
          download: 'file',
        },
      },
    },
  },
  mention: {
    feeds: [
      {
        marker: '@',
        feed: [
          '@apple',
          '@bears',
          '@brownie',
          '@cake',
          '@cake',
          '@candy',
          '@canes',
          '@chocolate',
          '@cookie',
          '@cotton',
          '@cream',
          '@cupcake',
          '@danish',
          '@donut',
          '@dragée',
          '@fruitcake',
          '@gingerbread',
          '@gummi',
          '@ice',
          '@jelly-o',
          '@liquorice',
          '@macaroon',
          '@marzipan',
          '@oat',
          '@pie',
          '@plum',
          '@pudding',
          '@sesame',
          '@snaps',
          '@soufflé',
          '@sugar',
          '@sweet',
          '@topping',
          '@wafer',
        ],
        minimumCharacters: 1,
      },
    ],
  },
  // 图片上传.简单的上传适配器 功能配置
  simpleUpload: {
    // The URL that the images are uploaded to.
    uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/',
    // https://ckeditor.com/docs/ckeditor5/latest/assets/img/malta.jpg
    // Enable the XMLHttpRequest.withCredentials property.
    withCredentials: true,
    // Headers sent along with the XMLHttpRequest to the upload server.
    headers: {
      'X-CSRF-TOKEN': 'CSRF-Token',
      Authorization: 'Bearer <JSON Web Token>',
    },
  },
  table: {
    contentToolbar: [
      'tableColumn',
      'tableRow',
      'mergeTableCells',
      'tableProperties',
      'tableCellProperties',
      'toggleTableCaption',
    ],
  },
  // licenseKey: "your-license-key",
};

interface Props {
  html: string;
  handleSetHtml: (editor: any) => void;
}

export default function App({ html, handleSetHtml }: Props) {
  return (
    <div className="ckeditor">
      <CKEditor
        editor={ClassicEditor}
        config={editorConfig}
        data={html}
        // onReady={(editor) => {
        //   editor.setData(html);
        // }}
        onChange={(_event, editor) => {
          const data = editor.getData();
          handleSetHtml(data);
        }}
      />
    </div>
  );
}

4. 在React组件中使用CKEditor5组件

在React组件中使用

// 引入组件
import Editor from "xxx"
// 使用组件
<Editor html={html} handleSetHtml={handleSetHtml} />

// 编辑器内容，和设置内容
const [html, setHtml] = useState('');
const handleSetHtml = (editor: string) => {
  setHtml(editor);
};

5. 样式修改

global.less

// 富文本
.ck-content {
  min-height: 300px;
  ul,
  ol {
    margin-left: 40px;
    list-style-position: outside;
  }
}
.ck-powered-by {
  display: none;
}
.ckeditor {
  width: 100%;
}

总结&问题

参考：对 UmiJS 和 ckeditor 的折腾，CKEditor5的入门使用(react)-国家化
依赖问题

  1. 推荐使用pnpm安装依赖，yarn安装可能出现问题
  2. 单独安装依赖，如出现问题，本人使用的方式是删除依赖，重新pnpm i
  3. 大部分依赖插件需要安装同一版本，否则可能出现意外的问题

附：项目中package.js使用的依赖版本

// dependencies
    "@ckeditor/ckeditor5-alignment": "^41.3.1",
    "@ckeditor/ckeditor5-basic-styles": "^41.0.1",
    "@ckeditor/ckeditor5-block-quote": "^41.3.1",
    "@ckeditor/ckeditor5-cloud-services": "^41.3.1",
    "@ckeditor/ckeditor5-code-block": "^41.3.1",
    "@ckeditor/ckeditor5-dev-translations": "^39.6.3",
    "@ckeditor/ckeditor5-dev-utils": "^38.3.1",
    "@ckeditor/ckeditor5-editor-classic": "^41.0.1",
    "@ckeditor/ckeditor5-essentials": "^41.3.1",
    "@ckeditor/ckeditor5-export-pdf": "^41.3.1",
    "@ckeditor/ckeditor5-export-word": "^41.3.1",
    "@ckeditor/ckeditor5-find-and-replace": "^41.3.1",
    "@ckeditor/ckeditor5-font": "^41.3.1",
    "@ckeditor/ckeditor5-heading": "^41.3.1",
    "@ckeditor/ckeditor5-highlight": "^41.3.1",
    "@ckeditor/ckeditor5-horizontal-line": "^41.3.1",
    "@ckeditor/ckeditor5-html-embed": "^41.3.1",
    "@ckeditor/ckeditor5-html-support": "^41.3.1",
    "@ckeditor/ckeditor5-image": "^41.3.1",
    "@ckeditor/ckeditor5-indent": "^41.3.1",
    "@ckeditor/ckeditor5-link": "^41.3.1",
    "@ckeditor/ckeditor5-list": "^41.3.1",
    "@ckeditor/ckeditor5-media-embed": "^41.3.1",
    "@ckeditor/ckeditor5-mention": "^41.3.1",
    "@ckeditor/ckeditor5-page-break": "^41.3.1",
    "@ckeditor/ckeditor5-paragraph": "^41.0.1",
    "@ckeditor/ckeditor5-paste-from-office": "^41.3.1",
    "@ckeditor/ckeditor5-react": "^6.1.0",
    "@ckeditor/ckeditor5-remove-format": "^41.3.1",
    "@ckeditor/ckeditor5-show-blocks": "^41.3.1",
    "@ckeditor/ckeditor5-source-editing": "^41.3.1",
    "@ckeditor/ckeditor5-special-characters": "^41.3.1",
    "@ckeditor/ckeditor5-style": "^41.3.1",
    "@ckeditor/ckeditor5-table": "^41.0.1",
    "@ckeditor/ckeditor5-theme-lark": "^41.0.1",
    "@ckeditor/ckeditor5-typing": "^41.3.1",
    "@ckeditor/ckeditor5-upload": "^41.3.1",
    "@ckeditor/ckeditor5-word-count": "^41.3.1",

国际化

文档：本地化
注：以下两种方式翻译，自己配置toolbar项的label的（即自己配置的项-下拉选） 需要单独手动翻译，可使用如开发admin/email项目中的i18n国际化方式（$t(),这里就不作介绍）。

两种国际化方式

方式1、设置UI语言

说明：这种方式设置语言，一些toolbar项会存在漏翻译的情况。部分需要自定义翻译(根据导入的语言)
当使用预定义版本之一或在线构建器构建的编辑器，需要先导入翻译

// Import translations for the German language.
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh';

在组件中配置编辑器的语言

<CKEditor
    config={ {
        // Use the zh-cn language for this editor.
        language: 'zh-cn',
        // ...
    } }
    editor={ ClassicEditor }
    data="<p>Hello from CKEditor&nbsp;5!</p>"
/>

方式2、使用特定语言构建编辑器

说明：这种方式设置语言，翻译全面，默认的toolbar项都可以翻译，不可重新更改。
注：如通过导入翻译重新更改语言则如方法一，此种方式即没意义了。
安装依赖

pnpm install --save @ckeditor/ckeditor5-dev-translations

添加到 webpack 配置中

// webpack.config.js
const { CKEditorTranslationsPlugin } = require( '@ckeditor/ckeditor5-dev-translations' );

module.exports = {
    // ...
    plugins: [
        // ....
        new CKEditorTranslationsPlugin( {
            // The UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
            language: 'zh-cn',
            addMainLanguageTranslationsToAllAssets: true
        } ),
        // ....
    ],
    // ...
};

项目中使用

包括 **部分需要自定义翻译 **如下

编辑器配置（组件）

在编辑器组件中添加以下内容即可设置ckeditor5语言

// ...
// 引入语言包，获取项目设置的语言
import '@/locales/editor/zh';
import '@/locales/editor/zh-cn';
import { useAppSelector } from '@/hooks/useAppHooks';
import { selectLanguage } from '@/store/reducer/langSlice';

const langConfig = {
  en: 'en',
  hk: 'zh',
  cn: 'zh-cn',
};

// 获取设置的语言
  const lang = useAppSelector(selectLanguage);
// map语言并设置
  editorConfig.language = langConfig[lang as keyof typeof langConfig];

抽离语言包

locales/editor/zh-cn.ts 中文简体

import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';

Object.assign(window.CKEDITOR_TRANSLATIONS['zh-cn'].dictionary, {
  'Font Size': '字号',
  'Font Color': '文字颜色',
  'Font Background Color': '背景色',
  'Horizontal line': '分割线',
  'Remove Format': '清除格式',
  'Text alignment': '文本对齐',
  'Align left': '左对齐',
  'Align right': '右对齐',
  'Align center': '居中对齐',
  Justify: '两端对齐',
});

locales/editor/zh.ts 中文繁体

import '@ckeditor/ckeditor5-build-classic/build/translations/zh';

Object.assign(window.CKEDITOR_TRANSLATIONS.zh.dictionary, {
  'Font Size': '字號',
  'Font Color': '文字顔色',
  'Font Background Color': '背景色',
  'Horizontal line': '分割綫',
  'Remove Format': '清除格式',
  'Text alignment': '文本對齊',
  'Align left': '左對齊',
  'Align right': '左對齊',
  'Align center': '居中對齊',
  Justify: '兩端對齊',
});
Blaike_Gao
关注
  • 14
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
富文本编辑器 CKEditor5-React 的经典模式配置（包括图片上传与展示）
daoerZ的博客
02-02 3794
了解 CKEditor5-Reacthttps://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html 业务场景：图文混排，图片支持截图粘贴和上传 CKEditor5-React 经典模式ckeditor5-build-classic 可以实现这些基本需求。该模式组件仅支持标题、段落、加粗、倾斜、撤销、重做、块引用、超链接、表格、项目编号/符号列表、图片，视频等，而且图片仅支持占用整栏...
ckeditor4-react:官方CKEditor 4 React组件
04-29
用于React的CKEditor 4 WYSIWYG编辑器组件 React的官方 WYSIWYG编辑器组件。 我们期待您的反馈！ 您可以在上报告任何问题，想法或功能请求。 用法 import CKEditor from 'ckeditor4-react' ; < CKEditor xss=removed>This is an example CKEditor 4 WYSIWYG editor instance.</p>" / > 文档和示例 请参阅的文章。 您也可以在CKEditor 4示例中查看CKEditor 4 WYSIWYG编辑器React Integration示例。 浏览器支持 CKEditor 4 React组件可用于除Internet Explorer 8-10之外的所有受支持的浏览器。 贡献 克隆此存储库后，安装必要的依赖项： npm install 执行测试
官方 CKEditor 5 React 组件。
06-08
用于 React 的 CKEditor 5 富文本编辑器组件 用于 React 的官方 CKEditor 5 富文本编辑器组件。 开发人员文档 :open_book: 请参阅 CKEditor 5 文档中的“React 富文本编辑器组件”指南以了解更多信息： 快速入门 组件属性 自定义构建 集成从源代码构建的 CKEditor 5 使用 [email protected] 使用 [email protected] 贡献 克隆后存储库，安装必要的依赖项： npm install 也可以使用 Yarn。 执行测试 在开始执行测试之前，您需要构建包。 您可以使用 npm run build 来构建生产就绪版本，或者使用 npm run develop 生成带有所有源文件的附加观察程序的开发版本。 npm run test -- [附加选项] # 或 npm t -- [附加选项] 该命令接受以下选项： --coverage (-c) – 是否生成代码覆盖率。 --source-map (-s) – 是否附加源映射。 --watch (-w) – 是否观看测试文件。 --reporter (-
React使用自定义CKEditor5，并完善图片上传功能
qq_36383583的博客
07-31 1200
自定义CKEditor5，并完善上传图片功能
不得不安利的富文本编辑器，太赞了！
最新发布
趣谈前端
06-10 409
hello，大家好，我是徐小夕。之前和大家分享了很多可视化，零代码和前端工程化的最佳实践，最近也在迭代可视化文档知识引擎Nocode/WEP。在研究文档编辑器的时候也发现了很多优秀的开源项目，从中吸取了很多先进的设计思想。接下来就和大家分享一款由facebook开源的强大的富文本编辑器——Lexical。目前在github上已有 17.7k star。github地址：https://github...
推荐项目：React文本编辑器——轻量级的Draft.js实战
gitblog_00006的博客
05-28 317
推荐项目：React文本编辑器——轻量级的Draft.js实战 项目地址:https://gitcode.com/andrewcoelho/react-text-editor 在开源软件的璀璨星河中，有一颗特别闪耀的新星——React Text Editor，这是一款基于Draft.js精心打造的文本编辑工具，简约而不简单，它旨在复刻Facebook笔记编辑器的核心体验，虽然当前版本放弃了对图片...
探索下一代React富文本编辑器——re-editor
gitblog_00047的博客
05-23 310
探索下一代React富文本编辑器——re-editor 项目地址:https://gitcode.com/wowlusitong/re-editor 项目简介 re-editor是一个由React驱动的现代化富文本编辑器，设计目标是让开发者能够轻松地创建出功能强大且易于定制的文本编辑环境。它的设计理念在于“开箱即用”，同时提供高度的灵活性，允许您根据自己的需求进行深度定制。凭借其优雅的UI和强大的...
记录React之富文本编辑器
qq_28992047的博客
10-13 1318
使用document.execCommand和contentEditable开发简易版富文本编辑器
即学即用的富文本编辑器---wangEditor
tomtomgogo的博客
01-19 2420
在项目编写中，会遇到编写富文本编辑器。这里推荐一个比较容易上手且全面的富文本编辑器--wangEditor：里面拥有加粗、下划线、斜体、大小写、字体字号、排序、图片上传、表格等等文本编辑功能。
基于React的富文本编辑器——Braft Editor使用
z止于至善的博客
09-26 6200
antd是基于 Ant Design 设计规范实现的 高质量 React 组件库，倾向于只提供符合该规范且带有视觉展现的 UI 组件，也尽量不重复造轮子。如果要在React项目中使用富文本编辑器，官方推荐使用与。这篇文章主要介绍与Antd的结合使用。
Github每日精选（第14期）：在线富文本编辑器Editor.js
haleycat的博客
08-04 1525
当然，这些工具可以增加选项。我们可以给这些工具增加特定的选项（下面的classinlineToolbar，设定了行内是否显示工具栏，显示哪些工具栏，工具的类名等）。上面的例子中，我们使用了没有选项的工具（只有工具名称，headerlist）。我们有许多现成的插件和一个用于创建新插件的简单。是一个块样式的编辑器。块是构成条目的结构单元。然后，增加一些工具配置。先看一下开始的最简单的配置。在github的地址在。安装后如何使用编辑器。......
在线富文本编辑器
weixin_52041354的博客
04-30 572
1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp（前端都一样，后台如果语言不通得自己做 Base64编码解码） 因为公司业务需要支持IE8 ，网上其实有很多富文本框，效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor，由于官方没有维护，新的neuditor 也不知道什么时候能支持word自动转存，只能自己想办法。 如果没有必要，不建议使用.
基于ES6，使用React、Webpack、Babel构建模块化JavaScript应用
03-01
【编者按】本文为《BuildingmodularjavascriptapplicationsinES6withReact,WebpackandBabel》的简译内容，讲述了作者基于ES6，使用React、Webpack、Babel构建模块化JavaScript应用的编程心得。如果你想用React构建一...
富文本编辑器CKEditor配置及图片上传配置
01-20
一、ckeditor4的配 1.下载ckeditor4 进入官网https://ckeditor.com/ckeditor-4/download/可以直接点击下载，也可以下拉到 CKEditor 4 – previous versions 进行版本选择下载 2.解压并配置 解压压缩包打开 ...
ckeditor5-react:官方CKEditor 5 React组件
05-03
用于React的CKEditor 5 RTF编辑器组件 用于React的官方 Rich Text编辑器组件。 :open_book: 请参阅中的指南以了解更多信息： 使用create-react-app@1 贡献克隆此存储库后，安装必要的依赖项： npm install 您也可以...
CKEditor5定制及文件上传
wudengyu的博客
09-01 970
另外，CKEditor5有的功能，并不包含在预构建版本中，只能自己编译，比如说Simple upload adapter，这个组件没有，就没办法上传图片，只能用在一些简单的场合了。另一个，Simple upload adapter组件需要服务器支持，也就是需要写一个controller来接收上传的文件，这也没什么好说的，只是multipart请求的RequestParam是"upload"，而不是"file"，文档里面也没说，是查看了请求包的内容才知道的。这样就可以像预编译的一样，在HTML中进行配置。
9款 Vue 富文本编辑器
热门推荐
学习 记录 总结 分享
05-10 1万+
Trumbowyg 是一个轻量，可定制的 jQuery 所见即所得（WYSIWYG）的编辑器插件，可生成语义化代码，带有功能强大的 API。编辑器和生成的代码进行了优化以支持 HTML5。兼容大部分浏览器，如 IE8+、Chrome、Opera 和 Firefox。基于bootstrap,比较突出的优点就是能保持复制过来的东西的原有样式，并且比较流畅。
Quill富文本编辑器的使用（使用富文本编辑器展示html的内容（包含表格）可以编辑）
weixin_55761900的博客
11-24 3652
vue前端富文本编辑器的使用（使用富文本编辑器展示html的内容（包含表格）可以编辑）
富文本编辑器CKEditor4简单使用-06（开发自定义插件——中级篇Part1）
@素素~的博客
02-04 1487
富文本编辑器CKEditor4简单使用-06（开发自定义插件——中级篇Part1）
react native 怎么使用富文本编辑器
03-30
React Native并没有内置的富文本编辑器，但可以使用第三方库来实现此功能。以下是一些常用的富文本编辑器库： 1. react-native-zss-rich-text-editor：这是一个基于WKWebView的富文本编辑器库，它支持HTML，CSS，JavaScript等语言，可以实现常见的富文本编辑功能。 2. react-native-cn-richtext-editor：这是一个纯React Native编写的富文本编辑器库，支持插入图片、视频、链接等功能。 3. react-native-html-to-text：这是一个将HTML转换为纯文本的库，可以用于将富文本内容显示在React Native应用中。 使用这些库时，需要按照它们的文档进行配置和使用。具体实现方式可能因库而异。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值