首页
话题
消息
手册
我的
返回介绍

Code Sample plugin

发布于 2019-05-06 字数9929 浏览 840 评论 0

The Code Sample plugin (codesample) lets a user insert and embed syntax color highlighted code snippets into the editable area. It also adds a button to the toolbar which on click will open a dialog box to accept raw code input.

This plugin demonstrates the support for the new block based contenteditable=false elements available in TinyMCE version 4.3 and later.

Example
tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "codesample",
  toolbar: "codesample"
});

By default, codesample uses http://prismjs.com/ to embed the code samples within the editor and works out of the box. That is, when a user copies valid code syntax into the editable area the code will be automatically formatted according to Prism default CSS rules.

Prism.js and prism.css need to be added to a page for syntax highlighting to work. See the instructions below to learn how to do this.

Using Prism.js on your web page

You need to add prism.js and prism.css to your page in order to get the syntax highlighted code samples on your webpage (as created by the Code Sample plugin). The Code Sample plugin uses the following languages: markup, javascript, css, php, ruby, python, java, c, csharp and cpp. You can generate the prism.js and prism.css files on the download page at the Prism website.

Example of using the Prism.js script

<link rel="stylesheet" type="text/css" href="prism.css">
<script src="prism.js"></script>
<pre class="language-markup"><code>...</code></pre>

Options

codesample_languages

This configuration option enables you to set a list of languages to be displayed in the languages drop down.

Example

tinymce.init({
  selector: 'textarea',
  plugins: 'codesample',
  codesample_languages: [
		{text: 'HTML/XML', value: 'markup'},
		{text: 'JavaScript', value: 'javascript'},
		{text: 'CSS', value: 'css'},
		{text: 'PHP', value: 'php'},
		{text: 'Ruby', value: 'ruby'},
		{text: 'Python', value: 'python'},
		{text: 'Java', value: 'java'},
		{text: 'C', value: 'c'},
		{text: 'C#', value: 'csharp'},
		{text: 'C++', value: 'cpp'}
	],
  toolbar: 'codesample'
});

Live example

TinyMCE HTML JS Edit on CodePen


<textarea id="codesample">
  <p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /></p>
  <h2 style="text-align: center;">TinyMCE Code Sample Plugin</h2>
  <p style="text-align: center;">Code Sample automatically applies color highlighting to PRE and CODE elements. Highlight some text, click the Code Sample button to see `code` applied to the text.</p>
  <h3 style="text-align: center;">How to insert a snippet</h3>
  <p style="text-align: center;">To create a snippet, insert the cursor on a new/empty line and click the Code Sample button in the toolbar. Add a code snippet to the modal, select the language and click OK to add the snippet to the page.</p>
  <p style="text-align: center">Note: this demo includes the Code plugin, which enables a <strong>code view</strong>. You can use this to see how Code Sample changes the HTML in the editable area.</p>
</textarea>



tinymce.init({
  selector: 'textarea#codesample',
  height: 500,
  plugins: 'codesample code',
  codesample_languages: [
    {text: 'HTML/XML', value: 'markup'},
    {text: 'JavaScript', value: 'javascript'},
    {text: 'CSS', value: 'css'},
    {text: 'PHP', value: 'php'},
    {text: 'Ruby', value: 'ruby'},
    {text: 'Python', value: 'python'},
    {text: 'Java', value: 'java'},
    {text: 'C', value: 'c'},
    {text: 'C#', value: 'csharp'},
    {text: 'C++', value: 'cpp'}
  ],
  toolbar: 'codesample code',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ]
});


(function() { var isIE = !!window.MSInputMethodContext && !!document.documentMode; if (isIE && document.getElementsByClassName(“ie11_optional”)[0] !== undefined) { document.getElementsByClassName(“ie11_optional”)[0].style.display = ‘none’; } })(); (function() { tinymce.init({ selector: ‘textarea#codesample’, height: 500, plugins: ‘codesample code’, codesample_languages: [ {text: ‘HTML/XML’, value: ‘markup’}, {text: ‘JavaScript’, value: ‘javascript’}, {text: ‘CSS’, value: ‘css’}, {text: ‘PHP’, value: ‘php’}, {text: ‘Ruby’, value: ‘ruby’}, {text: ‘Python’, value: ‘python’}, {text: ‘Java’, value: ‘java’}, {text: ‘C’, value: ‘c’}, {text: ‘C#’, value: ‘csharp’}, {text: ‘C++’, value: ‘cpp’} ], toolbar: ‘codesample code’, content_css: [ ‘//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’, ‘//www.tiny.cloud/css/codepen.min.css’ ] }); })(); (function() { /* TODO: more js, less jekyll */ var id = “codesample”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22codesample%22%3E%0A%20%20%3Cp%20style=%22text-align:%20center;%20font-size:%2015px;%22%3E%3Cimg%20title=%22TinyMCE%20Logo%22%20src=%22//www.tiny.cloud/images/glyph-tinymce@2x.png%22%20alt=%22TinyMCE%20Logo%22%20width=%22110%22%20height=%2297%22%20/%3E%3C/p%3E%0A%20%20%3Ch2%20style=%22text-align:%20center;%22%3ETinyMCE%20Code%20Sample%20Plugin%3C/h2%3E%0A%20%20%3Cp%20style=%22text-align:%20center;%22%3ECode%20Sample%20automatically%20applies%20color%20highlighting%20to%20PRE%20and%20CODE%20elements.%20Highlight%20some%20text,%20click%20the%20Code%20Sample%20button%20to%20see%20%60code%60%20applied%20to%20the%20text.%3C/p%3E%0A%20%20%3Ch3%20style=%22text-align:%20center;%22%3EHow%20to%20insert%20a%20snippet%3C/h3%3E%0A%20%20%3Cp%20style=%22text-align:%20center;%22%3ETo%20create%20a%20snippet,%20insert%20the%20cursor%20on%20a%20new/empty%20line%20and%20click%20the%20Code%20Sample%20button%20in%20the%20toolbar.%20Add%20a%20code%20snippet%20to%20the%20modal,%20select%20the%20language%20and%20click%20OK%20to%20add%20the%20snippet%20to%20the%20page.%3C/p%3E%0A%20%20%3Cp%20style=%22text-align:%20center%22%3ENote:%20this%20demo%20includes%20the%20Code%20plugin,%20which%20enables%20a%20%3Cstrong%3Ecode%20view%3C/strong%3E.%20You%20can%20use%20this%20to%20see%20how%20Code%20Sample%20changes%20the%20HTML%20in%20the%20editable%20area.%3C/p%3E%0A%3C/textarea%3E%0A%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20’textarea#codesample’,%0A%20%20height:%20500,%0A%20%20plugins:%20’codesample%20code’,%0A%20%20codesample_languages:%20[%0A%20%20%20%20%7Btext:%20’HTML/XML’,%20value:%20’markup’%7D,%0A%20%20%20%20%7Btext:%20’JavaScript’,%20value:%20’javascript’%7D,%0A%20%20%20%20%7Btext:%20’CSS’,%20value:%20’css’%7D,%0A%20%20%20%20%7Btext:%20’PHP’,%20value:%20’php’%7D,%0A%20%20%20%20%7Btext:%20’Ruby’,%20value:%20’ruby’%7D,%0A%20%20%20%20%7Btext:%20’Python’,%20value:%20’python’%7D,%0A%20%20%20%20%7Btext:%20’Java’,%20value:%20’java’%7D,%0A%20%20%20%20%7Btext:%20’C’,%20value:%20’c’%7D,%0A%20%20%20%20%7Btext:%20’C#’,%20value:%20’csharp’%7D,%0A%20%20%20%20%7Btext:%20’C++’,%20value:%20’cpp’%7D%0A%20%20],%0A%20%20toolbar:%20’codesample%20code’,%0A%20%20content_css:%20[%0A%20%20%20%20’//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’,%0A%20%20%20%20’//www.tiny.cloud/css/codepen.min.css’%0A%20%20]%0A%7D);%0A%0A”); var css = “”; var tabNames = [“run”,”html”,”js”]; /* Note: there are some other fields we could populate here to polish this. */ /* See: https://blog.codepen.io/documentation/api/prefill/ */ var data = { title: “TinyMCE Example”, description: ”, html: html, css: css, css_external: ‘https://www.tiny.cloud/css/codepen.min.css’, js: js, js_external: ‘https://cloud.tinymce.com/5/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc’ }; document.getElementById(“codepen_data_codesample”).value = JSON.stringify(data); /* TODO: */ var tabs = tabNames.map(function(t) { return { tab: document.getElementById(“codepen_tab_” + t + “_” + id), pane: document.getElementById(“codepen_pane_” + t + “_” + id) }; }); tabs.forEach(function(t) { t.tab.onclick = function(e) { tabs.forEach(function(tt) { tt.pane.style.display = t === tt ? ‘block’ : ‘none’; tt.tab.className = t === tt ? ‘codepen_tab_selected’ : ‘codepen_tab_deselected’; }); e.preventDefault(); }; }); if (document.getElementById(“codepen_tab_codepen_” + id) !== null) { document.getElementById(“codepen_tab_codepen_” + id).onclick = function() { document.getElementById(“codepen_form_” + id).submit(); }; } })();

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!