返回介绍

BBCode plugin

发布于 2019-05-06 字数6078 浏览 813 评论 0

This plugin makes it possible to edit BBCode in a WYSIWYG style by converting tags like [b] into <strong> and then back, when user submits the content.

You will need to sacrifice quite a lot of TinyMCE’s functionality to use this plugin properly, since BBCode format doesn’t support the whole HTML specification.

Type: String

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

Options

bbcode_dialect

This option allows you to specify the BBCode dialect. We only support PunBB at the moment but hope to add more dialects in the future. Suported tags are listed in the table below:

BBCode Description HTML equivalent
[b]...[/b] Bold text <strong>...</strong>
[i]...[/i] Italicize text <em>...</em>
[u]...[/u] Underline text <u>...</u>
[url=...]...[/url] Link <a href="...">...</a>
[img]...[/img] Image <img src="..." />
[color=...]...[/color] Color text <font color="...">...</font>
[code]...[/code] Code <span class="codeStyle">...</span>
[quote]...[/quote] Quote <span class="quoteStyle">...</span>
\n Newline <br />

When using PunBB dialect, codeStyle and quoteStyle will be converted to [code] and [quote] correspondingly.

Type: String

Default Value: "punbb"

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

Live example

TinyMCE HTML JS Edit on CodePen


<textarea id="bbcode">
  <p>Press the <b>&lt;&gt;</b> (Source code) button to see the content output in <em>bbcode</em> format.</p>
  <p><b>Example bold text.</b></p>
  <p><i>Example italic text.</i></p>
</textarea>



tinymce.init({
  selector: 'textarea#bbcode',
  height: 200,
  plugins: 'bbcode code',
  toolbar: 'undo redo | bold italic underline | 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#bbcode’, height: 200, plugins: ‘bbcode code’, toolbar: ‘undo redo | bold italic underline | 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 = “bbcode”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22bbcode%22%3E%0A%20%20%3Cp%3EPress%20the%20%3Cb%3E<>%3C/b%3E%20(Source%20code)%20button%20to%20see%20the%20content%20output%20in%20%3Cem%3Ebbcode%3C/em%3E%20format.%3C/p%3E%0A%20%20%3Cp%3E%3Cb%3EExample%20bold%20text.%3C/b%3E%3C/p%3E%0A%20%20%3Cp%3E%3Ci%3EExample%20italic%20text.%3C/i%3E%3C/p%3E%0A%3C/textarea%3E%0A%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20’textarea#bbcode’,%0A%20%20height:%20200,%0A%20%20plugins:%20’bbcode%20code’,%0A%20%20toolbar:%20’undo%20redo%20%7C%20bold%20italic%20underline%20%7C%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_bbcode”).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(); }; } })();

您暂时不能评论!

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

还没有评论!

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