TinyMCE installation tutorial

Time:2021-6-14

Installation of TinyMCE

There are many online installation tutorials, and most of them are the same. I remember seeing an article about tinymece installation tutorial at the beginning. After collecting it, I never practiced it myself. As the Spring Festival is approaching, we all have a holiday. When we have a little spare time today, we have studied it. We still find that there are many pits to step on. In case we need to use them in the future, if we can’t get enough time, we will record them.

1. Installationtinymce

npm install tinymce -S

2. Installationtinymce-vueIn the trend of Vue becoming more and more powerful, the government launched the dependency package.

npm install @tinymce/tinymce-vue -S

In fact, I wonder how others know about these installation dependencies. It turns out that these are explained on the official website. If you don’t talk much, there is a picture and a truth.

Corresponding to step 1, given by the officialGet Tinymce by npm

TinyMCE installation tutorial

Corresponding to step 2, given by the officialtinymce-vueIntegration package

TinyMCE installation tutorial

3. Chinese, downloadingChinese language pack

TinyMCE installation tutorial

  • Create a new tinymece folder in the public directory of the project root directory, unzip the downloaded Chinese language pack and put it in this folder
  • In the dependency package node_ Find the tinymece folder in modules and copy the skins folder to the public / tinymece directory

TinyMCE installation tutorial

4. Simple demo

<template>
    <div class="activeConfig">
        <div class="activeConfig-container">
            <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit" />
        </div>
    </div>
</template>

<script>
    //Introducing components
    import tinymce from 'tinymce/tinymce'
    import Editor from '@tinymce/tinymce-vue'
    //JS and CSS with rich text editor theme
    import 'tinymce/themes/silver/theme.min.js'
    import 'tinymce/skins/ui/oxide/skin.min.css'
    //Extensions
    import 'tinymce/plugins/image'
    import 'tinymce/plugins/media'
    import 'tinymce/plugins/link'
    import 'tinymce/plugins/code'
    import 'tinymce/plugins/table'
    import 'tinymce/plugins/lists'
    import 'tinymce/plugins/paste'
    import 'tinymce/plugins/imagetools'
    import 'tinymce/plugins/print'
    import 'tinymce/plugins/preview'
    import 'tinymce/plugins/searchreplace'
    import 'tinymce/plugins/autolink'
    import 'tinymce/plugins/directionality'
    import 'tinymce/plugins/visualblocks'
    import 'tinymce/plugins/visualchars'
    import 'tinymce/plugins/fullscreen'
    import 'tinymce/plugins/template'
    import 'tinymce/plugins/codesample'
    import 'tinymce/plugins/charmap'
    import 'tinymce/plugins/hr'
    import 'tinymce/plugins/pagebreak'
    import 'tinymce/plugins/nonbreaking'
    import 'tinymce/plugins/anchor'
    import 'tinymce/plugins/insertdatetime'
    import 'tinymce/plugins/advlist'
    import 'tinymce/plugins/wordcount'
    import 'tinymce/plugins/textpattern'
    import 'tinymce/plugins/help'
    import 'tinymce/plugins/emoticons'
    import 'tinymce/plugins/autosave'

    import 'tinymce/plugins/autoresize'
    //import 'tinymce/plugins/formatpainter'

    //The following components are user-defined components, and multi image upload, and Baidu map, expression package exist pits, these pits will be introduced later
    import '@/plugins/axupimgs'
    import '@/plugins/bdmap'
    import '@/plugins/indent2em'
    import '@/plugins/lineheight'

    export default {
        name: 'ActiveConfig',
        components: { Editor },
        data() {
            return {
                //Binding value of tinymece
                tinymceHtml: '',
                //Initial configuration of tinymece
                editorInit: {
                    //Tinume container
                    selector: '#tinymce',
                    //Configuration language
                    language_url: '/tinymce/langs/zh_CN.js',
                    language: 'zh_CN',
                    //Configure skin
                    skin_url: '/tinymce/skins/ui/oxide',
                    //Configure editor height
                    height:500,
                    min_height: 300,
                    max_height:650,
                    width:1000,
                    min_width:900,
                    max_width:1200,
                    emoticons_database_url: '/emojis.js',
                    emoticons_append: {
                        "diy1": {
                            "keywords": ["diy1"],
                            "char": "\uD83E\uDD2F",
                            "category": "animals_and_nature"
                        }
                    },
                    //Configure plug-ins
                    plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link' +
                        ' media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist ' +
                        'lists wordcount imagetools textpattern help autosave bdmap indent2em autoresize lineheight ' +
                        'axupimgs emoticons',
                    toolbar: 'code undo redo restoredraft | cut copy paste pastetext | \
                        forecolor backcolor bold italic underline strikethrough link anchor | \
                        alignleft aligncenter alignright alignjustify outdent indent | \
                        styleselect formatselect fontselect fontsizeselect | bullist numlist | \
                        blockquote subscript superscript removeformat | \
                        table image media charmap hr pagebreak insertdatetime print preview | fullscreen | \
                        bdmap indent2em lineheight axupimgs emoticons',
                    //Here is the image upload processing function
                    iimages_upload_base_path: '/demo',
                    images_upload_handler: function (blobInfo, succFun, failFun) {
                        var xhr, formData;
                        var file = blobInfo.blob();// Convert to an easy to understand file object
                        xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', '/demo/upimg2.php');
                        xhr.onload = function() {
                            var json;
                            if (xhr.status != 200) {
                                failFun('HTTP Error: ' + xhr.status);
                                return;
                            }
                            json = JSON.parse(xhr.responseText);
                            if (!json || typeof json.location != 'string') {
                                failFun('Invalid JSON: ' + xhr.responseText);
                                return;
                            }
                            succFun(json.location);
                        };
                        formData = new FormData();
                        formData.append('file', file, file.name );
                        xhr.send(formData);
                    },
                    fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
                    font_ Formats: 'Microsoft YaHei = Microsoft YaHei, Helvetica Neue, Pingfang SC, sans serif; Apple formula = Pingfang SC, Microsoft YaHei, sans serif; Song typeface = Simsun, serif; Song style = Fangsong, serif; Bold = simhei, sans serif; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino;',
                    link_list: [
                        {Title: 'preset link 1', value: ' http://www.tinymce.com ' },
                        {Title: 'preset link 2', value: ' http://tinymce.ax-z.cn ' }
                    ],
                    image_list: [
                        {Title: 'preset picture 1', value: ' https://www.tiny.cloud/images/[email protected] ' },
                        {Title: 'preset picture 2', value: ' https://www.baidu.com/img/bd_ logo1.png' }
                    ],
                    image_class_list: [
                        { title: 'None', value: '' },
                        { title: 'Some class', value: 'class-name' }
                    ],
                    importcss_append: true,
                    //Customize the callback content of the file selector
                    file_picker_callback: function (callback, value, meta) {
                        if (meta.filetype === 'file') {
                            callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
                        }
                        if (meta.filetype === 'image') {
                            callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
                        }
                        if (meta.filetype === 'media') {
                            callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
                        }
                    },
                    autosave_ask_before_unload: false,
                    //Watermark "powered by TinyMCE"
                    branding: false,
                    statusbar: false,
                }
            }
        },
        mounted() {
            tinymce.init({})
        },
        methods: {
            //Picture upload
            handleImgUpload(blobInfo, success, failure) {

            }
        }
    }
</script>

<style scoped>
    .activeConfig-container {
            margin-top: 30px;
            margin-left:25%;
    }
</style>

Effect display

TinyMCE installation tutorial

TinyMCE component properties

name type describe
:content string As a text content editor, you can use V-model to achieve bidirectional binding
@change function The event triggered after the input change undo redo execcommand Keyup nodechange event response in the editor returns the text content
:setting object Editor settings,setupIt is not recommended to set it here
:setup function Commonly used with custom editor processing, build some internal processing, it is recommended to add custom code here
:init object Initial configuration of tinymece editor

matters needing attention

tinymce-vueVersion is^3.0.1,tinymceThe version of is^5.1.5, multi image upload, and Baidu map, expression pack these plug-ins exist pits, these pits will be introduced later. Because I’m going back to my hometown for the new year, ha ha. Wish you a happy new year in advance!!!

This work adoptsCC agreementReprint must indicate the author and the link of this article

Give each hair a name before it’s all gone~

Recommended Today

[database] MySQL exercises and answers (educational administration management system)_ MySQL_ 5.7)

✨ statement The answer to the exercise is not guaranteed to be completely correct, which is for reference only MySQL:5.7 Recommended software: Navicat premium Learning SQL statements requires diligent practice! ✨ Field description of each table course CId Course serial number, primary key PCId Prerequisite course DId Opening department number, foreign key CName Course name […]