React使用TinyMce编辑器

最新推荐文章于 2024-05-24 17:00:09 发布

班班v

最新推荐文章于 2024-05-24 17:00:09 发布

阅读量2.8k

点赞数

文章标签： react.js 编辑器前端

本文链接：https://blog.csdn.net/miaoge_miaoge/article/details/121893744

版权

React使用TinyMce编辑器

一、效果
- 1.1编辑器界面图
- 1.2 代码页面渲染视图
二、详细使用

这个网站刚开始的时候，使用的是CKEditor，但是后面再次使用发现TinyMce Editor更加强大，可用渲染代码，可用预览、全面编辑代码、查看编辑器的HTML代码，所以用TinyMce Editor代替了CKEditor的使用。但是在配置和使用的过程中发现了很多问题，通过自己的努力解决了，开这个帖子来记录一下，方便更多学习的人。先看看效果如何，然后再说详细实现

一、效果

1.1编辑器界面图

1.2 代码页面渲染视图

二、详细使用

上面说了TinyMce Eidtor的使用，然后我们来说是它的详细实现

2.1 依赖安装

yarn add @tinymce/tinymce-react
yarn add babel-plugin-prismjs
由于这里使用了react-app-rewired，所以还需要再加多几个依赖
yarn add react-app-rewired
yarn add customize-cra

2.2 TinyEditor配置

import React from 'react'
import { Editor } from '@tinymce/tinymce-react';
import { uploadFile } from '@/api'

export default class TinyEditor extends React.Component {

    imagesUploadHandler = async (blobInfo, success, failure, progress) => {
        var data = new FormData();
        data.append('files', blobInfo.blob(), blobInfo.filename());
        let res = await uploadFile(data);
        if (res) {
            let { errno } = res;
            if (errno === 0) {
                success(res.data[0]);//return Json Format is ["imageUrl","imageUrl1"]
            } else {
                failure("图片上传失败")
            }
        } else {
            failure("图片上传失败")
        }
    }

    handleEditorChange = (e) => {
        console.log(e);
    }

    render() {
        return (
            <Editor
                initialValue=""
                apiKey="hq72bjfug6s56a5qxa2oxpbqsxc58nv4v7nfruyd5ndpgu72"
                init={{
                    height: 500,
                    plugins: [
                        'advlist autolink lists link image charmap print preview anchor',
                        'searchreplace visualblocks code fullscreen',
                        'insertdatetime media table paste code help wordcount imagetools codesample'
                    ],
                    toolbar:
                        'undo redo | formatselect | bold italic backcolor |  alignleft aligncenter alignright alignjustify |bullist numlist outdent indent | removeformat |image|codesample|code|preview|fullscreen | help',
                    menu: {
                        file: { title: '文件', items: 'newdocument restoredraft | preview | print ' },
                        edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
                        view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
                        insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
                        format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat' },
                        tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
                        table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
                        favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | spellchecker | emoticons' }
                    },
                    menubar: 'file edit view insert format tools table',
                    codesample_languages: [
                        { text: 'HTML/XML', value: 'markup' },
                        { text: 'JavaScript', value: 'javascript' },
                        { text: 'CSS', value: 'css' },
                        { text: 'PHP', value: 'php' },
                        { text: 'Ruby', value: 'ruby' },
                        { text: 'Python', value: 'python' },
                        { text: 'Java', value: 'java' },
                        { text: 'C', value: 'c' },
                        { text: 'C#', value: 'csharp' },
                        { text: 'C++', value: 'cpp' },
                        { text: 'Scala', value: 'scala' }
                    ],
                    language: "zh_CN",
                    image_uploadtab: true,
                    images_upload_handler: this.imagesUploadHandler
                }}
                onEditorChange={this.handleEditorChange}
            />
        );
    }
}

到这里就完成了TinyEditor的配置，打开页面就可以看到TinyEditor的使用了，在代码块，TinyEditor保存的时候，把代码以
<pre class=“language-css”><code></code></pre>的html的代码来保存的，在前端渲染的时候，prismjs根据保存的<pre><code></code></pre>来渲染，需要配置一下，下面详细详解

2.3 配置config-overrides.js

const path = require('path')
const {
    override,
    addWebpackAlias,
    useBabelRc
} = require('customize-cra')
module.exports = override(
    addWebpackAlias({
        '@': path.resolve(__dirname, 'src'),
        'components': path.resolve(__dirname, 'src/components'),
        'utils': path.resolve(__dirname, 'src/utils'),
        'views': path.resolve(__dirname, 'src/views'),
        'img': path.resolve(__dirname, 'src/img')
    }),
    useBabelRc(),
)

2.4 配置.babelrc按语言需求加载

{
    "plugins": [
      ["prismjs", {
          "languages": ["javascript", "css", "markup","java"],
          "plugins": ["line-numbers"],
          "theme": "default",
          "css": true
      }]
    ]
}

.babelrc的位置如下图所示：

然后再需要显示的界面通过调用Prism.highlightAll()来渲染效果，如下所示：

import React from 'react'
import Prism from 'prismjs';

export default class CodeExample extends React.Component {

    componentWillMount() {

    }

    componentDidMount() {
        Prism.highlightAll();
    }

    render() {

        return (<div style={{ textAlign: "left" }}>
            This is a test!!!<br />
            <pre className='language-java'>
                <code>public static void main()&#123;
                return 0;
                &#125;
                </code>
            </pre>
        </div>
        )
    }
}

首页心情随笔韶华追忆技术分享个人归档博客留言关于我
您现在的位置是：首页 > 技术分享 >
React使用TinyMce编辑器
班班2020-07-12 18:11:55
这个网站刚开始的时候，使用的是CKEditor，但是后面再次使用发现TinyMce Editor更加强大，可用渲染代码，可用预览、全面编辑代码、查看编辑器的HTML代码，所以用TinyMce Editor代替了CKEditor的使用。但是在配置和使用的过程中发现了很多问题，通过自己的努力解决了，开这个帖子来记录一下，方便更多学习的人。先看看效果如何，然后再说详细实现

一、效果

1.编辑器界面图

2.代码页面渲染视图

二、详细使用

上面说了TinyMce Eidtor的使用，然后我们来说是它的详细实现

1.依赖安装

yarn add @tinymce/tinymce-react
yarn add babel-plugin-prismjs
由于这里使用了react-app-rewired，所以还需要再加多几个依赖
yarn add react-app-rewired
yarn add customize-cra
2.TinyEditor配置

import React from ‘react’
import { Editor } from ‘@tinymce/tinymce-react’;
import { uploadFile } from ‘@/api’

export default class TinyEditor extends React.Component {

imagesUploadHandler = async (blobInfo, success, failure, progress) => {
    var data = new FormData();
    data.append('files', blobInfo.blob(), blobInfo.filename());
    let res = await uploadFile(data);
    if (res) {
        let { errno } = res;
        if (errno === 0) {
            success(res.data[0]);//return Json Format is ["imageUrl","imageUrl1"]
        } else {
            failure("图片上传失败")
        }
    } else {
        failure("图片上传失败")
    }
}

handleEditorChange = (e) => {
    console.log(e);
}

render() {
    return (
        <Editor
            initialValue=""
            apiKey="hq72bjfug6s56a5qxa2oxpbqsxc58nv4v7nfruyd5ndpgu72"
            init={{
                height: 500,
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen',
                    'insertdatetime media table paste code help wordcount imagetools codesample'
                ],
                toolbar:
                    'undo redo | formatselect | bold italic backcolor |  alignleft aligncenter alignright alignjustify |bullist numlist outdent indent | removeformat |image|codesample|code|preview|fullscreen | help',
                menu: {
                    file: { title: '文件', items: 'newdocument restoredraft | preview | print ' },
                    edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
                    view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
                    insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
                    format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat' },
                    tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
                    table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
                    favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | spellchecker | emoticons' }
                },
                menubar: 'file edit view insert format tools table',
                codesample_languages: [
                    { text: 'HTML/XML', value: 'markup' },
                    { text: 'JavaScript', value: 'javascript' },
                    { text: 'CSS', value: 'css' },
                    { text: 'PHP', value: 'php' },
                    { text: 'Ruby', value: 'ruby' },
                    { text: 'Python', value: 'python' },
                    { text: 'Java', value: 'java' },
                    { text: 'C', value: 'c' },
                    { text: 'C#', value: 'csharp' },
                    { text: 'C++', value: 'cpp' },
                    { text: 'Scala', value: 'scala' }
                ],
                language: "zh_CN",
                image_uploadtab: true,
                images_upload_handler: this.imagesUploadHandler
            }}
            onEditorChange={this.handleEditorChange}
        />
    );
}

}
到这里就完成了TinyEditor的配置，打开页面就可以看到TinyEditor的使用了，在代码块，TinyEditor保存的时候，把代码以

的html的代码来保存的，在前端渲染的时候，prismjs根据保存的

来渲染，需要配置一下，下面详细详解

3.配置config-overrides.js

const path = require(‘path’)
const {
override,
addWebpackAlias,
useBabelRc
} = require(‘customize-cra’)
module.exports = override(
addWebpackAlias({
‘@’: path.resolve(__dirname, ‘src’),
‘components’: path.resolve(__dirname, ‘src/components’),
‘utils’: path.resolve(__dirname, ‘src/utils’),
‘views’: path.resolve(__dirname, ‘src/views’),
‘img’: path.resolve(__dirname, ‘src/img’)
}),
useBabelRc(),
)
4.配置.babelrc按语言需求加载

{
“plugins”: [
[“prismjs”, {
“languages”: [“javascript”, “css”, “markup”,“java”],
“plugins”: [“line-numbers”],
“theme”: “default”,
“css”: true
}]
]
}
.babelrc的位置如下图所示：

.babelrc文件的位置

然后再需要显示的界面通过调用Prism.highlightAll()来渲染效果，如下所示：

import React from ‘react’
import Prism from ‘prismjs’;

export default class CodeExample extends React.Component {

componentWillMount() {

}

componentDidMount() {
    Prism.highlightAll();
}

render() {

    return (<div style={{ textAlign: "left" }}>
        This is a test!!!<br />
        <pre className='language-java'>
            <code>public static void main()&#123;
            return 0;
            &#125;
            </code>
        </pre>
    </div>
    )
}

}
到这里位置TinyMceEditor的详细配置就完成了，为例方便大家学习，我还把代码上端到GitHub上供大家学习

地址为：

https://github.com/banbansmile/tinymce-react

班班v

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
React使用TinyMce编辑器

React使用TinyMce编辑器一、效果1.1编辑器界面图1.2 代码页面渲染视图二、详细使用2.1 依赖安装2.2 TinyEditor配置2.3 配置config-overrides.js2.4 配置.babelrc按语言需求加载这个网站刚开始的时候，使用的是CKEditor，但是后面再次使用发现TinyMce Editor更加强大，可用渲染代码，可用预览、全面编辑代码、查看编辑器的HTML代码，所以用TinyMce Editor代替了CKEditor的使用。但是在配置和使用的过程中发现了很多问题，
复制链接

扫一扫