How to use tinymce - 10 common examples

To help you get started, we’ve selected a few tinymce examples, based on popular ways it is used in public projects.

github IceInTheFire / timotaoshu / iview-admin-dev / src / views / home / bookContainer.vue View on Github external
onCtrlSSave(){
                // vm.$Message.info("正在保存中");
                if(this.loading) return;
                let content = tinymce.get('tinymceEditer').getContent();
                let contentArr = content.split("</p>");
                let i = 0, length = contentArr.length;
                content = "";
                for(i; i<length; i++) {
                    let value = contentArr[i];
                    if(i == length - 1) {
                        console.log(value);
                        content += value ? value.split("<p>")[1] :'';
                    } else {
                        content += value ? value.split("<p>")[1] + "<br>" : '';
                    }
                }
                let obj = {
                    params: {
                        container: content,
                        catalogId:this.params.catalogId,
github IceInTheFire / timotaoshu / iview-admin-dev / src / views / home / bookContainer.vue View on Github external
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',
github jirokun / survey-designer-js / lib / editor / components / question_editors / parts / MatrixTableEditorPart.js View on Github external
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();
      },
github QDMarkMan / vue-base-template / src / components / Editor.vue View on Github external
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) {
github IceInTheFire / timotaoshu / iview-admin-dev / src / views / home / bookContainer.vue View on Github external
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'
                            ],
github oroinc / platform / src / Oro / Bundle / FormBundle / Resources / public / js / app / views / wysiwig-editor / wysiwyg-editor-view.js View on Github external
}
            }
            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});
                    });
github rinvex / cortex / resources / js / app.js View on Github external
});

    $('.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'
                );
            });
github orchidsoftware / platform / resources / js / controllers / fields / tinymce_controller.js View on Github external
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,
github tinymce / tinymce / modules / tinymce / src / plugins / autoresize / main / ts / Plugin.ts View on Github external
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);
    }
  });
}
github tinymce / tinymce / modules / tinymce / src / plugins / table / main / ts / ui / Helpers.ts View on Github external
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);
    });