权限没有，则隐藏 function forum_list_access_filter($forumlist, $gid, $allow = 'allowread') { global $grouplist; if (empty($forumlist)) return array(); if (1 == $gid) return $forumlist; $forumlist_filter = $forumlist; $group = $grouplist[$gid]; foreach ($forumlist_filter as $fid => $forum) { if (empty($forum['accesson']) && empty($group[$allow]) || !empty($forum['accesson']) && empty($forum['accesslist'][$gid][$allow])) { unset($forumlist_filter[$fid]); } unset($forumlist_filter[$fid]['accesslist']); } return $forumlist_filter; } function forum_filter_moduid($moduids) { $moduids = trim($moduids); if (empty($moduids)) return ''; $arr = explode(',', $moduids); $r = array(); foreach ($arr as $_uid) { $_uid = intval($_uid); $_user = user_read($_uid); if (empty($_user)) continue; if ($_user['gid'] > 4) continue; $r[] = $_uid; } return implode(',', $r); } function forum_safe_info($forum) { //unset($forum['moduids']); return $forum; } function forum_filter($forumlist) { foreach ($forumlist as &$val) { unset($val['brief'], $val['announcement'], $val['seo_title'], $val['seo_keywords'], $val['create_date_fmt'], $val['icon_url'], $val['modlist']); } return $forumlist; } function forum_format_url($forum) { global $conf; if (0 == $forum['category']) { // 列表URL $url = url('list-' . $forum['fid'], '', FALSE); } elseif (1 == $forum['category']) { // 频道 $url = url('category-' . $forum['fid'], '', FALSE); } elseif (2 == $forum['category']) { // 单页 $url = url('read-' . trim($forum['brief']), '', FALSE); } if ($conf['url_rewrite_on'] > 1 && $forum['well_alias']) { if (0 == $forum['category'] || 1 == $forum['category']) { $url = url($forum['well_alias'], '', FALSE); } elseif (2 == $forum['category']) { // 单页 $url = ($forum['threads'] && $forum['brief']) ? url($forum['well_alias'] . '-' . trim($forum['brief']), '', FALSE) : url($forum['well_alias'], '', FALSE); } } return $url; } function well_forum_alias() { $forumlist = forum_list_cache(); if (empty($forumlist)) return ''; $key = 'forum-alias'; static $cache = array(); if (isset($cache[$key])) return $cache[$key]; $cache[$key] = array(); foreach ($forumlist as $val) { if ($val['well_alias']) $cache[$key][$val['fid']] = $val['well_alias']; } return array_flip($cache[$key]); } function well_forum_alias_cache() { global $conf; $key = 'forum-alias-cache'; static $cache = array(); // 用静态变量只能在当前 request 生命周期缓存，跨进程需要再加一层缓存：redis/memcached/xcache/apc if (isset($cache[$key])) return $cache[$key]; if ('mysql' == $conf['cache']['type']) { $arr = well_forum_alias(); } else { $arr = cache_get($key); if (NULL === $arr) { $arr = well_forum_alias(); !empty($arr) AND cache_set($key, $arr); } } $cache[$key] = empty($arr) ? '' : $arr; return $cache[$key]; } ?>javascript - Insert text at cursor using tinyMCE and Angular - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Insert text at cursor using tinyMCE and Angular - Stack Overflow

    javascript - Insert text at cursor using tinyMCE and Angular - Stack Overflow

    programmeradmin6浏览0评论

    Using tinyMCE with Angular I need to insert text at the cursor position, preferably with a toolbar button.

    As I understand, I'll need to use the onExecCommand event with mceInsertContent mand.

    I've looked at the following:

    • How to insert text in TinyMCE Editor where the cursor is?
    • Inserting text in TinyMCE Editor where the cursor is

    But the solutions don't help in this case.

    Here's the documentation

    editor-dialogponent.html

    <editor [init]="tinyMceConfig"
  [formControl]="data.formControl">
</editor>

    editor-dialogponent.ts

    /* ... */

export class EditorDialogComponent implements OnInit {
  tinyMceConfig: any;

  constructor(
    /* ... */
  ) { }

  ngOnInit() {
    this.configureTinyMce();
  }

  configureTinyMce() {
    this.tinyMceConfig = {
      theme: 'modern',
      menubar: false,
      branding: false,
      height: 400,
      skin_url: 'assets/tinymce/skins/lightgray',
      inline: false,
      plugins: [
        'advlist lists link image directionality',
        'searchreplace visualblocks visualchars media table contextmenu paste textcolor colorpicker pagebreak code'
      ],
      // tslint:disable-next-line:max-line-length
      toolbar: 'copy undo redo formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat hr pagebreak code',
      image_advtab: true,
      imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
      paste_data_images: !0,
      importcss_append: !0,
      images_upload_handler: function (e, t, a) {
        console.log('image');
        t('data:' + e.blob().type + ';base64,' + e.base64());
      },
    };
  }
}

    Thanks

    Using tinyMCE with Angular I need to insert text at the cursor position, preferably with a toolbar button.

    As I understand, I'll need to use the onExecCommand event with mceInsertContent mand.

    I've looked at the following:

    • How to insert text in TinyMCE Editor where the cursor is?
    • Inserting text in TinyMCE Editor where the cursor is

    But the solutions don't help in this case.

    Here's the documentation

    editor-dialog.ponent.html

    <editor [init]="tinyMceConfig"
  [formControl]="data.formControl">
</editor>

    editor-dialog.ponent.ts

    /* ... */

export class EditorDialogComponent implements OnInit {
  tinyMceConfig: any;

  constructor(
    /* ... */
  ) { }

  ngOnInit() {
    this.configureTinyMce();
  }

  configureTinyMce() {
    this.tinyMceConfig = {
      theme: 'modern',
      menubar: false,
      branding: false,
      height: 400,
      skin_url: 'assets/tinymce/skins/lightgray',
      inline: false,
      plugins: [
        'advlist lists link image directionality',
        'searchreplace visualblocks visualchars media table contextmenu paste textcolor colorpicker pagebreak code'
      ],
      // tslint:disable-next-line:max-line-length
      toolbar: 'copy undo redo formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat hr pagebreak code',
      image_advtab: true,
      imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
      paste_data_images: !0,
      importcss_append: !0,
      images_upload_handler: function (e, t, a) {
        console.log('image');
        t('data:' + e.blob().type + ';base64,' + e.base64());
      },
    };
  }
}

    Thanks

    • javascript
    • angular
    • tinymce
    • tinymce-4
    Share Improve this question edited May 28, 2019 at 13:35 Wayne asked May 3, 2019 at 9:24 WayneWayne 1563 silver badges13 bronze badges
    Add a ment  | 

    4 Answers 4

    Reset to default 6

    The documentation you referenced is how to get TinyMCE integrated in an Angular application. What I believe you want to do is:

    1. Add a toolbar button to the toolbar
    2. Clicking the toolbar button inserts content at the current cursor location

    Fundamentally the fact that you are using Angular is not important to either of these goals so you won't see anything Angular specific in the following details.

    Adding a Toolbar Button

    This is done (in TinyMCE 5) via the tinymce.editor.ui.registry.addButton() API. This is documented here: https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addbutton

    Inserting Content at the Cursor

    This is done (in TinyMCE 5) via the tinymce.editor.insertContent() API. This is documented here: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent

    The simplest way to do all of this is to use your TinyMCE configuration via the setup() function. You can add the button and determine what actions (via JavaScript) it will take when clicked all in one place.

    Here is an example: http://fiddle.tinymce./fHgaab

    For anyone looking at this recently ( Mar 2021 ), this is how to send mands to tiny mce in angular 11:

    import {Component, OnInit, ViewChild} from '@angular/core';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
import {EditorComponent as tiny} from '@tinymce/tinymce-angular';

@Component({
  selector: 'app-test-tiny',
  templateUrl: './test-tiny.ponent.html',
  styleUrls: ['./test-tiny.ponent.scss']
})
export class TestTinyComponent implements OnInit {
  @ViewChild(tiny) tinyEditor: tiny;
  contents = 'Hello World';

  get preview(): SafeHtml {
    return this.san.bypassSecurityTrustHtml(this.contents);
  }

  constructor(protected san: DomSanitizer) {
  }

  ngOnInit(): void {
  }

  doTest(): void {
    this.tinyEditor.editor.execCommand('mceInsertContent', false, '<h1>Dude</h1>');
  }

}

    Seems like you are linking examples for a different library. So those wouldn't work. Is there any reason you chose to use the TinyMCE library instead of https://www.npmjs./package/angular2-tinymce ?

    I've looked into the source code and couldn't find an easy way of targeting the tinyMCE instance through ViewChild, which is possible with the other library.

    Michael's answer is correct, as it isn't important that I'm using Angular.

    But I thought it would be worth sharing the Angular implementation for future reference.

    TL;DR: Here's an example StackBlitz - Angular TinyMCE Insert Text at Cursor

    The process included:

    • Upgrading to the (currently) latest versions of TinyMCE and TinyMCE Angular:

      • npm install [email protected]
      • npm install @tinymce/[email protected]

    • Importing EditorModule:

      /* ... */

import { EditorModule } from '@tinymce/tinymce-angular';

imports: [
  /* ... */
  EditorModule
]

/* ... */

    • Initialise the editor in the ponent (notice the setup() function for this case):

      export class AppComponent implements OnInit {
  name = 'Angular & TinyMCE';
  tinyMceConfig: any;

  ngOnInit() {
    this.configureTinyMce();
  }

  configureTinyMce() {
    this.tinyMceConfig = {
      branding: false,
      /**
      * 'content_css' is needed to prevent console errors
      * if you're hosting your own TinyMCE,
      * You'll also need to add the following to angular.json:
      *  /* ... */
      *  "scripts": [
      *    "node_modules/tinymce/tinymce.min.js",
      *    "node_modules/tinymce/themes/silver/theme.js"
      *  ]
      *  /* ... */
      */
      // content_css: 'assets/tinymce/skins/ui/oxide/content.min.css',
      height: 400,
      image_advtab: true,
      imagetools_toolbar: `
        rotateleft rotateright |
        flipv fliph | 
        editimage imageoptions`,
      importcss_append: !0,
      inline: false,
      menubar: true,
      paste_data_images: !0,
      /**
      * 'skin_url' is needed to prevent console errors 
      * if you're hosting your own TinyMCE
      */
      // skin_url: 'assets/tinymce/skins/ui/oxide',
      toolbar: `
        insertText |
        copy undo redo formatselect |
        bold italic strikethrough forecolor backcolor |
        link | alignleft aligncenter alignright alignjustify |
        numlist bullist outdent indent |
        removeformat`,
      setup: (editor) => {
        editor.ui.registry.addButton('insertText', {
          text: 'Press Me To Insert Text!',
          onAction: () => {
            editor.insertContent('<strong>Hello World!</strong>');
          }
        });
      }
    };
  }
}

    • The HTML is simply: 

      <editor [init]="tinyMceConfig"></editor>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论