How to use tinymce - 10 common examples

onCtrlSSave(){
                // vm.$Message.info("正在保存中");
                if(this.loading) return;
                let content = tinymce.get('tinymceEditer').getContent();
                let contentArr = content.split("<p></p>");
                let i = 0, length = contentArr.length;
                content = "";
                for(i; i")[1] :'';
                    } else {
                        content += value ? value.split("<p>")[1] + "<br>" : '';
                    }
                }
                let obj = {
                    params: {
                        container: content,
                        catalogId:this.params.catalogId,</p>

initTinymce () {
                if(tinymce.get('tinymceEditer')) {
                    // if(this.container){
                    this.loading = false;
                    let tinymceDom = tinymce.get('tinymceEditer').dom.doc;
                    tinymceDom.documentElement.scrollTop = tinymceDom.body.scrollTop = 0;
                    tinymce.get('tinymceEditer').setContent(this.container);
                    // }
                } else {
                    this.$nextTick(() => {
                        let vm = this;
                        let height = document.body.offsetHeight - 300;
                        tinymce.init({
                            selector: '#tinymceEditer',
                            branding: false,
                            elementpath: false,
                            height: height,
                            language: 'zh_CN.GB2312',

initTinyMCE() {
    const { survey, runtime, options, question, changeQuestionAttribute } = this.props;
    const node = runtime.findCurrentNode(survey);
    if (!node.isPage()) return;

    const page = runtime.findCurrentPage(survey);

    const toolbar = `free_mode_save free_mode_cancel | bold italic underline strikethrough forecolor backcolor removeformat table ' +
      'link unlink | alignleft aligncenter alignright alignjustify ${isDevelopment() ? ' | code' : ''} reference_answer image_manager`;

    const cssLinks = survey.getCssRuntimeUrls().concat(survey.getCssPreviewUrls()).toArray();
    tinymce.init({
      selector: `#${TINYMCE_ID}`,
      menubar: '',
      toolbar,
      plugins: `free_mode table contextmenu textcolor paste fullscreen link ${isDevelopment() ? 'code' : ''} reference_answer image_manager`,
      contextmenu: 'link inserttable | cell row column deletetable',
      body_class: 'm3-enquete__user-agent-group--PC',
      body_id: 'content',
      verify_html: false, // trueだと要素や属性が削除されることがある
      content_css: cssLinks,
      cache_suffix: options.getCacheSuffix(),
      imageManagerUrl: options.getImageManagerUrl(),
      init_instance_callback: this.handleTinyMCEInit.bind(this),
      freeModeSaveCallback: () => {
        changeQuestionAttribute(page.getId(), question.getId(), 'matrixHtml', this.getMatrixHtmlFromTinyMCE());
        this.props.onHide();
      },

this.change = true
            const content = editor.getContent()
            this.$emit('input', content)
          })
        },
        setup(editor) {
          editor.on('FullscreenStateChanged', e => {
            this.fullscreen = e.state
          })
        },
        toolbar: this.toolbar,
        plugins: this.tools
      }
      // 合并setting
      Object.assign(setting, this.setting)
      tinymce.init(setting)
    },
    setContent(content) {

this.$nextTick(() => {
                        let vm = this;
                        let height = document.body.offsetHeight - 300;
                        tinymce.init({
                            selector: '#tinymceEditer',
                            branding: false,
                            elementpath: false,
                            height: height,
                            language: 'zh_CN.GB2312',
                            // menubar: 'edit insert view format table tools',
                            // menubar: 'view',
                            menubar: 'insert',
                            plugins: [
                                // 'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
                                'preview code',
                                'paste'
                                // 'searchreplace visualblocks visualchars code fullpage',
                                // 'insertdatetime media nonbreaking save table contextmenu directionality',
                                // 'emoticons paste textcolor colorpicker textpattern imagetools codesample'
                            ],

}
            }
            this._deferredRender();
            const options = this.options;
            if ($(this.$el).prop('disabled') || $(this.$el).prop('readonly')) {
                options.readonly = true;
            }

            _.each(this.options.pluginsMap, function(url, name) {
                url = location.origin + '/' + this.options.assets_base_url + url;
                if (this.options.plugins.indexOf(name) !== -1) {
                    tinyMCE.PluginManager.load(name, url);
                }
            }, this);

            tinyMCE.init(_.extend({
                target: this.el,
                setup: function(editor) {
                    editor.on('keydown', function(e) {
                        if (e.keyCode === 27) {
                            _.defer(function() {
                                // action is deferred to give time for tinymce to process the event by itself first
                                self.$el.trigger(e);
                            });
                        }
                    });
                    editor.on('change', function() {
                        editor.save({no_events: true});
                    });
                    editor.on('SetContent', function() {
                        editor.save({no_events: true});
                    });

});

    $('.sidebar').animate({ scrollTop: sidebarScrolPosition }, 0);

    // This is a workaround to handle the SPA nature of turbolinks
    window.BookableRangeReady = true;
    $(document).trigger('bookablerange.ready');

    // Persist page scroll position
    if (Turbolinks.scroll.top) {
        document.documentElement.scrollTop = Turbolinks.scroll.top;
        Turbolinks.scroll = {};
    }

    // Initialize the tinymce
    TinyMCE.init({
        selector: '.tinymce',
        skin_url: '/tinymce/ui/oxide',
        plugins: "image imagetools",
        toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image",
        content_css: '/tinymce/ui/oxide/content.css'
    });

    // Initialize dropzone(s)
    $('.dropzone').dropzone({
        parallelUploads: 1,
        init: function() {
            this.on('queuecomplete', function(file) {
                window.location = routes.route(
                    window.Accessarea + '.' + window.location.pathname.split('/')[2] + '.index'
                );
            });

const selector = this.element.querySelector('.tinymce').id;
        const input = this.element.querySelector('input');

        let plugins = 'image media table link paste contextmenu textpattern autolink codesample';
        let toolbar1 = '';
        let inline = true;

        if (this.element.dataset.theme === 'modern') {
            plugins = 'print autosave autoresize preview paste code searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern';
            toolbar1 = 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | ltr rtl';
            inline = false;
        }

        // for remove cache
        tinymce.remove(`#${selector}`);

        tinymce.init({
            branding: false,
            selector: `#${selector}`,
            theme: this.element.dataset.theme,
            min_height: 300,
            height: 300,
            max_height: 600,
            plugins,
            toolbar1,
            insert_toolbar: 'quickimage quicktable media codesample fullscreen',
            selection_toolbar:
                'bold italic | quicklink h2 h3 blockquote | alignleft aligncenter alignright alignjustify | outdent indent | removeformat ',
            inline,
            convert_urls: false,
            image_caption: true,

export default function () {
  PluginManager.add('autoresize', function (editor) {
    // If autoresize is enabled, disable resize if the user hasn't explicitly enabled it
    if (!editor.settings.hasOwnProperty('resize')) {
      editor.settings.resize = false;
    }
    if (!editor.inline) {
      const oldSize = Cell(0);
      Commands.register(editor, oldSize);
      Resize.setup(editor, oldSize);
    }
  });
}

const appendItems = (values, output?: Types.SelectBox.ExternalSelectBoxItem[]) => {
    output = output || [];

    Tools.each(values, (item) => {
      const menuItem: any = { text: item.text || item.title };

      // TODO TINY-2236 - this implies table_class_list supports nested menus, but bridge doesn't, so this either needs to be supported or deleted
      if (item.menu) {
        menuItem.menu = appendItems(item.menu);
      } else {
        menuItem.value = item.value;

        if (itemCallback) {
          itemCallback(menuItem);
        }
      }

      output.push(menuItem);
    });