Styles/Theme are not loaded

astridx commented 5 years ago

I would like to use this plugin in TinyMCE. Unfortunately I have problems setting up. The plugin works great. Thanks a lot for this. The button is also displayed without any problems. But the a11y hints are not provided with CSS. See attached picture. What am I doing wrong?

var www html tinymce test html

This is my test-file

<html>
<head>
  <style>
    body {
      width: 900px;
      margin: 2em auto;
      background-color: #eee;
    }

    .mce-i-a11y:before {
      content: "\e900";
    }
  </style>

  <script src="tinymce.min.js"></script>
  <script>  
      tinymce.init({ 
    selector:'#textarea1',
        plugins: "link, image, textcolor, table, a11y_checker",
        menubar: true,
        toolbar: [
          "bold,underline,|,link,image,|,forecolor,backcolor,|,alignleft,aligncenter,alignright,|,outdent,indent,|,bullist,numlist,|,fontsizeselect,formatselect,|,check_a11y"
        ]
});
  </script>
</head>
<body>
 <div class="main">
    <h1>TinyMCE Accessibility Plugin Demo</h1>
    <div id="editor1">  
        <textarea id="textarea1">
          <h1>Test Document</h1>
          <h4>the document for testing</h4>
          <img src="http://placekitten.com/640/480" width="300" />
          <table width="100%">
            <tr>
              <td>A</td>
              <td>B</td>
              <td>C</td>
            </tr>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
          </table>
          <img src="https://canvas.instructure.com/images/login/canvas-logo@2x.png" alt="canvas-logo@2x.png" width="300" />
          <p style="color: #ccc">
            Fusce id ligula rhoncus, consequat augue aliquam, sagittis ligula.
            Morbi euismod rutrum dignissim. Ut sed elementum mi. Pellentesque
            condimentum nisl non eros pretium, ut pharetra urna sodales.
          </p>
          <a href="https://en.wikipedia.org/wiki/Free_to_Choose">
            <img src="https://placekitten.com/480/640" width=300px alt="you are free"/>
          </a>
          <a href="https://en.wikipedia.org/wiki/Free_to_Choose">You are Free!</a>
          <img src="https://imgs.xkcd.com/comics/visual_field.png" alt="I recently learned something that solved a mystery that had bugged me since childhood--why, when I looked at an analog clock, the hand would sometimes seem to take a couple seconds to start ticking. Google 'stopped clock illusion'." />
          <H1>this is a really big heading tag. 51 chars long even. this is a really big heading tag. 51 chars long even. 12345678901234567890</H1>
          <p>Time for some lists!</p>
          <p>1. List item</p>
          <p>2. List item</p>
          <p>3. List item</p>
          <p>Time for some bullets!</p>
          <p> -  List item</p>
          <p>-  List item</p>
          <p>  - List item</p>
          <p>Edge cases:</p>
          <p>1. List item</p>
          <p>2. <strong>List item</strong><br>Something separated by a break</p>
          <p>3. List item</p>
          <p> - List item</p>
          <p> - List item</p>
          <p> - List item</p>
          <p>Split breaks:</p>
          <p>1. List Item<br>2. List Item</p>       
    </textarea>
         </div>
  </div>
</body>
</html>

astridx commented 5 years ago

I solved my problem. I had to add "@instructure/ui-themes/lib/canvas"

dac514 commented 5 years ago

Hi @astridx (and others)

I'm having the same issue. I landed here from Stackoverflow

Can you elaborate on I had to add "@instructure/ui-themes/lib/canvas"

I'm trying to get this working in Pressbooks (WordPress)

Using webpack (Laravel Mix) I am compiling ( ES2015 syntax, modules, minify, ...):

.js( 
 'node_modules/tinymce-a11y-checker/lib/modules/plugin.js', 
 'my/plugins/tinymce-a11y-checker.js' 
)

I am then using WordPress hooks to load the my/plugins/tinymce-a11y-checker.js and I got to here:

npm install @instructure/ui-themes then recompiling does not fix the issue.

Where is the CSS? What am I missing?

dac514 commented 5 years ago

Solved.

Instead of compiling the plugin, I compile this:

import 'tinymce-a11y-checker'
import { canvas } from '@instructure/ui-themes'
canvas.use();

Then, load that into WordPress. Needs tweaking, but better than no CSS at all.

Regards,

csbalazs commented 4 years ago

@connerbw

I read this thread, but your Stackoverflow's link doesn't work. Could you help me please, how can I integrate the 11y-checker plugin into the Wordpress?

brenttsai1148 commented 4 years ago

I had same issue when I package plugin source code with webpack, I had been try

add "@instructure/ui-themes/lib/canvas" to package.json's dependencies
use command ”npx webpack --config webpack.config.js” export plugin.min.js.
put plugin.min.js to TinyMCE plugin folder ”a11y_checker” BUTTT Still No CSS like Screenshot!

I'am not good at front-end, anybody has idea? many thanks!!

Solve : I edit file "node_modules\tinymce-a11y-checker\lib\plugin.js" , add two line in the end var _canvas = _interopRequireDefault(require("@instructure/ui-themes/lib/canvas")); _canvas.default.use();

just like @astridx descipt, and recompile again, it's ok now.

But Change Language still not work , still struggle.

instructure / tinymce-a11y-checker

Styles/Theme are not loaded #52

This is my test-file