返回介绍
文江博客 开发文档 tinyMCE 帮助文档 文章详情

Advanced installation choices

发布于 2019-05-06 06:50:19 字数 18198 浏览 1171 评论 0 收藏 0

There are multiple ways to instantiate TinyMCE. Accessing TinyMCE through Tiny Cloud may not be the best use case for different deployment scenarios. This section explains additional installation options including package managers, SDK download, and other custom build options.

  • TinyMCE Cloud
  • Package Managers
  • SDK / Download
  • jQuery
  • Custom Build

Cloud Install

Step 1: Include the TinyMCE script

Include this line of code in the <head> of your HTML page:

<script src="https://cloud.tinymce.com/5/tinymce.min.js"></script>

Step 2: Initialize TinyMCE as part of a web form

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().

In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/5/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

Step 3: Saving content with a form POST

When the <form> is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.

Additional information about using TinyMCE Cloud

There are a few things you need to consider when using TinyMCE Cloud. If you wish to use any local plugins (like MoxieManager for example) you need to load them using the new external_plugins option.

Also, if you wish to use a custom language, you need to enter the location of the language file into the new language_url option.

You may also want to select a specific version of the editor from TinyMCE Cloud and you should head on over to Specify editor & plugin versions for details on that.

If you have decided to use TinyMCE Cloud, please move on to the next step working with plugins where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

Package Manager Install Options

  • NPM
  • Bower
  • Composer
  • NuGet

NPM

npm install tinymce

Step 1: Include the TinyMCE script

Include this line of code in the <head> of your HTML page:

<script src="/path/to/tinymce.min.js"></script>

Step 2: Initialize TinyMCE as part of a web form

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().

In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().

<!DOCTYPE html>
<html>
<head>
  <script src="/path/to/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

Step 3: Saving content with a form POST

When the <form> is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.

Use of local plugins & language packs when installing via package managers

When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:

tinymce.init({
  selector: 'textarea',
  language: 'sv',
  language_url: '/js/sv.js',
  plugins: 'myplugin',
  external_plugins: {
    'myplugin': '/js/myplugin/plugin.min.js'
  }
});

If you have decided to use this package manager, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

Bower

bower install tinymce

If you’d like to install and build the source manually with Bower use these steps. This approach can be used when debugging or building custom plugins.

bower install tinymce-src=git://github.com/tinymce/tinymce
cd bower_components/tinymce-src
npm i
jake

Step 1: Include the TinyMCE script

Include this line of code in the <head> of your HTML page:

<script src="/path/to/tinymce.min.js"></script>

Step 2: Initialize TinyMCE as part of a web form

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().

In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().

<!DOCTYPE html>
<html>
<head>
  <script src="/path/to/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

Step 3: Saving content with a form POST

When the <form> is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.

Use of local plugins & language packs when installing via package managers

When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:

tinymce.init({
  selector: 'textarea',
  language: 'sv',
  language_url: '/js/sv.js',
  plugins: 'myplugin',
  external_plugins: {
    'myplugin': '/js/myplugin/plugin.min.js'
  }
});

If you have decided to use this package manager, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

Composer

If you’re using Composer package manager, add the following to composer.json.

php composer.phar require "tinymce/tinymce" ">= 4"

Step 1: Include the TinyMCE script

Include this line of code in the <head> of your HTML page:

<script src="/path/to/tinymce.min.js"></script>

Step 2: Initialize TinyMCE as part of a web form

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().

In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().

<!DOCTYPE html>
<html>
<head>
  <script src="/path/to/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

Step 3: Saving content with a form POST

When the <form> is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.

Use of local plugins & language packs when installing via package managers

When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:

tinymce.init({
  selector: 'textarea',
  language: 'sv',
  language_url: '/js/sv.js',
  plugins: 'myplugin',
  external_plugins: {
    'myplugin': '/js/myplugin/plugin.min.js'
  }
});

If you have decided to use this package manager, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

NuGet

Install-Package TinyMCE

Step 1: Include the TinyMCE script

Include this line of code in the <head> of your HTML page:

<script src="/path/to/tinymce.min.js"></script>

Step 2: Initialize TinyMCE as part of a web form

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().

In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().

<!DOCTYPE html>
<html>
<head>
  <script src="/path/to/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

Step 3: Saving content with a form POST

When the <form> is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.

Use of local plugins & language packs when installing via package managers

When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:

tinymce.init({
  selector: 'textarea',
  language: 'sv',
  language_url: '/js/sv.js',
  plugins: 'myplugin',
  external_plugins: {
    'myplugin': '/js/myplugin/plugin.min.js'
  }
});

If you have decided to use this package manager, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

SDK Install

Step 1: Download the Self-hosted package

If you’d rather download and install the script manually, get the package from TinyMCE Downloads.

Unzip the package and move the 'path/to/tinymce/' directory into a web accessible location on your web server (for example, localhost).

Step 2: Include the TinyMCE script

Include this line of code in the <head> of your HTML page:

<script src="path/to/tinymce/js/tinymce.min.js"></script>

Step 3: Initialize TinyMCE as part of a web form

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().

In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().

<!DOCTYPE html>
<html>
<head>
  <script src="/path/to/tinymce/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

Step 4: Saving content with a form POST

When the <form> is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.

If you decided to use the Self-hosted package, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

jQuery Install

Step 1: Download the jQuery package

We have a jQuery plugin available here if you’d rather install TinyMCE using this method.

Note: the above link will take you to the custom package download page. When building your jQuery package, select “TinyMCE core (jQuery) under the “Core Elements” section.

As with the self-hosted SDK Install option, unzip the package and move the 'path/to/tinymce/' directory into a web accessible location on your web server (for example, localhost).

Step 2: Installation

Include this line of code in the <head> of your page:

<script src="/path/to/tinymce/tinymce.min.js"></script>
<script src="/path/to/tinymce/jquery.tinymce.min.js"></script>

Step 2: Initialize TinyMCE as part of a web form

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS3 selector all you need do is pass an object that contains a selector to tinymce.init().

In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().

<!DOCTYPE html>
<html>
<head>
  <script src="/path/to/tinymce/tinymce.min.js"></script>
  <script src="/path/to/tinymce/jquery.tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
  <h1>TinyMCE Getting Started Guide</h1>
  <form method="post">
    <textarea id="mytextarea"></textarea>
  </form>
</body>
</html>

Step 3: Saving Content with a form POST

When the form is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during a form post. No additional configuration is required.

If you have decided the use the jQuery version, move on to the next step work with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

Custom Build Install

TinyMCE tries to be as flexible to your project’s needs as possible. We have a customized package builder available here where you can select the core, plugins, skins, themes and compression options you’d like to include in your download.

If you selected the standalone core option in your custom build follow the self-hosted SDK Install install instructions; if you built the jQuery core option follow the jQuery instructions.

Once you have the editor installed, move on to the next step work with plugins, where you’ll start customizing TinyMCE.

Next Work with plugins to extend TinyMCE

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文